MODX Revo > Обработка картинок в контенте [ webp | resize | lazyLoad ]

Интро

В общем такое дело, %USER_NAME%, думаю каждый разработчик имеющий дело с контентом хоть раз да задумывался как облегчить добавление картинок, резать каждый раз миниатюры, сжимать, добавлять код ссылки на оригинальное изображение, сейчас еще и конвертация в webp нужна.

За время разработки сайтов я натыкался на разные решения этой проблемы, но полноценного и красивого так и не находил. По этому и собрал своё (:

Простыня получилась та еще, но я старался впихнуть в неё по максимуму, на все случаи жизни, при необходимости под каждый проект можно будет выпиливать лишнее.

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

ЗЫ: Очень буду рад узнать, как ты, %USER_NAME% справляешься с этой задачей, тема действительно очень обширная и вариантов решения очень много.

Логика работы

В общем перед показом контента, перебираем картинки в нём, селектор блока для перебора картинок указывается в настройках, обрезаем картинки если они больше указанного размера, конвертируем в webp если еще не конвертированны.

Все обрезанные и конвертированные картинки заливаются в указанную в настройках папку, и в её подпапку именованную в честь id ресурса

Таким образом если у ресурса уже есть папка с обработанными картинками, заменяется только код вывода img

Чтобы обновить картинки, нужно удалить всю папку с сгенерированными картинками или папку отдельного ресурса.

Определять поддерживает ли браузер wepb можно несколькими способами, на стороне сервера, указав это в переменной в настройке плагина или на стороне пользователя используя js библиотеку modernizr и код из main.js

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

Так-же поддреживается отложенная загрузка изображений, вывод картинок в теге picture (тогда не надо определять поддерживает браузер webp или нет, картинки выводятся сразу в 2 форматах )

Инструменты

И так, будем использовать следующие библиотики:

• webp-convert - для конвертирования в webp
• phpQuery - для вытаскивания картинок и их параметров из контента
• phpthumb - библиотика для обрезки, по умолчанию есть в иксах мода.

Настройка инструментов

1) webp-convert, затягиваем файлы из src-build на сайт. По адресу lib/webp-convert в корень сайта

2) Качаем phpQuery-0.9.5.386-onefile.zip (первая ссылка в phpQuery) и подгружаем файл из архива на сайт. В папку lib в корне сайта

Настройка плагина

Для плагина нужно добавить обработку события OnWebPagePrerender

Все параметры указываются в начале файла plugin.imgPrevCreator.php

Код плагина

АПД: