Работа с изображениями
Фото к товарам можно добавить вручную, но удобнее это делать пакетно, как - расскажем в этом разделе.
Проверьте настройки, которые выставлены в меню
Настройки - Изображения - они будут применяться при загрузке фото.Используйте формат 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@).
В меню
База - Обслуживание - Проверка изображений можно увидеть фото, которые присутствуют в товарах, но физически на сервере не существуют. Такое часто бывает, когда для наполнения магазина используют парсеры. Чтобы удалить битые картинки, просто выделите их галкой и нажмите
Удалить..jpeg?alt=media&token=761a90e9-4c80-4f51-823e-cab868069a16)
Last modified 3mo ago