Наложение логотипа на изображение. Watermark на лету. Встраиваем php-код в движки (CMS). Пример oscommerce v.2.3

Default Image Лаборатория Кода
Автор На чтение 8 мин Просмотров 84 Опубликовано

Наложение логотипа на изображение служит не только для защиты картинки от копирования и использования на других сайтах. Такое наложение также решает более интересные задачи:

  1. Повышение уникальности для поисковых систем. Картинка с логотипом становится уникальной (при условии, что логотип не слишком маленький), что отвечает задачам поисковой оптимизации (SEO).
  2. Усиление веб-брендинга. Пожалуй, самая главная роль наложения логотипа — это повышение узнаваемости интернет-бренда при поиске картинок в поисковых системах. По сути, это отличная реклама сайта. Некоторые веб-дизайнеры, помимо названия сайта, даже добавляют к логотипу контактные телефоны компании.
  3. Оптимизация имени файла. Сам процесс наложения создает новую картинку, а следовательно, её имя файла может быть автоматически оптимизировано под ключевые запросы.

Данная статья подготовлена для веб-дизайнеров, веб-разработчиков и SEO-оптимизаторов. Материал содержит PHP-код для реализации наложения логотипа на изображение в системах управления контентом (CMS), на примере внедрения в OsCommerce (v.2.3).

Добавить PHP-класс для наложения логотипа на изображения можно практически в любую CMS. Вопрос лишь в том, где найти файл, который отвечает за вывод изображений на сайте.

Содержание
  1. Часть 1. Создаём PHP-класс для наложения логотипа
  2. 1.1 Подготовка логотипа
  3. 1.2 Создание PHP-скрипта (класса)
  4. 1.3 Итог подготовки
  5. Часть 2. Интеграция класса в CMS
  6. 2.1 Вспомогательная функция
  7. 2.2 Подключение класса
  8. Часть 3. Внедрение в движок OsCommerce 2.3
  9. 3.1 Поиск нужного файла
  10. 3.2 Добавление кода в html_output.php
  11. 3.3 Создание основной функции для вывода изображений с логотипом
  12. 3.4 Замена вызова изображений в шаблонах

Часть 1. Создаём PHP-класс для наложения логотипа

1.1 Подготовка логотипа

Создадим логотип, который будем накладывать на изображение. Это должен быть файл в формате JPEG, GIF или PNG. Чаще всего для логотипа используют PNG или GIF. Назовём его logo.png и поместим в папку, куда позже разместим PHP-скрипт. Создадим в корневом каталоге движка (CMS) папку и назовём её watermark.

1.2 Создание PHP-скрипта (класса)

Теперь нужно создать сам PHP-код класса для наложения логотипа. Назовём файл plugin-watermark.php и поместим его в новую папку watermark.

<?php
class Watermark
{
    function onAfterFileUpload(&$sFilePath)
    {
        global $config;
        $watermarkSettings = &$config['Plugin_Watermark'];
        $this->createWatermark($sFilePath, $watermarkSettings['source'], $watermarkSettings['marginRight'],
            $watermarkSettings['marginBottom'], $watermarkSettings['quality'], $watermarkSettings['transparency']);

        return true;
    }

    function createWatermark($sourceFile, $watermarkFile, $marginLeft = 5, $marginBottom = 5, $quality = 90, $transparency = 100)
    {
        if (!file_exists($watermarkFile)) {
            $watermarkFile = dirname(__FILE__) . "/" . $watermarkFile;
        }
        if (!file_exists($watermarkFile)) {
            return false;
        }

        $watermarkImageAttr = @getimagesize($watermarkFile);
        $sourceImageAttr = @getimagesize($sourceFile);
        if ($sourceImageAttr === false || $watermarkImageAttr === false) {
            return false;
        }

        // Обработка изображения-логотипа
        switch ($watermarkImageAttr['mime']) {
            case 'image/gif':
                if (@imagetypes() & IMG_GIF) {
                    $oWatermarkImage = @imagecreatefromgif($watermarkFile);
                } else {
                    $ermsg = 'GIF images are not supported';
                }
                break;
            case 'image/jpeg':
                if (@imagetypes() & IMG_JPG) {
                    $oWatermarkImage = @imagecreatefromjpeg($watermarkFile);
                } else {
                    $ermsg = 'JPEG images are not supported';
                }
                break;
            case 'image/png':
                if (@imagetypes() & IMG_PNG) {
                    $oWatermarkImage = @imagecreatefrompng($watermarkFile);
                } else {
                    $ermsg = 'PNG images are not supported';
                }
                break;
            case 'image/wbmp':
                if (@imagetypes() & IMG_WBMP) {
                    $oWatermarkImage = @imagecreatefromwbmp($watermarkFile);
                } else {
                    $ermsg = 'WBMP images are not supported';
                }
                break;
            default:
                $ermsg = $watermarkImageAttr['mime'] . ' images are not supported';
                break;
        }

        // Обработка исходного изображения
        switch ($sourceImageAttr['mime']) {
            case 'image/gif':
                if (@imagetypes() & IMG_GIF) {
                    $oImage = @imagecreatefromgif($sourceFile);
                } else {
                    $ermsg = 'GIF images are not supported';
                }
                break;
            case 'image/jpeg':
                if (@imagetypes() & IMG_JPG) {
                    $oImage = @imagecreatefromjpeg($sourceFile);
                } else {
                    $ermsg = 'JPEG images are not supported';
                }
                break;
            case 'image/png':
                if (@imagetypes() & IMG_PNG) {
                    $oImage = @imagecreatefrompng($sourceFile);
                } else {
                    $ermsg = 'PNG images are not supported';
                }
                break;
            case 'image/wbmp':
                if (@imagetypes() & IMG_WBMP) {
                    $oImage = @imagecreatefromwbmp($sourceFile);
                } else {
                    $ermsg = 'WBMP images are not supported';
                }
                break;
            default:
                $ermsg = $sourceImageAttr['mime'] . ' images are not supported';
                break;
        }

        if (isset($ermsg) || false === $oImage || false === $oWatermarkImage) {
            return false;
        }

        $watermark_width = $watermarkImageAttr[0];
        $watermark_height = $watermarkImageAttr[1];
        $dest_x = $sourceImageAttr[0] - $watermark_width - $marginLeft;
        $dest_y = $sourceImageAttr[1] - $watermark_height - $marginBottom;

        if ($sourceImageAttr['mime'] == 'image/png') {
            if (function_exists('imagesavealpha') && function_exists('imagecolorallocatealpha')) {
                $bg = imagecolorallocatealpha($oImage, 255, 255, 255, 127);
                imagefill($oImage, 0, 0, $bg);
                imagealphablending($oImage, false);
                imagesavealpha($oImage, true);
            }
        }
        if ($watermarkImageAttr['mime'] == 'image/png') {
            imagecopy($oImage, $oWatermarkImage, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height);
        } else {
            imagecopymerge($oImage, $oWatermarkImage, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $transparency);
        }

        switch ($sourceImageAttr['mime']) {
            case 'image/gif':
                imagegif($oImage, $sourceFile);
                break;
            case 'image/jpeg':
                imagejpeg($oImage, $sourceFile, $quality);
                break;
            case 'image/png':
                imagepng($oImage, $sourceFile);
                break;
            case 'image/wbmp':
                imagewbmp($oImage, $sourceFile);
                break;
        }

        imagedestroy($oImage);
        imagedestroy($oWatermarkImage);
    }
}

$watermark = new Watermark();
$config['Hooks']['AfterFileUpload'][] = array($watermark, 'onAfterFileUpload');
if (empty($config['Plugin_Watermark'])) {
    $config['Plugin_Watermark'] = array(
        "source" => "logo.png",
        "marginRight" => 5,
        "marginBottom" => 5,
        "quality" => 90,
        "transparency" => 80,
    );
}
?>

1.3 Итог подготовки

В итоге в папке watermark должно оказаться два файла:

Имя файлаНазначение
logo.pngИзображение логотипа
plugin-watermark.phpPHP-класс, отвечающий за наложение водяного знака

Часть 2. Интеграция класса в CMS

2.1 Вспомогательная функция

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

function image_watermark($src)
{
    if (!file_exists($src)) return false;

    $watermark = new Watermark();
    $watermark->createWatermark($src, "logo.png", 5, 5, 80, 60);

    return true;
}

2.2 Подключение класса

Прежде чем прописать эту функцию, необходимо подключить сам PHP-класс наложения логотипа в стандартных файлах движка (CMS). Подключение осуществляется одной строчкой с помощью функции include():

include("../watermark/plugin-watermark.php");

Часть 3. Внедрение в движок OsCommerce 2.3

3.1 Поиск нужного файла

Теперь нужно найти в CMS файл, отвечающий за вывод изображений. В движке интернет-магазина OsCommerce основные функциональные файлы сгруппированы в папке includes/functions/. Файл, отвечающий за вывод изображений и содержащий функцию tep_image() (которая используется для вставки изображений), находится по адресу: includes/functions/html_output.php.

Именно в этот файл мы будем добавлять код для обработки водяных знаков.

3.2 Добавление кода в html_output.php

Пропишем вызов нашего класса и вспомогательную функцию image_watermark() в файл html_output.php:

include(DIR_FS_CATALOG . "watermark/plugin-watermark.php");

function image_watermark($src)
{
    if (!file_exists($src)) return false;
    $watermark = new Watermark();
    $watermark->createWatermark($src, "logo.png", 5, 5, 80, 60);
    return true;
}

3.3 Создание основной функции для вывода изображений с логотипом

Чтобы не нарушать работу существующей функции tep_image(), создадим новую функцию для вывода изображений с наложенным логотипом. Назовём её tep_image_watermark().

function tep_image_watermark($src) {
    if ((empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false')) {
        return false;
    }

    $size_im = @getimagesize($src);

    // Накладываем логотип только на изображения шириной более 400 пикселей
    if ($size_im[0] > 400) {
        // Оптимизируем название файла для SEO, добавляя ключевые слова "_kupit_ochki"
        $src_file = eregi_replace('\.([a-z]{3,4})$', "_kupit_ochki.\\1", $src);

        // Если файл с новым именем ещё не создан, накладываем логотип
        if (!file_exists($src_file)) {
            image_watermark($src_file); // Накладываем логотип
            chmod($src_file, 0755);     // Устанавливаем права на файл
        }
        $src = $src_file; // Используем модифицированный файл
    }

    return $src; // Возвращаем путь к файлу (исходному или модифицированному)
}

Логика функции:

  1. Проверяется, существует ли уже модифицированный файл изображения (с логотипом).
  2. Модификация (наложение логотипа и переименование) происходит только при выполнении условия (например, ширина изображения > 400px).
  3. В имя файла добавляется ключевая фраза (например, «_kupit_ochki») для целей SEO.
  4. Функция возвращает путь к актуальному файлу (новому, если он был создан, или исходному).

3.4 Замена вызова изображений в шаблонах

Теперь необходимо заменить стандартные вызовы tep_image() на tep_image_watermark() в файлах, отвечающих за вывод товаров.

Эти файлы:

  1. includes/modules/product_listing.php (вывод списка товаров в категориях, при поиске и т.д.)
  2. product_info.php (страница товара)

Найдите в этих файлах фрагменты кода, отвечающие за вывод изображений (ищите строки с tep_image, DIR_WS_IMAGES или products_image), и замените их.

Пример замены для вывода в списках товаров:

// Было (примерно):
echo '<a href="' . tep_href_link('product_info.php', 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name']) . '</a>';

// Стало:
echo '<a href="' . tep_href_link('product_info.php', 'products_id=' . $listing['products_id']) . '">' . tep_image(tep_image_watermark(DIR_WS_IMAGES . $listing['products_image']), $listing['products_name']) . '</a>';

Пример замены для вывода на странице товара:

// Было (примерно):
echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name']);

// Стало:
echo tep_image(tep_image_watermark(DIR_WS_IMAGES . $product_info['products_image']), $product_info['products_name']);

После выполнения всех шагов на сайте будет реализовано автоматическое наложение логотипа на изображения товаров (шириной более 400px). Итоговое изображение будет иметь логотип в нижнем правом углу и SEO-оптимизированное имя файла, что способствует как защите контента, так и продвижению сайта.

oscommerce seo watermark веб-брендинг модульное программирование наложение логотипа на изображение оптимизация для поисковиков поисковая оптимизация
Оцените статью
codda
© 2026 codda