Кешіруем превью в Gallery
- Створення файлів кеша в момент завантаження зображень
- Видалення файлів кеша при видаленні вихідного зображення
- Відображення кеш зображень превью
Одне з найпопулярніших розширень MODX Revolution для роботи з фото галереями це Gallery . На одному з сайтів ми його використовували для управління альбомами з великою кількістю фотографій в них - одночасно на сторінці було необхідно відобразити близько 100 зображень. І тут почала просідати продуктивність Gallery на етапі генерації прев'ю.
Для перегляду зменшеної копії зображення розробники Gallery пропонують нам скористатися спеціальним коннектором, при цьому для кожної картинки використовується приблизно такий URL:
assets / components / gallery / connector.php? action = web / phpthumb & h = 100 & w = 100 & zc = 1 & far = C & src =% 2Fassets% 2Fgallery% 2F3% 2F14.jpgДо речі, саме цей механізм використовується і для відображення превью в адмінці. Як бачимо, зображення генеруються динамічно, що створює велике навантаження на сервер. Так, звичайно вони кешуються, але при очищенні кеша файли видаляються і необхідно знову перегенеріровать зображення. Крім того ми отримуємо не найкрасивіший і зрозумілий шлях до Картік.
Як приклад скажімо, що відображення сторінки, на якій 100 зображень, займає більше 10 секунд при першому запиті і близько 1 секунди при повторних запитах вже кешироваться сторінки.
Створення файлів кеша в момент завантаження зображень
Отже, для прискорення рендеринга сторінки і зменшення навантаження на сервер, спробуємо створювати кеш зображень в момент завантаження файлів на сервер, а не в момент відображення.
Як виявилося зробити це не дуже складно, але потрібно редагування файлів компонента Gallery.
Нам буде потрібно внести зміни в файл
/core/components/gallery/model/galitem.class.phpДодамо в початок класу galItem приватний член:
private $ config = array ( '.thumb' => array ( 'w' => 100, 'h' => 100, 'zc' => 0, 'bg' => '#fff', 'q' => 70, 'far' => 'C'), '.200' => array ( 'w' => 200, 'h' => 200, 'zc' => 1, 'q' => 90), / / ви можете додати сюди хоч греблю гати рядків з настройками);Цей двовимірний масив містить настройки генерації превью для phpThumb. Аналогічний прийом використовується в плагін ResizeImageOnUpload .
Перший ключ .thumb служить для генерації превью для адмінки, другий (і наступні) - призначені для користувача, ви можете вказати тут будь-які налаштування.
Далі в цьому ж класі galItem шукаємо метод save і додаємо в кінець (перед return $ saved;) наступний код:
// ім'я завантаженого файлу $ fn = $ this-> get ( 'filename'); if (! empty ($ fn)) {// підключаємо phpthumb require_once MODX_CORE_PATH.'model / phpthumb / phpthumb.class.php '; // для спрощення завдання шлях до завантажуваних файлів прописаний жорстко, що не зовсім вірно $ fileName = MODX_BASE_PATH.'assets / gallery /'.$ fn; // біжимо по ключам налаштувань foreach ($ this-> config as $ cfgKey => $ cfg) {$ thumbName = MODX_BASE_PATH.'assets / gallery /'.$ cfgKey. '/'. $ Fn; $ ThumbDir = dirname ($ thumbName); if (! is_dir ($ thumbDir)) {mkdir ($ thumbDir, 0777, true); } // перевіряємо, що файлу превью ще немає if (! File_exists ($ thumbName)) {$ phpThumb = new phpThumb (); $ PhpThumb-> setSourceFilename ($ fileName); // задаємо настройки ресайз зображення foreach ($ cfg as $ k => $ v) {$ phpThumb-> setParameter ($ k, $ v); } // генеруємо превью і зберігаємо if ($ phpThumb-> GenerateThumbnail ()) {if ($ phpThumb-> RenderToFile ($ thumbName)) {// через специфічні налаштувань сервера необхідно встановити права на новий файл chmod ($ thumbName, 0666); }}}}}Якщо тепер завантажити будь-яке зображення в Gallery, то ми побачимо таку картинку:
Файли превью створюються в каталозі .thumb, при цьому файлова структура дублюється.
Видалення файлів кеша при видаленні вихідного зображення
Відмінно, файли завантажили, але як хороші програмісти ми повинні турбуватися питанням видалення файлів кеша при видаленні основного файлу.
Для цього внесемо зміни в метод remove в цьому ж файлі galitem.class.php. Після видалення основного файлу додаємо код для видалення файлів превью, в результаті функція повинна виглядати приблизно так:
public function remove (array $ ancestors = array ()) {$ filename = $ this-> get ( 'filename'); if (! empty ($ filename)) {$ filename = $ this-> xpdo-> call ( 'galAlbum', 'getFilesPath', array (& $ this-> xpdo)). $ filename; if (! @unlink ($ filename)) {$ this-> xpdo-> log (xPDO :: LOG_LEVEL_ERROR, '[Gallery] An error occurred while trying to remove the attachment file at:'. $ filename); } // видалення превью foreach ($ this-> config as $ cfgKey => $ cfgVal) {$ thumbFileName = str_replace ( '/ gallery /', 'gallery /'.$ cfgKey, $ filename); if (! @unlink ($ thumbFileName)) {$ this-> xpdo-> log (xPDO :: LOG_LEVEL_ERROR, '[Gallery] An error occurred while trying to remove the attachment file at:'. $ thumbFileName); }}} Return parent :: remove ($ ancestors); }Відображення кеш зображень превью
Залишилося показати наші кешовані зображення замість стандартного connector. В адмінці все просто, шукаємо функцію "get" все в цьому ж файлі, і після "case 'thumbnail':" додаємо:
return $ this-> getSiteUrl (). '/ assets / gallery / .thumb /'.$ this-> get (' filename ');Перевірюємо і переконуємося, що админка заробила відчутно спритніше.
Тепер справа за сайтом. Перш за все потрібно невеликий modifier, тобто звичайний сниппет galleryThumb:
if (empty ($ options)) {return $ input; } Return str_replace ( '/ gallery /', '/gallery/'.$options.'/', $ input);Приклад його виклику в чанка thumbTpl (див. http://rtfm.modx.com/display/ADDON/Gallery.Gallery.thumbTpl ):
<Img src = "[[+ image_absolute: galleryThumb =` .200`]] "/>Як параметр передаємо один з ключів масиву, про який йшлося на самому початку статті.
Ось і все, на виході згенерує шлях до картинки такого виду: assets / gallery / .200 / 5 / 123.jpg
Тепер відображення фотоальбому з великою кількістю зображень відбувається відчутно швидше як при першому завантаженні сторінки, так і при наступних.
Php?