Как работать с изображениями, миниатюрами в хикашоп?

-- HikaShop version -- : 2.6.2

Здравствуйте, друзья!
Опишу здесь как HikaShop работает с изображениями.
Думаю, для новичков это может быть полезным.

По умолчанию загруженные изображения хранятся в папке \images\com_hikashop\upload
Миниатюры - в \images\com_hikashop\upload\thumbnails
Каждый раз, когда Hikashop должен вывести миниатюру (thumbnail) с нужными размерами, он ищет в нужной папке. Если не находит, то создает.
Если удалить все папки в thumbnails, то Хикашоп все создаст заново, когда потребуется.

1. HikaShop -> Конфигурация -> Настройки -> Основные
Миниатюра изображения: Да
Размер миниатюры: 100x100
Изображение на странице товара: 200x200
Режим изменения размера изображения: Сохранять пропорции
Размер изображения: 400x400
Установить размер изображений: Нет

Для таких параметров миниатюры будут помещаться в \images\com_hikashop\upload\thumbnails
100x100
200x200

Если в настройках:
Установить размер изображений: Да
Миниатюры - в \images\com_hikashop\upload\thumbnails
100x100f
200x200f

Собственно, разница - если "Да", то картинка будет дополняться белым фоном до 100x100, а иначе просто ресайз, макс. сторона будет 100, например 100x60 или 70x100. Также для других размеров.

Откуда беруться ещё папки в \images\com_hikashop\upload\thumbnails
100x100fsO - появляется после открытия в админке окна для выборки изображения
50x50 - появляется при просмотре товаров в админке

Я использую Хика -> Товар -> Значки -> Популярный товар
размер 30x30
Сохранить размер - Да
В \images\com_hikashop\upload\thumbnails появляется папка
30x30

Если в настройках модулей и меню Хикашоп указаны размеры изображений по умолчанию, то новых папок создаваться не будет.
Если же задать другие размеры, например 150x40, то появляется новая папка 150x40 в \images\com_hikashop\upload\thumbnails.

Нюансы:
При загрузке изображения через upload изображение всегда прибавляет в весе.
Поэтому, я всегда загружаю по ftp, а потом выбираю его в товаре, категории.
То же самое я делаю с миниатюрами, то есть загружаю их в уже известные мне папки для хранения миниатюр.

Когда создается или редактируется значок, то нет возможности выбрать уже загруженный значок.
Поэтому после создания значка я переписываю его через ftp. Так как иногда бывают проблемы с прозрачностью png24.

Лично я для ресайза изображений использую ffmpeg. Также можно воспользоваться imagemagic, мне показалось, что результаты похуже.
Удаление лишней информации из jpeg: jpegtran -copy none, оптимизация jpegtran тоже не очень понравилась.

Дальше я хочу описать процесс прописывания названий изображениям через массовые действия. Эти названия выводятся в теге alt для изображения.
Также, если будет интересно, могу рассказать о массовом присвоении изображений товарам после их загрузки по ftp.

Всем удачи!

almika wrote: Также, если будет интересно, могу рассказать о массовом присвоении изображений товарам после их загрузки по ftp.

progreccor wrote: Насчет оптимизации изображений - самый лучший способ - это tinypng ( tinypng.com/ ) Лучше не жмет никто! Даже сам гугл, когда предлагает сжать изображения, дает результат хуже, чем tinypng.
C ними только одна проблема - если сжать несколько изображений, то все хорошо, а при массовом сжатии - сохранять очень долго.

а какие команды вы используете в ffmpeg для ресайза? Это все-таки утилита командной строки и достаточно универсальная....

Насчет 70% для tinypng - нет. Там способ сжатия основан на других принципах. Если взять и фотошопом сжать с качеством 60 процентов - картинка будет раза в два больше, чем сжатая в tinypng.

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

Прописываем изображения товарам массово.

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

Хорошие названия:
biofinity-6-lenses.jpg

acuvue-one-day-define-30-lenses.jpg
acuvue-one-day-define-30-lenses-shimmer.jpg
acuvue-one-day-define-30-lenses-sparkle.jpg

ophthalmix-colors-2-lenses.jpg
ophthalmix-colors-2-lenses-01.jpg

2. Загружаем изображения в папку \images\com_hikashop\upload\ через ftp.
Если вы изменили папку загрузки изображений по умолчанию в конфигурации, загружаем в неё.

2. Получаем список товаров и их изображений.

Хикашоп -> Система -> Массовые действия
Создаем новое массовое действие "Изображения товаров"
Описание "Сделать эту выборку для последующего прописывания имен файлов изображений товарам"
Опубликовано: Да
Данные: Товар
Экспортировать в файле csv
В первой колонке отмечаем: product_id, product_name
В колонке Images (последняя): file_id, file_path
Сохраняем
Запускаем процесс

Если открыть полученный файл в Notepad++, то увидим:

"product_id";"product_name";"images_id";"images_path"
2302;"Air Optix Night&Day Aqua (3 линзы)";480;"air-optix-night-and-day-aqua-3-lenses.jpg"
2324;"Adria Color 2 Tone (2 линзы)";"481;482";"adria-color-2-tone-2-lenses.jpg;adria-color-2-tone-2-lenses-01.jpg"
2309;"FreshLook Dimensions (6 линз)";"483;484";"freshlook-dimensions-6-lenses.jpg;freshlook-dimensions-6-lenses-01.jpg"
2323;"Adria Color 1 Tone (2 линзы)";"485;486";"adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg"

2323;"Adria Color 1 Tone (2 линзы)";"";""

adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg

2302;air-optix-night-and-day-aqua-3-lenses.jpg
2324;"adria-color-2-tone-2-lenses.jpg;adria-color-2-tone-2-lenses-01.jpg"
2309;"freshlook-dimensions-6-lenses.jpg;freshlook-dimensions-6-lenses-01.jpg"
2323;"adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg"

progreccor wrote: а какие команды вы используете в ffmpeg для ресайза? Это все-таки утилита командной строки и достаточно универсальная...

D:/ffmpeg64/bin/ffmpeg -i in400.jpg -vf "scale=200:-1:flags=lanczos" -q:v 0 -pix_fmt yuvj422p out200.jpg

progreccor wrote: Насчет 70% для tinypng - нет. Там способ сжатия основан на других принципах.

:: информация о файле
D:\imagemagic\identify -verbose D:/myimages/Линзы/400x400/opti/ophthalmix-profi-6-lenses.jpg

то есть, грубо говоря, каждому товару я должен прописать вручную нужную картинку.

Я правильно понял?

p.s. и еще - вы привели команду для одного файла (по ресайзу)
А пачкой вы как их обрабатываете? ну чтобы сразу весь каталог?

progreccor wrote: то есть, грубо говоря, каждому товару я должен прописать вручную нужную картинку.

Я правильно понял?

progreccor wrote: p.s. и еще - вы привели команду для одного файла (по ресайзу)
А пачкой вы как их обрабатываете? ну чтобы сразу весь каталог?

:: Из папки 400x400 все изображения обрабатываем ffmpeg
for /r D:/myimages/Сопутствующие/400x400 %%i in (*.*) do (
	D:/ffmpeg64/bin/ffmpeg -i %%i -vf "scale=200:-1:flags=lanczos" -q:v 0 -pix_fmt yuvj422p D:/myimages/Сопутствующие/200x200/%%~nxi
)

@pause

Люблю я cli

progreccor wrote:

Люблю я cli

А вы точно женщина?

Ну, и, чтобы завершить все обещанное, опишу процесс прописывания images_name и images_description.
Имя изображения используется Хикашопом для тега alt при выводе изображения.
Я добавила в шаблоне ещё и тег title, и беру его из images_description. Ну, есть поле, зачем ему пропадать.
К тому же оно отображается в FireFox при наведении мышки на картинку.
Я прописываю одинаковые значения этих полей, и беру из из названия товара, но вы можете прописать так, как захотите.

Для этого нам понадобятся два разных массовых действия.

1. Выборка названий товаров и их изображений.
Данные - Товар
В первой табличке выбираем product_id, product_name
В последней (Images) - file_id, file_name, file_description, file_path

Сохраняем, запускаем процесс.
Эта выборка нужна только для того, чтобы брать из неё названия товаров. Если вы хотите прописывать что-то своё, можете ее не делать.

2. Другая выборка будет основой для импорта.
Здесь выбираем только file_name, file_description, file_path
product_id добавится в процессе выгрузки.

Собственно, работа с Excel абсолютно такая же, поэтому не буду расписывать.

В результате, у нас должен быть файл csv в кодировке utf-8 с таким содержимым:

"images_name";"images_description";"images_path";"product_id"
"Air Optix Night&Day Aqua (3 линзы)";"Air Optix Night&Day Aqua (3 линзы)";"air-optix-night-and-day-aqua-3-lenses.jpg";2302
"Adria Color 2 Tone (2 линзы);Adria Color 2 Tone (2 линзы)";"Adria Color 2 Tone (2 линзы);Adria Color 2 Tone (2 линзы)";"adria-color-2-tone-2-lenses.jpg;adria-color-2-tone-2-lenses-01.jpg";2324
"FreshLook Dimensions (6 линз);FreshLook Dimensions (6 линз)";"FreshLook Dimensions (6 линз);FreshLook Dimensions (6 линз)";"freshlook-dimensions-6-lenses.jpg;freshlook-dimensions-6-lenses-01.jpg";2309
"Adria Color 1 Tone (2 линзы);Adria Color 1 Tone (2 линзы)";"Adria Color 1 Tone (2 линзы);Adria Color 1 Tone (2 линзы)";"adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg";2323

очень хорошее и нужное руководство.
Читать всем!

Видимо, не очень понятно я пишу, возникают вопросы, которые мне задают в личке.
Я отвечу тут, попытаюсь изложить простыми словами, но заранее прошу прощения, если опять выйдет корявое объяснение.

Вот начало:
Как прописать изображения для всех товаров сразу

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

В Notepad++ нельзя работать со столбцами, поэтому там только смотрим - правильно ли файл выгрузился, а в Excel работаем с ним.

Почему нельзя просто открыть csv в Excel, а через импорт?
Если вы просто откроете файл csv в Excel, то вместо русских букв увидите кракозябры. А русские буквы - это наше название товара, без которого мы не будем знать, какой идентификатор за какой товар отвечает.
Поэтому на 3-м шаге надо именно через импорт csv в Excel делать.

Спрашивайте здесь, пожалуйста. Это поможет остальным.
Всем счастья

открыть файл csv в excel можно - для этого надо поставить BOM.
В том же notepad++

almika wrote: Прописываем изображения товарам массово.

2. Получаем список товаров и их изображений.

Хикашоп -> Система -> Массовые действия
Создаем новое массовое действие "Изображения товаров"
Описание "Сделать эту выборку для последующего прописывания имен файлов изображений товарам"
Опубликовано: Да
Данные: Товар
Экспортировать в файле csv
В первой колонке отмечаем: product_id, product_name
В колонке Images (последняя): file_id, file_path
Сохраняем
Запускаем процесс

Если открыть полученный файл в Notepad++, то увидим:

"product_id";"product_name";"images_id";"images_path"
2302;"Air Optix Night&Day Aqua (3 линзы)";480;"air-optix-night-and-day-aqua-3-lenses.jpg"
2324;"Adria Color 2 Tone (2 линзы)";"481;482";"adria-color-2-tone-2-lenses.jpg;adria-color-2-tone-2-lenses-01.jpg"
2309;"FreshLook Dimensions (6 линз)";"483;484";"freshlook-dimensions-6-lenses.jpg;freshlook-dimensions-6-lenses-01.jpg"
2323;"Adria Color 1 Tone (2 линзы)";"485;486";"adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg"

3. Теперь открываем файл в Excel (Новая книга -> Данные -> Из текста -> Импорт -> С разделителями, Юникод UTF-8 -> Далее -> Точка с запятой -> Далее -> Готово -> OK)

Названия ваших картинок, нужно прописать в колонку images_path, обязательно разделяя точкой с запятой, если их две или больше.
Я пишу:

adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg

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

Удаляем колонки product_name, images_id
Файл -> Сохранить как -> Другие форматы -> CSV разделитель запятые, Сервис -> Параметры веб-документа -> Кодировка -> UTF-8 -> ОК, Сохранить, ОК, ОК

"product_id";"product_name";"images_id";"images_path"
2302;"Air Optix Night&Day Aqua (3 линзы)";480;"air-optix-night-and-day-aqua-3-lenses.jpg"
2324;"Adria Color 2 Tone (2 линзы)";"481;482";"adria-color-2-tone-2-lenses.jpg;adria-color-2-tone-2-lenses-01.jpg"
2309;"FreshLook Dimensions (6 линз)";"483;484";"freshlook-dimensions-6-lenses.jpg;freshlook-dimensions-6-lenses-01.jpg"
2323;"Adria Color 1 Tone (2 линзы)";"485;486";"adria-color-1-tone-2-lenses.jpg;adria-color-1-tone-2-lenses-01.jpg"

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

При мипорте были какие-то сообщения? Откройте базу напрямую, саму таблицу (_hikashop_file )гляньте, что прописалось в поля?
Кусок вашего файла приведите здесь.
То есть нам надо больше информации от вас.

almika wrote: Прописываем изображения товарам массово.

3. Теперь открываем файл в Excel (Новая книга -> Данные -> Из текста -> Импорт -> С разделителями, Юникод UTF-8 -> Далее -> Точка с запятой -> Далее -> Готово -> OK)

Ну вот, уже прогресс. Все получится!

almika wrote: -- HikaShop version -- : 2.6.2

По умолчанию загруженные изображения хранятся в папке \images\com_hikashop\upload

Папка для изображений прописывается в конфигурации. По умолчанию она \images\com_hikashop\upload.
Без особой нужды не меняйте ее на другую.

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

А после этого нужно прописать их названия товарам через экспорт и импорт. Вы правильно понимаете.

Удачи