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

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

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

4065 просмотров

Защитите свои фотографии с помощью 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,
            ['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",        // для текста: 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",
        "use_copyright" => "Y",        // использовать знак копирайта перед текстом
    )
);

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

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