Генерация картинок в Prestashop (Престашоп)

11370
3

Есть такой бесплатный движок под интернет-магазины, называется Престашоп. В нем много разных функции, но есть вещи которые просто выбешивают. Например, перегенерация картинок. Дело в том, что в зависимости от шаблона Престашоп может генерировать на основании исходной картинки еще несколько копий. Таким образом, если товаров у вас например 10 000 и каждый имеет по 3-5 картинок, то исходных картинок будет 50к, а престашоп может сделать на основании их еще 6 копий различных размеров в зависимости от шаблона.

Обозначение проблемы с генерацией картинок в Prestashop

Престашоп
Престашоп

Начнем с того, как реализован механизм подготовки дополнительных изображений в Престашоп. Первая ошибка, которую допускают при наполнении магазина на Престашоп это то, что не занимаются изначально дизайном и шаблоном: «Загружу ка я пока товар а шаблон потом как нибудь сделаем». Почему это ошибка?

А дело в том, что при добавлении товара в Престашоп движок автоматически создает для каждого изображения отдельную папку в каталоге img/p/ в которой находятся все варианты размеров этого изображения. Что происходит дальше?

Скажу сразу, что проблемы с перегенерацией картинок могут возникать если у Вас в магазине много товаров, например более 500-1000, а так же Вы не имеете доступа к изменению параметров длительности выполнения скрипта в php.ini. На шаред хостингах этот параметр установлен как правило в 30 секунд, то есть скрипт генерации изображений отработает 30 секунд и вылетит с ошибкой. Но даже на VPS и VDS хостингах очень сложно добиться нормальной перегенерации картинок, так как скрипты вылетают с ошибками нехватки памяти или времени выполнения.

Престашоп очень требовательная CMS, которая отправляет серверу «гору» запросов, кроме этого активно работает с жестким диском, поэтому на шаредах вообще не советую его устанавливать, проблемы предсказуемы.

Итак, перейдем к проблеме: загрузил в магазин 18000 товаров, каждый товар сопровождался 3-7 фотографиями. В итоге получилось около 110000 исходных фотографий. При загрузке, а длилась она очень долго, пришлось разбить файлы импорта на несколько частей по 500 товаров. Prestashop (1.5.5.0) самостоятельно создал для исходного изображения еще по 6 копий разного размера, то есть теперь у меня на хостинге уже висело около 660 000 картинок. Все хорошо, но тут я решил сменить шаблон со стандартного на купленный. Тут и начались проблемы…

Настройки вариантов изображений. Использование в шаблоне. Оптимизация.

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

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

Настройки вариантов изображений
Настройки вариантов изображений

Как видите, к каждому оригинальному изображению должно быть сгенерированно еще 8 изображений различных размером. Избыточность просто ужасающая. Поэтому сразу выбирайте шаблоны которые используют минимальное количество различных вариантов картинок, например medium_default, large_default и small_default. Это существенно сэкономит использование пространства на хостинге. В моем случае отступать было поздно.

Кстати в Престе, чтобы перегенерировать картинки нужно всего то нажать одну кнопку :) Это наверное такая шутка у разработчиков этого скрипта, потому что бесполезнее кнопки я еще не видел. А все потому, что обычное выполнение этой перегенерации заканчивается ошибкой, конечно только если у вас не 5-10 товаров. Почему разработчики не сделала асинхронную перегенерацию с использованием ajax остается загадкой. За 50 евро можно купить подозрительный плагин, на их же сайте. Но это извращение работать с графикой на хостинге, где ресурсы процессора ограничены.

Кнопка регенерация изображений в Престашоп
Кнопка регенерация изображений в Престашоп

Решение проблемы в несколько шагов

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

Выкачиваем картинки с хостинга

Все картинки нам не нужны, достаточно лишь получить оригиналы. Вообще, все изображения к товарам Престашоп хранит в папке /img/p/, каждая картинка в отдельной папке. Для начала удалим все созданные системой изображения(кроме оригиналов), то есть все в которых встречается «-» потому что у оригиналов имена задаются как «1234.jpg» (только цифры) Менять их нельзя так как они жестко привязаны к товарам в базе.

1. Для того чтобы быстро удалить лишние картинки, то есть те варианты которые нам не подходят, мы подключаемся по SSH и с помощью команды:

Удаляем все лишние варианты картинок. Путь до каталога может выглядеть например как /var/www/user/site.ru/img/p/ то есть путь к картинкам престашоп.

2. Теперь архивируем папку с картинками:

zip -2 имя архива -r Путь до архивируемой папки

*/Например

Цифр 2 означает степень сжатия от 1 до 9, чем меньше тем быстрее получится архив, но по размеру будет больше. Ключ -r означает рекурсивынй обход всех каталогов и файлов.

Итак, теперь у нас на хостинге появился файл архива, который нужно выкачать. Делаем это, например с помощью Filezilla, хотя тут что кому нравится… Распаковываем архив с фотографиями и готовимся к пакетному ресайзингу.

Ресайзим картинки для Престашоп

Вот тут пришлось попатеть и выбрать самый оптимальный и самый быстрый ресайзер. Сначала попробовал IrfanView, Потом FarStone Image Viewer. Эти программы можно использовать для пакетной операции конвертирования и переименования, однако как оказалось они не очень удобные и медленные. Кроме этого последний сгенерировал картинки с искаженным изображением, а в некоторых случаях изображение и вовсе пропало.

Отлично справляется с задачей XnConver из пакета программ XnView. Поэтому рекомендую использовать его. Кстати, если знаете другие быстрые конвертеры то напишите в комментариях, буду признателен.

Готовим программу для пакетной конвертации. К сожалению не нашел способа, чтобы за один проход сделать сразу восемь разных вариантов изображения с разными именами. Пришлось запускать конвертер восемь раз. Но это в любом случае лучше чем месяцами генерировать изображения на хостинге. Времени на один проход тратилось от 30 до 60 минут и это 110 000 изображений. Вполне не плохо.

Не спешите сразу добавлять всю папку с картинками, попробуйте на каком нибудь маленьком каталоге.
1. Добавляем небольшой каталог с картинками, который требует переконвертировать и ресайзить.

Добавляем папку для теста
Добавляем папку для теста

2. Настраиваем последовательность действий групповой конвертации

Добавляем папку для тестов
Добавляем папку для тестов

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

Изменяем размер холста
Изменяем размер холста
Удаляем мета данные изображений
Удаляем мета данные изображений

3. Настраиваем параметры сохранения изображений

Настраиваем выходные параметры
Настраиваем выходные параметры

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

Запускаем конвертацию и повторяем операцию столько раз сколько у Вас вариантов изображений должно быть на хостинге. Мне пришлось восемь раз запустить, в результате получилось 880 000 файлов. Не забываем менять размер изображений в соответствии с настройками Престашоп(Настрйоки — изображения в админке магазина).

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

Поиск файлов-оригиналов
Поиск файлов-оригиналов

После этого отображаем найденные файлы в панели Тотал Коммандера и удаляем их. В папке у нас останутся только нужные нам сгенерированные файлы картинок. Архивируем каталог.

Загружаем сгенерированные картинки обратно на хостинг, распаковываем

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

1. Заливаем архив в соответствующую папку так чтобы после распаковки файлы легли в соответствующие директории. Используем для распаковки SSH и команды линукса(или что там на Вашем хостинге стоит)

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

3 КОММЕНТАРИИ

  1. Все круто! Но обычно в prestashop каталог img/p имеет еще множество папок: img/p/1/2/3/4/5/6/7 и много много разных подобных вариантов и как угадать какое фото в какой исходной папке находилось? у каждого товара уже путь прописан к фото и при том полный!
    очень интересно услышать ваш комментарий. За статью спасибо, интересно!

    • Дело давно было, но насколько помню каждый вариант кладется в свою папку, там есть закономерность, например большая картинка в папке 1, чуть меньше в папке 2, просто Вам надо посмотреть какая папка для чего!

    • Тема была давно и возможно уже все решено, но так как я таки попал на этот пост через поисковик сегодня в 2015 году — отвечу на вопрос для мне подобных.

      Движок генерирует путь исходя из числового названия самого изображения, разбиваяего на отдельные цифры, например если название главного изображения 12345.jpg путь будет img/p/1/2/3/4/5/12345.jpg

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here