Обработка изображений (1.3) — Документация

Чтобы посмотреть процесс настройки обработки изображений наглядно, мы рекомендуем следующие видео:

С обновлением 1.2 мы ввели технологию загрузки изображений lazy. Она делает так, что когда вы заходите на страницу сайта, все текстовые данные стоят на своих местах, и после загрузки изображений всё останется на своих местах. Это решает проблему, когда при загрузке сайт "скачет", то есть по мере загрузки контента уже загруженная информация смещается, это доставляет массу неудобств. Помимо этого, с недавних пор в тесте на скорость загрузки сайта Google PageSpeed появился параметр "Совокупное смещение макета", который отвечает за то, насколько "прыгает" сайт по мере загрузки. У шаблона значение этой оценки стремится к нулю, что является идеальным показателем. Поэтому это важно и для продвижения.

Как работает lazy? По сути сначала мгновенно загружается ложная картинка (она весит очень мало), которая "резервирует" место для настоящей картинки, а потом на ее место загружается настоящая картинка

Приступим к генерации изображений. Каждый раз, когда вы добавляете картинку, будь то новость, баннер или товар, изображение проходит процесс обработки. Например, в зависимости от методов обработки, изображение 2000x1000 может стать и 100х100, и 300х150

Далее рассмотрим этот процесс на примере баннеров. Перейдите в модуль "Баннеры" и справа сверху нажмите "настройки модуля", там будут правила генерации изображений.

Создание обработки изображения

Если вы хотите использовать свои разрешения изображений (ширина х высота), тогда вам нужно перейти в "Обработку изображений". Там будет список всех обработок изображений, для своего удобства мы называем их в формате "[Модуль] - ширина х высота", например "[Баннеры] - 600х200". Название не принципиально, но так в дальнейшем мы ничего не перепутаем. К каждой обработке в паре должна идти обработка Lazy, ее мы также называем "[lazy] - ширина х высота".

Для начала важно убедиться, что разрешение, который нужно создать (оно должно совпадать с ранее созданной обработкой, не существует в списке. Если его нет, то смело приступаем. Нажмите кнопку "Добавить вариант" и параллельно откройте уже созданный, продублируйте все данные и методы обработки из созданного в новый и измените значения ширины и высоты, затем нажмите "Сохранить".

Отлично, но теперь нам для этого варианта нужно сделать Lazy, опять же, убедитесь, нет ли его уже в списке. Если есть, то заново создавать ничего не надо, если нет -- приступаем. Аналогично нажмите добавьте вариант и откройте параллельно уже созданный вариант Lazy, продублируйте все данные и измените ширину и высоту. Сохраняем.

Добавление обработки в модули

Теперь, чтобы получить сами изображения, перейдите в нужный модуль, например Баннеры. В правом верхнем углу нажимаем "настройки модуля". Снизу нажимаем "добавить" и сначала выбираем размер изображение, например [Баннеры] - 600х200. Справа, в поле ввода, пишем название папки, в которой будут хранится изображения, например "600x200", сгенерированные по этому методу обработки. Запомните название этой папки, она нам пригодится.

Далее снова нажмите добавить и выберите созданный lazy, например [lazy] - 600x200. В поле справа важно написать название папки строго в определенном формате: lazy_ширина_высота, например lazy_600_200, очень важно строго соблюдать этот формат.

Теперь, когда вы добавили два новых метода обработки, нажимаем "сохранить". Страница обновится, и после этого нажимаем "Применить". Надо будет подождать некоторое время, пока все изображения заново перегенерируются. Если у вас много картинок, запаситесь терпением.

Если в каком-либо модуле по нажатию на его настройки у вас вообще нет методов генерации, тогда в выпадающем списке около "large" выбираете нужное разрешение, если вам не нужен второй метод, то около "medium" выберите метод "[Буферный] - не удалять и не использовать", а ниже добавьте соотвественно метод обработки lazy. так приходится делать из-за технических особенностей диафана.

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

Применение

Теперь вспомним о названии папки, которую мы просили запомнить. Её можно применять в конструкторе главной страницы. В некоторых виджета, например, в Слайдер, есть ключ img_size_name, который отвечает за то, откуда собственно берется изображение для слайдера. Теперь, если вы напишите туда название той папки, в нашем случае "600x200", то там появятся изображения из этой папки