Водяной знак на изображении товара miniShop2
Подскажите, пожалуйста, как проще всего поставить текстовый водяной знак на изображении товара miniShop2?
Комментарии: 26
Пробовал обрабатывать через phpthumbof
[[+thumb:phpthumbof=`fltr[]=wmt|www.site.com|3|T|FFFFFF||100|20|0||0|`]]
, но тормозит он ужасно, да и неправильно это как-то, если уж изображение обрабатывается при добавлении в галерею, то хотелось бы там и налаживать ватермарк.
Можно попробовать внести эту генерацию в настройки источника медиа. По идее, должно работать, но не проверял.
Спасибо, Василий, разобрался. Вот рабочий пример JSON строки для параметра thumbnails:
[{"w":210,"h":220,"q":90,"zc":"1","bg":"000000","fltr":"wmt|www.site.com|3|T|FFFFFF||100|20|0||0|"},{"w":360,"h":400,"q":90,"zc":"1","bg":"000000","fltr":"wmt|www.site.com|3|T|FFFFFF||100|20|0||0|"]}
При таких параметрах создается надпись site.com на миниатюре и на «среднем» изображении.
А на основную картинку товара(ту что загружаем) вы не наносили водяной знак?
Оригинальное изображение не обрабатывается, как вариант добавить в настройках источника медиа генерацию увеличенного изображения и использовать его.
Спасибо за ответ, тоже об этом подумал, но не все фото под увеличенный размер подойдут.
А подскажите, как прописать ссылку для сгенерированного увеличенного изображения? пишу так:
<a rel="fancybox" href="[[+1200x800:default=`/assets/components/minishop2/img/web/ms2_big.png`]]" target="_blank">
<img src="[[+360x270:default=`/assets/components/minishop2/img/web/ms2_medium.png`]]" width="360" height="270" alt="" title="" id="mainImage" />
</a>
Но, увы, ничего не выходит. Ссылка ведет на основное фото. В связи с этим все наложения водяных знаков не особо существенны, ведь по клику доступна фотка без водяного знака.
Ссылку вы подключили правильно, но нужно также подключить вызов соответствующих превьюх в сниппете:
&includeThumbs=`1200x800,360x270`
Чего-то я туплю. В карточке товара вызываю так все отображение:
В параметрах сниппета msProduct указал
[[$msProduct.content]]
И в итоге он не выводит ссылки на сгенерированну фотку большого размера.В параметрах сниппета msProduct указал
&includeThumbs=`1200x800,360x270`
Где я не так делаю?
Вы указали требуемые для генерации превьюшки в медиа-источнике? (картинки вообще генерируются?)
Полная последовательность действий для отображения желаемых превьюх:
1. «Медиа — Источники файлов — создание/редактирование нужного источника» Параметр thumbnails: вводим в json-массив перечень желаемых превьюшек с требуемыми параметрами (водяной знак, % качества при сжатии и тд)
2. Подключаем в желаемый сниппет &includeThumbs (или leftjoin'ом, если параметра includeThumbs нет) с перечнем требуемых превьюшек
3. Выводим в чанке сниппета соответствующий плейсхолдер
Полная последовательность действий для отображения желаемых превьюх:
1. «Медиа — Источники файлов — создание/редактирование нужного источника» Параметр thumbnails: вводим в json-массив перечень желаемых превьюшек с требуемыми параметрами (водяной знак, % качества при сжатии и тд)
2. Подключаем в желаемый сниппет &includeThumbs (или leftjoin'ом, если параметра includeThumbs нет) с перечнем требуемых превьюшек
3. Выводим в чанке сниппета соответствующий плейсхолдер
Да, все так и делаю. Но вот меня смущает один момент — галерея фото товаров выводиться сниппетом msGallery. К нему применим параметр &includeThumbs? Я прописал, но ничего не меняется. Выводится фотка оригинальная.
По п.1 и 2 все так и сделал.
По п.1 и 2 все так и сделал.
Нет, в msGallery это не требуется — там достаточно просто указать плейсхолдер.
&includeThumbs — для подключения превьюшек в списке товаров (сниппет msProducts) и корзине (msCart).
Посмотрите журнал ошибок, может быть там что есть.
&includeThumbs — для подключения превьюшек в списке товаров (сниппет msProducts) и корзине (msCart).
Посмотрите журнал ошибок, может быть там что есть.
Журнал ошибок пуст. Вот у человечка такой же вопрос был: https://modx.pro/help/5670/ Но ему никто не ответил((
Основная картинка не должна меняться, ибо из чего генерировать превьюшки при изменении правил?
Тоже верно, не подумал об этом. Спасибо.
Василий, подскажи, пожалуйста, как обновить превьюшку из сниппета? Хочу сделать сниппет, который будет обновлять все превьюшки у всех товаров.
У объекта msProductFile есть метод generateThumbnails();
Нужно выбрать все оригинальные картинки у товара (parent = 0, type = image) и запустить у каждой этот метод.
Однако, он никак не удалит старые ненужные картинки, из-за этого и нет специальной кнопочки в админке, для обновления всех картинок сразу.
Может, позже придумаю.
Нужно выбрать все оригинальные картинки у товара (parent = 0, type = image) и запустить у каждой этот метод.
Однако, он никак не удалит старые ненужные картинки, из-за этого и нет специальной кнопочки в админке, для обновления всех картинок сразу.
Может, позже придумаю.
Интересно, если загружаемая основная картинка — формата PNG, а для уменьшения размера (и скорости загрузки странички товара) её разумнее преобразовать в JPG с качеством сжатия ~90%, этого на источниках никак не отстроить?
Нет, оригинал сохраняется как есть, но можно настроить неограниченно количество превьюшек.
Конечно, могут быть и превьюшки с приличным разрешением и форматом jpg.
Конечно, могут быть и превьюшки с приличным разрешением и форматом jpg.
Василий, а как png наложить? так правильно:
{"w":300,"h":300,"q":100,"bg":"FFFFFF","far":"C","zc":"0","fltr":"wmi|assets/images/logimg.png|C|50"}
все разобрался благодаря этой теме modx.pro/development/1547-phpthumb-imposition-watermark/
НЕ хватало слеша после wmi|
НЕ хватало слеша после wmi|
Сделал все по вашей инструкции, перегенерировал превьюшки у одного товара для примера из админки.
В результате ничего не нанеслось((
А новые фото добавил — все появилось. Чую пахнет кешем. Скажите кеш фото где можно удалить?
Не папка ли /assets/cache_image/products — для него?
В результате ничего не нанеслось((
А новые фото добавил — все появилось. Чую пахнет кешем. Скажите кеш фото где можно удалить?
Не папка ли /assets/cache_image/products — для него?
А зачем вотермарк на картинке?
Посмотрите на крупные сайты, типа «Эльдорадо», «Связной» и прочие — нигде нет водяных знаков.
По мне, плохой тон и нищебродство.
P.S. На недавнем сайте делал почти 1000 изображений товаров на белом фоне и был бы рад, если бы кто-то потом использовал эти изображения. Сейчас в процессе сайт с 5000 картинками и даже в мыслях не было потом ставить вотермарк.
Посмотрите на крупные сайты, типа «Эльдорадо», «Связной» и прочие — нигде нет водяных знаков.
По мне, плохой тон и нищебродство.
P.S. На недавнем сайте делал почти 1000 изображений товаров на белом фоне и был бы рад, если бы кто-то потом использовал эти изображения. Сейчас в процессе сайт с 5000 картинками и даже в мыслях не было потом ставить вотермарк.
Если тётя скачает картинку товара на планшет и вечером дома покажет дяде, а он одобрит, то она пойдет покупать это. Если на картинке ватермарк с названием сайта / бренда / магазина — то скорее всего там и будет покупать.
В общем заговнокодил следующим образом:
в чанке tpl.msGallery.outer добавил id для ссылки:
При добавлении фото, получаем папку «x800»
В шаблоне товара внизу добавляем скрипт:
Сделал так, потому что ссылка независимо от вывода в чанке tpl.msGallery.outer всегда вела на полноценную картинку без ватермарка.
решение мне не нравится, но оно работает.
в чанке tpl.msGallery.outer добавил id для ссылки:
<div id="msGallery">
<a id="NoRealHref" rel="lightbox" href="[[+url:default=`/assets/components/minishop2/img/web/ms2_big.png`]]" target="_blank" style="float:left;margin-right: 23px;" onclick="return:false;">
<img src="[[+340x340:default=`/assets/components/minishop2/img/web/ms2_medium.png`]]" width="340" height="340" alt="" title="" id="mainImage" />
</a>
<div class="row">
[[+rows]]
</div>
</div>
Выставил генерацию доп превью следующим образом:{"h":800,"q":100,"zc":"0","bg":"000000","fltr":"wmi|/images/wtm.png|C|50|0|0|0"}
только по высоте, так как картинка может быть и горизонтальная и вертикальная, должна быть не выше 800 что бы помещалась в лайтбокс на экране.При добавлении фото, получаем папку «x800»
В шаблоне товара внизу добавляем скрипт:
<script>
$(document).ready(function(){
setInterval(function(){
var NoRealLink = $('#NoRealHref').attr('href').split('/');
var RealLink = '/assets/images/products/[[*id]]/x800/'+NoRealLink[NoRealLink.length - 1];
$('#NoRealHref').attr('href',RealLink);
}, 500);
});
</script>
получает название картинки, и берет её строго из папки х800.Сделал так, потому что ссылка независимо от вывода в чанке tpl.msGallery.outer всегда вела на полноценную картинку без ватермарка.
решение мне не нравится, но оно работает.
Спасибо за Ваше решение.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.