Оптимизация обработки изображения для материалов в К2

22.02.2012 17:22 Автор 
Оцените материал
(1 Голосовать)

Известно, что K2 — это удобный конструктор материалов для Joomla. На основе него можно делать довольно интересные вещи: начиная от новостных порталов и портфолио и заканчивая различными каталогами и магазинами. Конечно, на полноценный магазин он не потянет, но простой каталог товаров с ценами и корзиной вполне возможно. И вот однажды мне понадобилось сделать небольшое портфолио, немного поразмыслив, решил делать его на K2.

Все проекты в портфолио делал при помощи обычных материалов, добавляя необходимые поля для этого и оформляя соответствующим образом. И чтобы проиллюстрировать работы использовал вкладки: Изображение и Галерея изображений (в русской локализации). При сохранении материала данные изображения помещаются в соответсвующие папки, причём для дальнейшего использования оригинальное изображение помещается в папку /media/k2/items/src и из него генерируются еще дополнительные превьюхи в количестве 6 штук и размещаются в папке /media/k2/items/cache:

  • Очень большое изображение (XL);
  • Большое изображение (L);
  • Среднее изображение (M);
  • Маленькое изображение (S);
  • Очень маленькое изображение (XS) и
  • Изображение случайных материалов (Generic).

В качестве имени используется md5-хэш:

md5("Image".$item->id)

где $item->id — id материала.

Для превьюшек добавляется еще соответсвующий суффикс:

md5("Image".$item->id).'_XL.jpg'

В принципе удобная система хранения изображений, но некоторые моменты мне не понравились.

Во-первых, превью разных размеров создаются только один раз во время сохранения материала. Поэтому, если вы поменяете параметры для изображений в категории, то они не применятся для старых превьюшек, и придется по новой редактировать материал и сохранять его, предварительно выбрав изображение материала. И потом, если по какой-то причине превью будет удалено, то вы его просто не увидите. В системах, где идёт активная работа с изображениями, все-таки лучше, чтобы эти изображения генерировались на лету, если таких не окажется или будут поменяны параметры картинок, такие как размер и качество. Это меня, конечно растроило, так как, после того как я сохранил пару десятков материалов, я решил поменять размеры изображений, но не тут то было! Изображения как были при своих размерах, так и остались с ними.

Во-вторых, неприятным моментом было то, что если я использовал для иллюстрации материала маеленькое изображение, то из него также генерировались изображения разных размеров. Представьте себе баннер размеров 240x400, и у вас выставлена ширина для Большого изображени в данной категориия 1000px. На выходе у нас получится изображение размером 1000x1667. Как бы многовато и вообще зачем это нужно? А какой вес будет у этого изображения? А если вы еще выставите качество 100%? Представляете! Из одного баннера весом несколько килобайт, получается 6 изображений с общим весом несколько сот килобайт, если не мегабайт. Поэтому я и решил исправить данную ситуацию.

Для этого при генерации изображения, нужно сверить размеры исходной картинки и ширины, выставленной в параметрах категории. Если ширина исходной картинки больше ширины в параметрах категории — ресайзим ее до нужных размеров, если нет — оставляем в покое. Все достаточно просто. Благо в K2 используется для этих задач достачно функциональный класс upload. Это будет выглядеть следующим образом:

if($handle->image_src_x > $imageWidth) {
  $handle->image_resize = true;
}

Где $handle->image_src_x — ширина исходного изображения, $imageWidth — ширина изображения, выставленного в параметрах.

И ещё — все изображения хранятся в формате jpg, поэтому происходит принудительное конвертирование любого формата (png, gif, jpg) в jpg. Ну а зачем нам конвертировать jpg в jpg? Давйате просто ее скопируем и всё, добавив следюущую проверку:

if($handle->file_src_name_ext != 'jpg') {
  $handle->image_convert = 'jpg';
}

На этом, я думаю, можно закончить. Я получил всё, что хотел, кроме обновления превью изображений, но об этом в следующий раз. Нам осталось немного изменить шаблон вывода материалов в категории находящийся по адресу /components/com_k2/templates/default/category_item.php, либо чтобы не менять шаблон по умолчанию, мы созданим свой шаблон, просто скопировав папку default и переименовав её, допустим, в папку mytemplate. В этот шаблон и будем вносить изменения, а именно поменяем вывод изображения:

<img 
  src="<?php echo $this->item->image; ?>" 
  alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" 
  style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" 
/>

на

<img 
  src="<?php echo $this->item->image; ?>" 
  alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" 
  style="height:auto;" 
/>

Теперь в настройках категории, в ниспадающем списке можно выбрать наш шаблон материалов категории mytemplate. И, когда установленный размер превью больше исходного изображения, будет выводиться оригинальная картинка, вернее ее копия в оригинальном размере.

В прицепе находится измененный файл модели: /components/com_k2/models/item.php и файл шаблона category_item.php.

Авторизуйтесь, чтобы получить возможность оставлять комментарии