Обработка изображений — это функционал, позволяющий задать алгоритм обработки картинок, которые загружаются на сайт.
В следующей инструкции будем рассматривать пример обработки изображений, когда на выходе мы хотим получить размер картинки 1000px в ширину и 600px в высоту.
- В левом меню админ-панели перейдите во вкладку «Обработка изображений»
- Нажмите «Добавить вариант»
- Название напишите в свободной форме, например «Баннеры 1000×600»
- В поле «папка» напишите название папки, которая создастся на сервере, и в которой будут храниться сгенерированные изображения, рекомендуем в следующем формате: «photo_1000_600»
- Качество — рекомендуем писать «100»
- Поля «Ширина изображения» и «Высота изображения» будут заполнены автоматически
Мы заполнили основные поля, которые непосредственно не влияют на картинку, теперь перейдем к созданию самого алгоритма обработки изображений
- Нажмите кнопку «Добавить еще один шаг обработки»
- Выберите «Изменить пропорционально»
- Напишите размеры, в нашем случае «1000» и «600»
- Если не активировать галочку «Уменьшение по меньшей стороне», то исходная картинка будет «вписана» в область, размеры которой мы написали (то есть 1000×600). Если галочка будет, то картинка займет максимальную ширину/высоту, а часть оригинальной картинки, которая не попала в область обработки, будет обрезана. Нагляднее этот процесс продемонстрирован на картинке ниже. Или математически: если исходная картинка 800×1200, то при не отмеченной галочке «уменьшение по меньшей стороне» стороны изменятся пропорционально и станут 400×600. Если же галочка отмечена, то 1000×1500
- Добавьте еще один шаг обработки, выберите «обрезать» и введите такие же значения ширины и высоты, а затем «от центра» в двух выпадающих списках, поля справа от которых оставьте пустыми. Этот этап нужен, чтобы уменьшенные (или даже увеличенные, если исходники меньше размеров обработки) приняли итоговый размер 1000×600
- На этом этапе можно добавить другие шаги обработки, на свое усмотрение
- Добавьте еще один шаг обработки «создать версию webp». Это очень важный шаг, он существенно оптимизирует размер изображений и уменьшает их до 10 раз без потери качества
- Нажмите кнопку «Сохранить»
Теперь, когда создан алгоритм обработки изображений, его нужно применить к картинкам конкретного модуля, например «баннеры»:
- В левом меню админ-панели нажмите на «Баннеры»
- Справа сверху нажмите «Настройки модуля»
- В пункте генерации размеров изображений добавьте созданный алгоритм. Или выберите взамен существующего, тогда из него удалятся картинки
- Нажмите кнопку «Сохранить». С этого момента новые картинки будут обрабатываться с учетом внесенных изменений
- Нажмите кнопку «Применить», чтобы перегенерировать уже существующие картинки. Не закрывая вкладки, дождитесь уведомления о том, что генерация прошла успешно.
Теперь в конструкторе в настройках изображений в виджетах вы можете выбрать картинку, обработанную по собственному алгоритму.