Лаборатория Кода, Маркетинг-Код

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

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

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

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

наложение логотипа на изображение посредством php-скриптов

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

Наложение логотипа на изображение. Создаём класс plugin-watermark.php

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

Теперь нам нужно прописать сам код php-класса (php-скрипт) для наложения логотипа на изображение. Наовём его «plugin-watermark.php» и поместим в новосозданную папку «watermark» в корневом каталоге используемого движка (CMS).

<?php

class Watermark
{
    function onAfterFileUpload($currentFolder, $uploadedFile, $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); // (PHP 4 >= 4.3.2, PHP 5)
                 imagefill($oImage, 0, 0 , $bg);
                 imagealphablending($oImage, false);
                 imagesavealpha($oImage, true);  // (PHP 4 >= 4.3.2, PHP 5)
            }
        }
        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,
    );
}

?>

Итого, в нашей папке «watermark» оказалось два файла:

  1. logo.png
  2. plugin-watermark.php

Php-функция, которая будет вызывать данный класс, будет задействоваться непосредственно в php-скрипте, который отвечает за вывод изображений на сайте, и представлять примерно следующий фрагмент 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;

}

Но прежде, чем её прописать, не забываем, что нам нужно иметь к обращению сам php-класс наложения логотипа на изображение. Т.е., мы должны его подключить в стандартных файлах движка (CMS). Собственно, само подключение осуществляется единственной строчкой, через php-функцию «include()»:

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

Наложение логотипа на изображение. Watermark на лету в движке oscommerce 2.3

наложение логотипа на изображения php-скриптом

Теперь начинается самое интересное. Добавить класс php для наложения логотипа на изображения мы можем практически в любую CMS. Вопрос в том, где искать файл, который отвечает за вывод изображений на сайте. Для движка интернет-магазина oscommerce характерно, что основные функциональные файлы сгруппированы в отдельной папке по адресу (в корневом каталоге): includes/functions/. Сам файл, отвечающий за вывод изображений в интернет-магазине и вмещающий функцию tep_image() (которая используется практически во всех случаях вставки изображений) находится по адресу: includes/functions/html_output.php. Логично, что нашу php-функцию обработки изображений для наложения логотипа мы будем прописывать именно сюда. Сюда же пропишем вызов класса «plugun-watermark.php» и функцию image_watermark():

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

Чтобы не создавать путаницу в функциях, определим новую php-функцию для вывода изображений с наложенным на них логотипом. Назовём её tep_image_watermark(), с входным значением $src (имя файла изображения, на который будет накладываться логотип).

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

    $size_im = @getimagesize( $src );

    if($size_im[0] > 400){ //проставляем логотип только к файлу, который больше 400 пикселей по длине

   $src_file = eregi_replace( '\.([a-z]{3,4})$', "_kupit_ochki.\\1", $src ); //оптимизируем название файла для поисковых систем, приписывая к нему ключевые слова "_kupit_ochki"

    if (!file_exists($src_file)) { //проверяем, существует ли файл изображения (создавался ли он ранее) с новым названием. Если не существует, то производим наложение логотипа на изображение и создаём этот файл
    image_watermark($src_file); //собственно, накладываем сам логотип на файл с новым названием
    chmod($src_file,0755); //устанавливаем права на итоговый файл изображения
     }
$src = $src_file; //если всё удалось, приравниваем значение $src к значению $src_file. Если файл не прошёл условие по габаритам (400 px в длину), то будет затребоваться предыдущий (исходный) файл $src. Если $src_file с модернизированным именем уже существует (т.е. он уже был создан при другом запросе), то просто вставляем этот файл как $src
    }

    return $src; //возвращаем файл $src
  }

Как мы видим, в данной php-функции производится не только проверка на наличие модернизированного файла изображения (т.е. наличия изображения с наложенным логотипом), но и создаются условия, при которых осуществляется данная модернизация. Таким условием мы взяли габариты (изображение, на которое должен накладываться логотип, должно быть не менее 400 пикселелей в длину). Кроме того, изменяется само название файла на сайте для поисковой оптимизации этого файла. К нему добавляется надпись, соответствующая ключевым словам. Для сайта staroptic.ru, на примере которого рассматривается использование функции, это — «_kupit_ochki».

Теперь нам остаётся лишь использовать эту php-функцию заместо предыдущей tep_image(). Для этого нам нужно найти php-файлы, отвечающие за вывод товаров в категориях, а также, 2-го файла, отвечающего за вывод товара на странице товара. Этими файлами будут соответственно:

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

Через поисковые клавиши (обычно это CTRL+F) в вашем файловом менеджере ищем в этих файлах совпадение на запрос «tep_image». Второй вариант поиска фрагмента кода, где осуществляется вставка картинок в oscommerce — запросы «DIR_WS_IMAGES» и «products_image».

Заменяем «tep_image (… , … ,)» на следующий код.

Для вывода в списках товаров:

'<img src="' . tep_image_watermark(DIR_WS_IMAGES . $listing['products_image']) . '" alt="' . $listing['products_name'] . '" />'

Для вывода на странице товара:

'<img src="' . tep_image_watermark(DIR_WS_IMAGES . $product_info['products_image']) . '" alt="'.$products_name.'" />'

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

Наложение логотипа на изображение. Интернет-магазин Staroptic.ru

Этот материал опубликован в Лаборатория Кода, Маркетинг-Код и тегирован , , , , , , , . Bookmark the permalink.

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

  1. Денис говорит:

    Огромное спасибо автору! Сэкономил просто тонну времени, благодаря этому классу =)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>