+

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

20.07.2019 22:30
21.07.2019 07:17
143

/* Превью

Не знаю как так, почему добавление картинок при редактировании контента такой ад. Реж, конвертируй, копипасть ссылки. %USER_NAME%, это что всё руками делать? Нет, я слишком ленивый программист, слишком...

*/

Интро

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

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

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

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

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

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

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

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

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

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

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

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

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

Инструменты

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

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

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

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

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

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

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

Код плагина

АПД:

22.07.2019 04:25:29

В скрипте есть недочёты, если страница с пагинацией, то генерятся картинки только для первых страниц, создаётся папка с id страницы и усё.
MiniShop2 на странице товара переделывает код под свою галерею, из за чего всё сбивается и одни и теже картинки обрабатываются и этим скриптом и скриптом минишопа, + на страницах списка товаров минишопа не добавляются ссылки на оригинал.

Кто писал этот говнокод? Ах да..