Теги

Комментарии ()

    +
    T
    >

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

    20.07.2019 22:30
    21.07.2019 07:17
    575

    /* Превью

    Не знаю как так, почему добавление картинок при редактировании контента такой ад. Реж, конвертируй, копипасть ссылки. %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 на странице товара переделывает код под свою галерею, из за чего всё сбивается и одни и теже картинки обрабатываются и этим скриптом и скриптом минишопа, + на страницах списка товаров минишопа не добавляются ссылки на оригинал.

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

    09.03.2020 08:17:43

    Ещё баг, изменяется кодировка текста