Водяной знак на изображении товара miniShop2

Подскажите, пожалуйста, как проще всего поставить текстовый водяной знак на изображении товара miniShop2?

Богдан

21 марта 2013, 21:47

7 768

Комментарии: 26

Богдан

22 марта 2013, 02:04

Пробовал обрабатывать через phpthumbof

[[+thumb:phpthumbof=`fltr[]=wmt|www.site.com|3|T|FFFFFF||100|20|0||0|`]]

, но тормозит он ужасно, да и неправильно это как-то, если уж изображение обрабатывается при добавлении в галерею, то хотелось бы там и налаживать ватермарк.

Василий Наумкин

22 марта 2013, 08:38

Можно попробовать внести эту генерацию в настройки источника медиа. По идее, должно работать, но не проверял.

Богдан

22 марта 2013, 13:41

Спасибо, Василий, разобрался. Вот рабочий пример 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 на миниатюре и на «среднем» изображении.

Евгений

23 марта 2013, 15:41

А на основную картинку товара(ту что загружаем) вы не наносили водяной знак?

Богдан

23 марта 2013, 15:58

Оригинальное изображение не обрабатывается, как вариант добавить в настройках источника медиа генерацию увеличенного изображения и использовать его.

Евгений

23 марта 2013, 16:28

Спасибо за ответ, тоже об этом подумал, но не все фото под увеличенный размер подойдут.

Андрей

08 декабря 2015, 16:45

А подскажите, как прописать ссылку для сгенерированного увеличенного изображения? пишу так:

<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>

Но, увы, ничего не выходит. Ссылка ведет на основное фото. В связи с этим все наложения водяных знаков не особо существенны, ведь по клику доступна фотка без водяного знака.

Максим Кузнецов

08 декабря 2015, 18:27

Ссылку вы подключили правильно, но нужно также подключить вызов соответствующих превьюх в сниппете:

&includeThumbs=`1200x800,360x270`

Андрей

08 декабря 2015, 18:48

Чего-то я туплю. В карточке товара вызываю так все отображение:

[[$msProduct.content]]

И в итоге он не выводит ссылки на сгенерированну фотку большого размера.
В параметрах сниппета msProduct указал

&includeThumbs=`1200x800,360x270`

Где я не так делаю?

Максим Кузнецов

08 декабря 2015, 19:00

Вы указали требуемые для генерации превьюшки в медиа-источнике? (картинки вообще генерируются?)

Полная последовательность действий для отображения желаемых превьюх:

1. «Медиа — Источники файлов — создание/редактирование нужного источника» Параметр thumbnails: вводим в json-массив перечень желаемых превьюшек с требуемыми параметрами (водяной знак, % качества при сжатии и тд)

2. Подключаем в желаемый сниппет &includeThumbs (или leftjoin'ом, если параметра includeThumbs нет) с перечнем требуемых превьюшек

3. Выводим в чанке сниппета соответствующий плейсхолдер

Андрей

08 декабря 2015, 19:39

Да, все так и делаю. Но вот меня смущает один момент — галерея фото товаров выводиться сниппетом msGallery. К нему применим параметр &includeThumbs? Я прописал, но ничего не меняется. Выводится фотка оригинальная.
По п.1 и 2 все так и сделал.

Максим Кузнецов

08 декабря 2015, 20:02

Нет, в msGallery это не требуется — там достаточно просто указать плейсхолдер.

&includeThumbs — для подключения превьюшек в списке товаров (сниппет msProducts) и корзине (msCart).

Посмотрите журнал ошибок, может быть там что есть.

Андрей

08 декабря 2015, 20:33

Журнал ошибок пуст. Вот у человечка такой же вопрос был: https://modx.pro/help/5670/ Но ему никто не ответил((

Василий Наумкин

23 марта 2013, 16:31

Основная картинка не должна меняться, ибо из чего генерировать превьюшки при изменении правил?

Евгений

23 марта 2013, 16:33

Тоже верно, не подумал об этом. Спасибо.

Богдан

23 марта 2013, 17:08

Василий, подскажи, пожалуйста, как обновить превьюшку из сниппета? Хочу сделать сниппет, который будет обновлять все превьюшки у всех товаров.

Василий Наумкин

23 марта 2013, 17:16

У объекта msProductFile есть метод generateThumbnails();

Нужно выбрать все оригинальные картинки у товара (parent = 0, type = image) и запустить у каждой этот метод.

Однако, он никак не удалит старые ненужные картинки, из-за этого и нет специальной кнопочки в админке, для обновления всех картинок сразу.

Может, позже придумаю.

Алексей

27 апреля 2014, 09:05

Интересно, если загружаемая основная картинка — формата PNG, а для уменьшения размера (и скорости загрузки странички товара) её разумнее преобразовать в JPG с качеством сжатия ~90%, этого на источниках никак не отстроить?

Василий Наумкин

27 апреля 2014, 13:42

Нет, оригинал сохраняется как есть, но можно настроить неограниченно количество превьюшек.

Конечно, могут быть и превьюшки с приличным разрешением и форматом jpg.

Александр Толстенко

09 июля 2015, 21:37

Василий, а как png наложить? так правильно:

{"w":300,"h":300,"q":100,"bg":"FFFFFF","far":"C","zc":"0","fltr":"wmi|assets/images/logimg.png|C|50"}

Александр Толстенко

09 июля 2015, 22:10

все разобрался благодаря этой теме modx.pro/development/1547-phpthumb-imposition-watermark/

НЕ хватало слеша после wmi|

Андрей

01 марта 2016, 22:11

Сделал все по вашей инструкции, перегенерировал превьюшки у одного товара для примера из админки.
В результате ничего не нанеслось((
А новые фото добавил — все появилось. Чую пахнет кешем. Скажите кеш фото где можно удалить?
Не папка ли /assets/cache_image/products — для него?

Stan Ezersky

08 декабря 2015, 18:47

А зачем вотермарк на картинке?
Посмотрите на крупные сайты, типа «Эльдорадо», «Связной» и прочие — нигде нет водяных знаков.

По мне, плохой тон и нищебродство.

P.S. На недавнем сайте делал почти 1000 изображений товаров на белом фоне и был бы рад, если бы кто-то потом использовал эти изображения. Сейчас в процессе сайт с 5000 картинками и даже в мыслях не было потом ставить вотермарк.

Павлик Мышкин

10 января 2018, 16:13

Если тётя скачает картинку товара на планшет и вечером дома покажет дяде, а он одобрит, то она пойдет покупать это. Если на картинке ватермарк с названием сайта / бренда / магазина — то скорее всего там и будет покупать.

Валерий Савинов

22 декабря 2015, 19:09

В общем заговнокодил следующим образом:
в чанке 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 всегда вела на полноценную картинку без ватермарка.

решение мне не нравится, но оно работает.

Андрей

26 декабря 2015, 16:06

Спасибо за Ваше решение.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Водяной знак на изображении товара miniShop2

Комментарии: 26

Здесь упомянуты