Обработка изображений

Обработка изображений — это функционал, позволяющий задать алгоритм обработки картинок, которые загружаются на сайт.

В следующей инструкции будем рассматривать пример обработки изображений, когда на выходе мы хотим получить размер картинки 1000px в ширину и 600px в высоту.

1. В левом меню админ-панели перейдите во вкладку «Обработка изображений»
2. Нажмите «Добавить вариант»
3. Название напишите в свободной форме, например «Баннеры 1000×600»
4. В поле «папка» напишите название папки, которая создастся на сервере, и в которой будут храниться сгенерированные изображения, рекомендуем в следующем формате: «photo_1000_600»
5. Качество — рекомендуем писать «100»
6. Поля «Ширина изображения» и «Высота изображения» будут заполнены автоматически

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

1. Нажмите кнопку «Добавить еще один шаг обработки»
2. Выберите «Изменить пропорционально»
3. Напишите размеры, в нашем случае «1000» и «600»
4. Если не активировать галочку «Уменьшение по меньшей стороне», то исходная картинка будет «вписана» в область, размеры которой мы написали (то есть 1000×600). Если галочка будет, то картинка займет максимальную ширину/высоту, а часть оригинальной картинки, которая не попала в область обработки, будет обрезана. Нагляднее этот процесс продемонстрирован на картинке ниже. Или математически: если исходная картинка 800×1200, то при не отмеченной галочке «уменьшение по меньшей стороне» стороны изменятся пропорционально и станут 400×600. Если же галочка отмечена, то 1000×1500
5. Добавьте еще один шаг обработки, выберите «обрезать» и введите такие же значения ширины и высоты, а затем «от центра» в двух выпадающих списках, поля справа от которых оставьте пустыми. Этот этап нужен, чтобы уменьшенные (или даже увеличенные, если исходники меньше размеров обработки) приняли итоговый размер 1000×600
6. На этом этапе можно добавить другие шаги обработки, на свое усмотрение
7. Добавьте еще один шаг обработки «создать версию webp». Это очень важный шаг, он существенно оптимизирует размер изображений и уменьшает их до 10 раз без потери качества
8. Нажмите кнопку «Сохранить»

Теперь, когда создан алгоритм обработки изображений, его нужно применить к картинкам конкретного модуля, например «баннеры»:

1. В левом меню админ-панели нажмите на «Баннеры»
2. Справа сверху нажмите «Настройки модуля»
3. В пункте генерации размеров изображений добавьте созданный алгоритм. Или выберите взамен существующего, тогда из него удалятся картинки
4. Нажмите кнопку «Сохранить». С этого момента новые картинки будут обрабатываться с учетом внесенных изменений
5. Нажмите кнопку «Применить», чтобы перегенерировать уже существующие картинки. Не закрывая вкладки, дождитесь уведомления о том, что генерация прошла успешно.

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