Работа с изображениями

Фото к товарам можно добавить вручную, но удобнее это делать пакетно, как - расскажем в этом разделе.

Ручной режим

При ручном режиме создания товара, изображения добавляются через вкладку Изображения. Файлы автоматически нарезаются под нужные размеры - на выходе получается 3 изображения: тумбнейл (маленькое превью в каталоге), среднее изображение и исходное изображение (для лупы в карточке товара).

Изменить размеры нарезки изображений можно в настройках меню Настройки → Основные → Настройка изображений

Наложение водяного знака

На загружаемые изображения можно наложить водяной знак - watermark, для защиты от несанкционированного копирования фото с сайта. Ватермарк может быть картинкой или текстом. Настройка водяного знака через меню Настройки - Настройка изображенийНастройка ватермарка. Шрифты (TTF) для текстового ватермарка подгружаются из папки /phpshop/lib/font/

Фото какого размера загружать?

Все бесплатные шаблоны в PHPShop - адаптивные. Это значит, что на всех устройствах картинки должны отображаться корректно. Все параметры отображения в шаблоне задаются стилями - HTML версткой шаблона, которые были подобраны специально для этой тестовой базы товаров.

Поэтому важно соблюдать

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

Все это влияет на конечное отображение вашего будущего магазина!

Вид

Размер

Пояснение

Пример картинки

Фото товаров

~800*1000

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

Пример картинки для товара

Фото каталогов

строго 410*200

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

Пример картинки для каталога

Главный баннер для широких экранов

~ 1440*300

Главный баннер загружается в меню Маркетинг - Слайдер. Все баннеры в Слайдер нужно загружать одного размера.

Пример картинки баннера для широких экранов

Главный баннер для мобильных устройств

~410*200

Поскольку Слайдер для широких экранов имеет горизонтальную ориентацию, при сужении на маленьких экранов ничего не будет видно. Также его размер и вес будет снижать загрузку на мобильных, что не нравится поисковикам. Для этого мы ввели отдельный стикер в шаблон для мобильного слайдера. Загружается в меню Модули - Стикеры - Слайдер для мобильных.

Пример картинки баннера для мобильных

Картинка вертикального баннера в колонке

~ 420* 600

Баннер в левой колонке загружается в меню Маркетинг - Баннеры.

Пример картинки вертикального баннера

Картинка горизонтального баннера

~1830*130

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

Пример картинки горизонтального баннера

Картинка для логотипа бренда

~ 210*70

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

Пример логотипа бренда

Создание дополнительной фотогалереи

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

Для создания новой фотогалереи, нажмите меню Веб-сайт - Фотогалерея - ➕. В появившемся окне выберите изображения для загрузки, и сохраните результат. Можно объединять фотогалереи в каталоги. Поддерживается пакетная загрузка изображений.

В поле "Таргетинг" задается привязка вывода фотогалереи к заданным страницам сайта.

Если вы правите свой шаблон, для вывода фотогалереи требуется добавить в файл /phpshop/templates/имя_шаблона/main/shop.tpl переменную @ getPhotos@(без пробела) в нужное место (рекомендуется сразу после @ DispShop@)