Недавно заказали верстку каталога недвижимости, ничего сложного, кроме одного момента — формирование превью изображений в категории, материале и модулях, т.к. в качестве каталога использовался FLEXIcontent, то описание сделаю именно для него, хотя для com_content схема действий будет аналогичная.

Для работы данного решения потребуется библиотека GD2, по этому рекомендую заранее узнать стоит она у хостера или нет.

Изначально у меня было три превью и по клику на первый итем нужно было выводить в модальном окне нормальное изображение, т.е. возможность обработки изображения, и приведения к требуемому виду, до загрузки на сайт невозможна, а т.к. фон неоднородный, то возможность наложить сверху другое изображение отсутствовала, следовательно средствами css нужный результат не получить (один способ есть, но решение сложное и не кроссбраузерное). В итоге после консультаций и раздумий (да-да, собрали целый консилиум из-за создания одной картинки ;) ) принято решение обрабатывать изображение с помощью GD2, а чтобы не грузить каждый раз сервер, то сохранять изображение в той же папке, что и превью сгенерированное плагином FLEXIcontent, но с добавлением суффикса к изображению, а при загрузке проверять, есть нужное превью или нет, если есть, то грузим превью, если нету, то создаем его и загружаем.

Перейдем непосредственно к решению (field26 — поле типа image, в котором хранится первое выводимое превью):

  <?php
  $field26 = explode('src="', $item->fields['field26']->display);
  $field26_img = explode('" alt', $field26[1]);
  $field26_img_src = substr_replace($field26_img[0],"-home.png",-4);

  if (file_exists($field26_img_src)) {
  echo $field26[0].'src="'.$field26_img_src.'" alt'.$field26_img[1];
  } else {

    $res = imagecreatetruecolor(240,165);
    $img = imagecreatefromjpeg($field26_img[0]);
    $mask = imagecreatefrompng("templates/linkor/images/mask_small.png");

    imagecopy ($img,$mask,0,0,0,0,220,165);
    $color = imagecolorallocate($img,0,0,0);
    imagecolortransparent($img,$color);
    header('Content-Type: image/png');
    imagepng($img, $field26_img_src);
    imagedestroy($img);
    echo $field26[0].'src="'.$field26_img_src.'" alt'.$field26_img[1];
  }
  ?>

Если описывать в двух словах, то происходит наложение одноцветной маски на изображение, с последующим удалением пикселей определенного цвета, да решение тоже не идеальное, т.к. помимо маски могут быть удалены пиксели и с самого изображения, но оно кроссбраузерное и работает всегда, что и требовалось сделать, кроме того можно повторно наложить изображение на инвертированную маску, тогда пиксели на изображении можно вернуть обратно (вот пока писал понял где совершил недочет, полезно иногда мануалы писать ;) ).

Приведу образцы: исходного изображения, маску и результат обработки:

Кстати, проверку делать настоятельно рекомендую, т.к. GD2 создает нагрузку при обработке, а если каталог достаточно большой, то и нагрузка будет не маленькой.

Документация:

• Обработка изображений и GD (русский)
• Image Processing and GD (английский)