Как в Битриксе добавить водяной знак на изображения

Константин Либерман

Основатель компании «LIBERTY»

245 просмотров

Защитите свои фотографии с помощью API Битрикс

Хотите обезопасить свои изображения от несанкционированного использования? Стандартный API Битрикс позволяет автоматически добавлять водяные знаки на новые фотографии. Давайте разберемся, как это работает и с какими трудностями вы можете столкнуться.

Зачем нужны водяные знаки?

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

Но как быть с остальными изображениями на вашем сайте? Читайте дальше, чтобы узнать, как расширить защиту на все загружаемые фотографии.

Ставим для дополнительных фото из свойства "MORE_PHOTO" watermark в Битрикс

Для вывода дополнительных изображений в элементах информационного блока (т.е. изображений кроме PREVIEW_PICTURE и DETAIL_PICTURE) необходимо создать дополнительное свойство типа ФАЙЛ с кодом MORE_PHOTO.

Теперь в шаблоне Вашего компонента (в нашем случае news.detail) необходимо добавить в файл result_modifier.php следующий код:


<? 
 $arResult["MORE_PHOTO"] = array(); 
	 if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) 
	 { 
	 foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) 
	 { 
	 $FILE = CFile::GetFileArray($FILE); 
	 if(is_array($FILE)) 
	 $arResult["MORE_PHOTO"][]=$FILE; 
	 } 
 } 
 ?>

Тем самым мы сможем обращаться к массиву фотографий также, как это происходит в шаблоне каталога: $arResult["MORE_PHOTO"].


<? 
if($arResult["MORE_PHOTO"]):?> 
	<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?> 
		<? $file = CFile::ResizeImageGet($PHOTO, array('width'=>250, 'height'=>'150'), BX_RESIZE_IMAGE_EXACT, true, $arWaterMarkSmall); ?> 
		<div class="more_photo"> 
			<a href="<?=$PHOTO["SRC"]?>" name="more_photo"> 
			<img border="0" src="<?=$file["src"]?>" width="<?=$file["width"]?>" height="<?=$file["height"]?>" 
			alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> 
		</a> 
		</div>
	<?endforeach;?> 
<?endif;?>
?>

Оптимизация изображений с CFile::ResizeImageGet

Давайте разберемся, что скрывается за этой мощной функцией Битрикс. Согласно официальной документации, CFile::ResizeImageGet - это инструмент, который не просто уменьшает размер картинки, но и делает это с умом.

Как это работает?

Уменьшение: функция создает уменьшенную версию вашего изображения.
Умное хранение: миниатюра сохраняется в специальной папке "/upload/resize_cache/путь".
Экономия ресурсов: после первого уменьшения создается физический файл.
Это ключевой момент! Ускорение работы сайта: при повторных обращениях система не тратит время на повторное уменьшение, а сразу возвращает путь к уже созданной миниатюре.

Теперь про сам водяной знак, я его размещаю в самом начале файла template.php.

<?
$arWaterMarkSmall = [
    'name' => 'watermark',
    'position' => 'br', // bottom right
    'type' => 'file',
    'size' => 'small',
    'alpha_level' => 50,
    'file' => $_SERVER['DOCUMENT_ROOT'].'/images/watermark_small.png',
];
?>

Параметры наложения водяного знака

$arFilters = array(
      array(
            "name"           => "watermark",
            "position"       => "bc",        // (доступные варианты tl|tc|tr|ml|mc|mr|bl|bc|br или topleft|topcenter|topright|centerleft|center|centerright|bottomleft|bottomcenter|bottomright)
            "type"           => "image",     // (доступные варианты "image|text")
            "size"           => "real",      // ( доступные варианты big|medium|small|real; real доступен только для type=image )
            "coefficient"    => "1",         // ( альтернатива параметру size. В случае текстового варианта - от 1 до 7, по крайней мере так в исходниках; для картинок 0.1 до 1 )
            "fill"           => "exact",          // ( доступные варианты exact|resize|repeat )
            "file"           => $_SERVER["DOCUMENT_ROOT"]."/watermark.png", // (абсолютный путь до картинки с водяным знаком)
            "text"           => "Водяной знак!", // ( текст водяного знака )
            "color"          => "ff0000",        // ( hex формат цвета текста )
            "font"           => $_SERVER["DOCUMENT_ROOT"]."/arial.ttf",      // ( путь до файла шрифта в формате .ttf )
            "use_copyright" => "Y"              // ( использовать ли знак копирайта перед текстом )
     )
   );

Задача выполнена. Теперь у всех файлов появился водяной знак внизу и справа!

Возврат к списку