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

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

Last updated 1 year ago

Was this helpful?

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

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

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

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

Нарезку и отображение в webp не поддерживает наш сервис аренды Shopbuilder.ru.

Ручной режим

Размеры нарезки изображений, в момент загрузки фото к товарам, задаются в меню Настройки → Изображения. Настройка срабатывает в момент загрузки фото. Если нужно изменить размер уже находящихся на сервере фото, используйте модуль .

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

Загружать к товару можно изображения формата GIF, JPG и PNG. Другие форматы изображений не поддерживаются.

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

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

При использовании русского текста в ватермарке следует выбрать кирилический шрифт, например PixelCyrillic. При использовании прозрачной PNG картинки рекомендуется преобразовать ее 8 битный формат.

Наложить watermark пакетно, на фото, расположенных на сервере, можно с помощью модуля 👇

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

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

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

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

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

Вид

Размер

Пояснение

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

Фото товаров

~800*1000

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

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

строго 410*200

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

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

~ 1440*300

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

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

~410*200

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

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

~ 420* 600

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

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

~1830*130

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

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

~ 210*70

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

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

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

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

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

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

Удаление битых картинок из базы

В меню База - Обслуживание - Проверка изображений можно увидеть фото, которые присутствуют в товарах, но физически на сервере не существуют.

Добавление превью к товарам

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

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

Зайдите в меню База - SQL запрос к базе и вставьте строку, нажмите Выполнить.

update phpshop_products set pic_small=pic_big

Пакетная обработка

Last updated 1 year ago

Was this helpful?