Обработка изображений товаров, а также галереи статей, блога и услуг

Разберем пошагово процесс обработки, который проходят загружаемые изображения на примере товаров.

1) Загрузка в админке.

а) Если изображение загружено в виде файла, то файл оригинала попадает в папку:

files/originals/

б) Если изображение загружено в виде ссылки на файл на стороннем сайте, то при открытии страницы с изображением данного товара файл будет скачан с сайта донора и затем помещен в папку (при этом в базе данных в таблице изображений ссылка на сайт донор заменится на имя файла):

files/originals/

  • Некоторые сайты доноры могут блокировать скачивание файлов изображений. В таком случае вам может помочь данная статья...

2) Затем, в момент первого открытия на сайте страницы с изображением данного товара, производится автоматическая нарезка изображения под определенный размер (заданный на данной странице).

Это сделано для экономии места на хостинге, ускорения загрузки сайта (т.к. некоторые пользователи могут не глядя заливать изображения по несколько десятков мегабайт весом и безумного размера) и оптимизации внешнего вида изображений (поскольку, если на странице каталога, где размер изображения размером условно 250х250px загрузить фото 1024х768, то ужавшись почти в 4 раз видимое качество изображения упадет).

Поэтому оригинальные изображения товаров нарезаются под 3 универсальных размера:

100х100px, 300х300px, 1024х768px

нарезанные изображения хранятся в папке:

files/products/

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

Водяной знак:

Во время нарезки изображений также производится наложение водяного знака.

Его настройки и загрузка находятся в админке:

Настройки > Основные настройки : Изображения товара

Настройки водяного знака

Что определяет размеры нарезаемых изображений:

Откройте например шаблон карточки товара.

Там увидите несколько раз повторяющуюся строку типа:

{$image->filename|resize:1024:768:w}

Где 1024:768 и есть размер нарезки. Если его нужно изменить, то просто замените эти цифры на необходимые.

А :w отвечает за наложение водяного знака, т.е. если убрать, то водяного знака у данного изображения не будет.

Как сменить библиотеку для нарезки изображений:

Инструкция

Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать