Загрузка изображений к товару и настройка их показа

В этой статье разберем функцию вставки изображения на витрину интернет-магазина. Используется несколько типов изображений - маленькая иконка, изображение для предварительного просмотра, большое и очень большое изображение. Достаточно загрузить одно изображение и система автоматически создаст из него все вышеперечисленные типы.

Сначала произведем общие настройки для загружаемых изображений. Для осуществления настройки перейдите в административной панели на страницу:

Настройки > Товары > Настройки товаров 

На вкладку "Изображения":



Если нужно произведите настройками, также можете всё оставить по-умолчанию.

Далее следуем:

Управление > Товары > Цифровая клавиатура diNovo > Товары и Категории

Редактируем существующий или создаём новый товар. Для загрузки изображения, открываем вкладку "Изображение и показ":



Тут можете загрузить изображения по отдельности для каждого размера (они могут быть разными) или загрузить один файл и преобразовать его в остальные типы.

Рассмотрим пример со вторым вариантом. Напротив пункта "Огромное изображение" нажмите ссылку "Загрузить". Откроется окно менеджера загрузок:



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

Если желаете использовать ранее загруженные изображения, то в:

Настройки > Система > Общие настройки 

Включите "Показывать превью-изображения для Администратора":



В этом случае, при выборе ранее загруженных изображений, мы получим всплывающее превью-изображение, при наведении курсора мыши:



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



На странице с детальным описанием товара:



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



В открывшемся окне, по аналогии загружаем файлы:



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



Теперь посмотрим, как это выглядит в пользовательской части на детальной странице товара: