в MODx CMS, Разработка

Gallery MODx watermark

Для создания фото галерей на MODx Revolution, практически всегда используют замечательный сниппет Gallery. Документация для него написана прекрасно, все понятно, но есть маленькое НО. Наверняка все сталкивались с задачей и требованиями от клиентов — защитить от копирования фотографии галереи. В этом посте я расскажу, как это можно сделать.

1. Настройка водяного знака в Gallery на изображениях большого размера

Итак, как выяснилось, в сниппете нет стандартрой возможности установки водяного знака. Зато есть параметр &thumbProperties, которому можно передавать фильтры в формате JSON и которые обработает phpthumb. Сколько я ни пытался воспользоваться этими свойствами — ничего не получается. Форумы тоже не помогли. Поэтому, если у кого-то получалась реализация вотермарки этим способом, то сообщите :).

Спусть некоторое время танцев с бубном, я пришел вот к чему:

[[+image_absolute:phpthumbof=`fltr=wmi|/img/watermark.png|C|100|0|0`]]

В моем случае шаблон вывода элемента галереи выглядит вот так:

<li>

<a href=»[[+image_absolute:phpthumbof=`fltr=wmi|/img/watermark.png|C|100|0|0`]]» rel=»fancy»>
<span></span>
<img src=»[[+thumbnail]]» alt=»[[+name]]» />
</a>
</li>

Плейсхолдер [[+image_absolute]] — это большое изображение, которое открывается в лайтбоксе. К нему я добавил, по правилам PHx, обработчик изображений phpthumbof (не забудьте его установить через «Управление пакетами», в стандартной «комплектации» MODx его нет) и фильтр, который отвечает за установку водяного знака.

Рассмотрим все параметры фильтра (каждый параметр разделяется вертикальным слешем «|» ):

wmi|/img/watermark.png|C|100|0|0

wmi — water mark image, говорим системе, что устанавливаем изображение водяного знака (wmt — water mark text — можно использовать текст вместо картинки)

/img/watermark.png — путь к файлу изображения вотермарка

C — выравнивание вотермарка относительно всего изображения. В данном случае установлено выравнивание по центру.

Может быть BR, BL, TR, TL, C,  R, L, T, B, *, где B — низ, R — право, L — лево, T — верх, * — текстурой (изображение вотермарка будет дублироваться)

100 — степень прозрачности отображения вотермарки, от 0 до 100

Последние два параметра — это отступ от края изображения по Х и Y

Возможно способ немного изощренный, но рабочий. После того, как плотно поработали, можно расслабиться и не спеша поиграть в покер. Недавно обнаружил замечательный ресурс с приятным дизайном partypoker.com.

 

2. Отключение правой кнопки мыши

В какой-то степени предотвратит сохранение изображений. Для этого нужнпо прописать в <head> скрипт:

 <script type=»text/javascript»>

var message=»»;
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function(«return false»)

</script>

После, в <body> нужно прописать вызов функции:

<body onload=»setClipBoardData();»>

Вот и все.

Конечно же, при желании можно сохранить изображения, но уже сложнее и утомительнее.

Написать комментарий

Комментарии

  1. Vega, я попробовал вариант отключение правой кнопки мыши, но он не работает. В вызове прописана функция setClipBoardData(), но в теле скрипта я эту функцию не вижу. Может подскажешь где что не так.

  2. Добрый день, делал по вашему примеру, но ничего не вышло, вот мой код вставки:


    Можете подсказать в чем ошибка?