#Работа с изображениями и видео
Фото к товарам можно добавить вручную, но удобнее это делать пакетно, как - расскажем в этом разделе.
#Работа с изображениями и видео
#Изображения
Настройки - Изображения - они будут применяться при загрузке фото.
Используйте формат WEBP для изображений, включив опцию Сохранение в webp в меню Настройки - Изображения. Это снижает вес фото и экономит трафик посетителям вашего магазина.
#Ручной режим
Размеры нарезки изображений, в момент загрузки фото к товарам, задаются в меню Настройки → Изображения. Настройка срабатывает в момент загрузки фото. Если нужно изменить размер уже находящихся на сервере фото, используйте модуль Пакетная обработка фото на сервере.
.png)
 (1) (1).png)
При ручном режиме создания товара, изображения добавляются через вкладку Изображения. Файлы автоматически нарезаются под нужные размеры - на выходе получается 3 изображения: тумбнейл (маленькое превью в каталоге), среднее изображение и исходное изображение (для лупы в карточке товара).
Загружать к товару можно изображения формата GIF, JPG, PNG и WEBP. Другие форматы не поддерживаются.
.png)
#Наложение водяного знака
На загружаемые изображения можно наложить водяной знак - watermark, для защиты от несанкционированного копирования фото с сайта. Ватермарк может быть картинкой или текстом. Настройка водяного знака через меню Настройки - Настройка изображений → Настройка ватермарка. Шрифты (TTF) для текстового ватермарка подгружаются из папки /phpshop/lib/font/
.png)
#Фото какого размера загружать?
Все бесплатные шаблоны в PHPShop - адаптивные. Это значит, что на всех устройствах картинки должны отображаться корректно. Все параметры отображения в шаблоне задаются стилями - HTML версткой шаблона, которые были подобраны специально для этой тестовой базы товаров.
Поэтому важно соблюдать
- примерно такие же размеры загружаемых изображений;
&#xNAN;- не загружать фото огромного размера для картинок каталогов;
&#xNAN;- подбирать фото примерно одной пропорции - или горизонтальная ориентация, или вертикальная;
&#xNAN;- сразу решить, какой отступ будет в картинке от края изображения на нем, или фото будет обрезано встык.
Все это влияет на конечное отображение вашего будущего магазина!
| Вид | Размер | Пояснение | Пример картинки |
|---|---|---|---|
| Вид | Размер | Пояснение | Пример картинки |
| Фото товаров | ~800*1000 | Добавлять лучше все фото в одной пропорции. Вы добавляете одно большое фото, при ручной загрузке происходит его автоматическая нарезка под размеры, указанные в меню Настройки - Изображения. | Пример картинки для товара |
| Фото каталогов | 410*200 | Фото каталогов лучше добавлять этого размера, поскольку именно под данный размер подобраны стили бесплатных шаблонов, для лучшего отображения на всех устройствах. | Пример картинки для каталога |
| Главный баннер для широких экранов | ~ 1440*300 | Главный баннер загружается в меню Маркетинг - Слайдер. Все баннеры в Слайдер нужно загружать одного размера. | Пример картинки баннера для широких экранов |
| Главный баннер для мобильных устройств | ~410*200 | Поскольку Слайдер для широких экранов имеет горизонтальную ориентацию, при сужении на маленьких экранов ничего не будет видно. Также его размер и вес будет снижать загрузку на мобильных, что не нравится поисковикам. Для этого мы ввели отдельный стикер в шаблон для мобильного слайдера. Загружается в меню Модули - Стикеры - Слайдер для мобильных. | Пример картинки баннера для мобильных |
| Картинка вертикального баннера в колонке | ~ 420* 600 | Баннер в левой колонке загружается в меню Маркетинг - Баннеры. | Пример картинки вертикального баннера |
| Картинка горизонтального баннера | ~1830*130 | Горизонтальный баннер в теле сайта загружается в меню Модули - Стикеры - Горизонтальный баннер. | Пример картинки горизонтального баннера |
| Картинка для логотипа бренда | ~ 210*70 | Логотипы лучше делать на подложке, чтобы они хорошо смотрелись на темном фоне. Также подложка нужна, чтобы логотипы разной ориентации - высокие, длинные, смотрелись одинаково хорошо. В картинках желательно делать одинаковые отступы от края, чтобы логотипы шли в ряд ровно. Обратите внимание на пример тестового логотипа. | Пример логотипа бренда |
#Создание дополнительной фотогалереи
Если требуется создать отдельные страницы с фотогалереей продукции или портфолио, то можно использовать штатную функцию дополнительной фотогалереи.
Для создания новой фотогалереи, нажмите меню Веб-сайт - Фотогалерея - ➕. В появившемся окне выберите изображения для загрузки, и сохраните результат. Можно объединять фотогалереи в каталоги. Поддерживается пакетная загрузка изображений.
В поле "Таргетинг" задается привязка вывода фотогалереи к заданным страницам сайта.
/phpshop/templates/имя_шаблона/main/shop.tpl переменную @getPhotos@ в нужное место ( рекомендуется сразу после @DispShop@)..png)
.png)
.png)
#Удаление битых картинок из базы
В меню База - Обслуживание - Проверка изображений можно увидеть фото, которые присутствуют в товарах, но физически на сервере не существуют.
Такое часто бывает, когда для наполнения магазина используют парсеры. Чтобы удалить битые картинки, просто выделите их галкой и нажмите Удалить.
.jpeg)
#Добавление превью к товарам
Превью товаров создаются автоматически при загрузке, если опция включена в Настройки - Изображения и сами фото размещены на сервере до импорта.
.jpg)
Если импорт запущен до размещения фото на сервере, превью не нарежется автоматически, тогда можно выполнить команду вручную.
Зайдите в меню База - SQL запрос к базе и вставьте строку, нажмите Выполнить.
update phpshop_products set pic_small=pic_big#Пакетная обработка
Пакетная загрузка фото на сервер
#Видео
#Ручной режим
Загружать к товару можно видео в формате MP4, MOV. Другие форматы не поддерживаются.
#Генерация видео для товаров из изображений
Генерация видео происходит по нажатию кнопки Создать видео из изображений в карточке товара. Подробная инструкция.