Наложение логотипа на изображение служит не только для защиты картинки от копирования и использования на других сайтах. Такое наложение логотипа также отвечает более интересным целям:
- Картинка с логотипом становится уникальной для поисковиков (если логотип не слишком маленький), что отвечает задачам поисковой оптимизации.
- Пожалуй, самая главная роль наложения логотипа на изображение, — узнаваемость интернет-бренда при поиске картинок в поисковиках. По сути, это отличная реклама сайта, веб-брендинг. Некоторые веб-дизайнеры, помимо названия сайта, даже прописывают к логотипу контактные телефоны фирмы.
- Сам процесс наложения производит новую картинку, а, следовательно, её название (название файла) может быть автоматически оптимизировано для поисковиков.
Данная статья подготовлена для веб-дизайнеров / веб-разработчиков и 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.'" />'
Изображение, которое мы получим на выходе, будет иметь следующий вид:
Огромное спасибо автору! Сэкономил просто тонну времени, благодаря этому классу =)
И вам спасибо за комментарий.)