Фотографии товара

В статье рассмотрим, как изменить размеры фотографии у товаров, как настроить изменение фотографий товара в зависимости от цвета и как настроить обзор товара в 360 градусов.

• Рекомендации по размеру изображений
• Как изменить размер изображений?
• Изменение фотографии товара в зависимости от цвета
• Как подгрузить иконки для цвета
• Обзор товара в 360 градусов

 

Рекомендации по размеру изображений

В магазине на базе ADVANTSHOP формируется четыре физически отдельных изображения из одного загруженного оригинала.

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

Получается 4 картинки, размеры которых можно менять по необходимости. Мы рекомендуем оставить значения по умолчанию.

В стандартном шаблоне дизайна используются следующие размеры изображений по умолчанию:

По умолчанию размеры "Большая фотография":

Ширина 1000 (px)
Высота 1000 (px)

Большая фотография товара - это изображение, которое показывается при наведении (или клике) на изображение в карточке товара. Пример на рисунке 1.

Рисунок 1.

По умолчанию размеры "Средняя фотография":

Ширина 800 (px)
Высота 800 (px)

Средняя фотография товара - это изображение, которое показывается в карточке товара. Пример на рисунке 2.

Рисунок 2.

По умолчанию размеры для  "Маленькая фотография":

Ширина 200 (px)
Высота 200 (px)

Маленькая фотография - это, собственно, фото, которое показывается в каталоге в списке товаров. Посмотрите пример на рисунке 3.

Рисунок 3.

По умолчанию размеры "Самая маленькая фотография":

Ширина 60 (px)
Высота 60 (px)

Самая маленькая фотография отображается, когда товар добавляют в корзину, и в карточке товара под основным фото, показывая тем самым, что есть ещё фотографии и какие они (рис. 4).

Рисунок 4.

Рекомендуем

Загружать изображения, размер которых не меньше, чем размер у "Средней фотографии" и не больше, чем размер у "Большой фотографии".

Если загрузить изображение, размеры которого больше, чем размер у "Большой фотографии" - оно всё равно будет сжато до размеров "Большой фотографии".

Как изменить размер изображений?

Для того чтобы изменить размер, необходимо перейти в панель администрирования, пункт меню "Мои сайты" - "Редактировть" (рис.5).

Рисунок 5.

Далее "Параметры" - "Категория товаров" - раздел "Размеры изображения" здесь 4 настройки для изменения картинки: "Товар. Самая маленькая фотография", "Товар. Маленькая фотография", "Товар. Большая фотография", "Товар. Средняя фотография" (рис.6).

Рисунок 6.

Измените размеры и нажмите "Сохранить".

Внимание!

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

Для того, чтобы применить измененные размеры для изображений, загруженных ранее, необходимо пережать фотографии после изменений размера и сохранения настроек. Для этого в пункте меню "Мои сайты" - "Параметры", вкладка "Категории товаров", раздел "Размеры изображения", нажмите "Пережать фотографии товаров" (рис.7).

Рисунок 7.

Откроется окно, Вы нажимаете "Ок" (рис. 8).

Рисунок 8.

Внимание!

Установленные размеры - это максимально допустимые размеры. Это означает, что если загрузить картинку размерами более, чем указано в настройке, то картинка будет пропорционально сжата, чтобы соответствовать размерам одной из сторон.

Изменение фотографии товара в зависимости от цвета

Чтобы ассоциировать цвет с фото, необходимо сделать 2 шага. 

• Добавить цвета в справочник цветов.
• Ассоциировать фотографию товара с цветом из справочника.

 

Обзор товара в 360 градусов

Для того чтобы сделать 360 градусный обзор товара необходимо сделать 3 вещи:

1) Сделать фотосъемку товара со всех сторон.

От количества фотографий и шага в градусах будет зависеть плавность анимации вращения, мы рекомендуем порядка 30-40 фотографий на один товар, т.е. примерный шаг в 10-12 градусов вокруг товара. Если фотографии уже есть, данный шаг можно пропустить и идти далее. Обратите внимание, что изображение должны быть хорошего качества, чтобы при просмотре у клиента не возникал дискомфорт.

2) Дать цифровые номера фотографиям, в соответствии с тем, в каком порядке они должны отображаться при вращении (т.е. 1, 2, 3 и т.д.). При вращении одна фотография незаметно подменяется другой, поэтому если вы выставите порядок неверно, то может получиться так, что при ракурсе, скажем в 240гр, следующим случайно пойдет ракурс с 10 гр, из-за этого эффект вращения пропадет.

Необходимо соблюсти требования для фото:

Нумерация строго по порядку, а именно 1.jpg, 2.jpg, 3.jpg и т.д, начиная с 1 (не с "01") и без пропусков нумерации.

Формат картинок только *.jpg (не png, gif, jpeg)

Рекомендуемый размер фото 700px

3) Включить опцию и загрузить изображения.

Для этого нужно в панели администрирования перейти в режим редактирование товара.

Далее перейти в раздел "фотографии - фотографии для просмотра 360", и включить возможность просмотра 360. Нажать на кнопку загрузить (рис. 18).

Рисунок 18.

После этого необходимо выбрать все ваши подготовленные фотографии в появившемся окне, и подтвердить выбор.

Внимание!

На один товар возможно только одно 360 отображение.

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

Если Вы всё сделали верно, то у вас появиться вот такая иконка в карточке товара (рис. 19).

Рисунок 19.

И затем появиться возможность просматривать фото 360 (рис. 20)

Рисунок 20.

Готово.