Наложение логотипа на изображение служит не только для защиты картинки от копирования и использования на других сайтах. Такое наложение логотипа также отвечает более интересным целям:
- Картинка с логотипом становится уникальной для поисковиков (если логотип не слишком маленький), что отвечает задачам поисковой оптимизации.
- Пожалуй, самая главная роль наложения логотипа на изображение, — узнаваемость интернет-бренда при поиске картинок в поисковиках. По сути, это отличная реклама сайта, веб-брендинг. Некоторые веб-дизайнеры, помимо названия сайта, даже прописывают к логотипу контактные телефоны фирмы.
- Сам процесс наложения производит новую картинку, а, следовательно, её название (название файла) может быть автоматически оптимизировано для поисковиков.
Данная статья подготовлена для веб-дизайнеров / веб-разработчиков и seo-оптимизаторов. Материал содержит коды программирования PHP для реализации наложения логотипа на изображение в движках (CMS), на примере внедрения в OsCommerce (v.2.3).
Добавить класс 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» оказалось два файла:
- logo.png
- 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 для наложения логотипа на изображения мы можем практически в любую 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-го файла, отвечающего за вывод товара на странице товара. Этими файлами будут соответственно:
- includes/modules/product_listing.php (файл для вывода списка товаров, используется в категориях, при поиске на сайте, на страницах производителей/брендов )
- 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.'" />'
Изображение, которое мы получим на выходе, будет иметь следующий вид:
Огромное спасибо автору! Сэкономил просто тонну времени, благодаря этому классу =)
И вам спасибо за комментарий.)