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

-- 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.

Очень интересно!
Ждем рассказа.

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

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

Еще есть универсальная бесплатная программа nikkhokkho.sourceforge.net/static.php?page=FileOptimizer

Она очень удобна. Закидываешь в нее все файлы, жмешь кнопку "Optimize all files" и все. Все файлы уже перезаписаны на своих местах. Очень удобно. Жмет хуже.

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

Я хотела привести этот сайт, сама частенько пользовалась им.
Он выставляет качество картинки 70%, для хорошей картинки это незаметно.
В ffmpeg я выставляю нужное качество при ресайзе, причем для всех изображений из папки.
В imagemagic есть одна замечательная программа, которая может сравнить изображения попиксельно.
С фотошопом не дружу, мне проще в иллюстраторе если уж очень нужно что-то наваять.

Про массовые действия скоро отпишу.

а какие команды вы используете в 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 - собственно, сам файл изображения

Легко видеть, что у первого товара одно изображение, у остальных - два.
Сейчас я удалю, для примера, все изображения для Adria Color 1 Tone (2 линзы). Одновременно удалятся все миниатюры для него.

Опять запускаю процесс, открываю файл, для этого товара имеем: Сейчас я опять загружу изображения для этого товара в \images\com_hikashop\upload\, а также миниатюрки для него в 100x100 и 200x200 (смотрим первый пост, чтобы понять куда грузить вам).

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

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

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

Вот так выглядит сохраненый файл в Notepad++:
product_id;images_path
Иногда Excel все-таки не сохраняет в utf-8, поэтому в Notepad++ выберите все -> Кодировки -> Преобразовать в UTF-8 без BOM -> Сохранить

4. Импортируем наш файл в HikaShop:
Товары -> Импорт
Импортировать товары из csv
Обзор -> Выбираем наш файл
Кодировка: utf-8
Обновлять ...: Да
Автоматически ...: Нет
Опубликовывать ...: Нет
Обновить кол...: Нет
-> Импорт

5. Все! Смотрим на сайте!

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

Вот так:

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

Вот так проверяю:
Я знаю про растр и вектор, просто не дружу с фотошопом. Для обработки, конечно, Fireworks лучше всех.

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

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

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

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

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

Да, все верно. Иначе, как вы пропишите?
Но, это все таки быстрее, чем открывать каждый товар, выбирать для него изображение, сохранять.
Если таких товаров тысячи, то вообще капец.
А так можно, к тому же, получить список файлов в текстовом виде и копировать их названия в Excel.

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

Я создаю bat-файл в кодировке OEM-866 c таким содержанием:

Исходные файлы в /myimages/Сопутствующие/400x400
Уменьшенные в /myimages/Сопутствующие/200x200

OEM-866 нужна для кириллических путей.

Люблю я cli

Люблю я cli

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

progreccor wrote:

Люблю я cli

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

Ну, вы меня в тупик просто загнали, теперь я буду бояться признаваться в любви к cli, вдруг кто-то ещё засомневается.
:lol:

Ну, и, чтобы завершить все обещанное, опишу процесс прописывания 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!!!
Они могут быть разные для каждой картинки, у меня в примере одни и те же.

Теперь можно импортировать. Процедура импорта такая же, как и для изображений.

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

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

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

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

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

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

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

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

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



Однако потом надо будет убрать этот BOM если понадобится обратный импорт

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

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

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

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

Code:

"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, обязательно разделяя точкой с запятой, если их две или больше.
Я пишу:

Code:

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

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

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

---

---

Где какое изображение хранится и куда его загружать это понятно, об этом Ваше первое сообщение в этой теме.

Дальше экспорт и Вы пишите что показывает Notepad

Если открыть полученный файл в Notepad++, то увидим:
Дальше Вы пишите.
Теперь открываем файл в Excel (Новая книга -> Данные -> Из текста -> Импорт -> С разделителями, Юникод UTF-8 -> Далее -> Точка с запятой -> Далее -> Готово -> OK)
Вот что это за действие Вы описываете? ((Новая книга -> Данные -> Из текста ->))
У меня экспортированный csv, я обычно открываю Notepad++ меняю кодировку на Ansi и работаю с ним как с EXCEL потом меняю кодировку на UTF-8 без BOM и загружаю в Hika Shop.

Как я делаю, загружаю изображения в нужные папки, далее делаю экспорт с нужными столбцами (я в экспорт добавил еще один столбец) и обязательным идентификатором товара, в столбце file_path прописываю название изображений товару, которые уже внесены в нужные папки. Ну и соответственно импорт.
И вот тут как я понимаю изображения появиться на сайте, или есть ошибка?

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

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

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

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

Almika, я вроде разобрался.

Скорее всего это выглядит так:
Создаем новый файл Excel->Данные-> Получение внешних данных-> Из текста->Выбираем файл экспортированный из Hika->Импорт->С разделителями->UTF-8 ->Далее-> Точка с запятой -> Далее -> Готово -> OK)

Далее как я понимаю удаляем ненужные столбцы и сохраняем.

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

Загружаем
Товары -> Импорт
Импортировать товары из csv
Обзор -> Выбираем наш файл
Кодировка: utf-8
Обновлять ...: Да
Автоматически ...: Нет
Опубликовывать ...: Нет
Обновить кол...: Нет
-> Импорт

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

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

almika wrote: -- HikaShop version -- : 2.6.2

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

Правильно ли я понимаю, что если я загружаю в единичный товар изображение из любой папки, то это изображение по умолчанию попадает \images\com_hikashop\upload и в дальнейшем ссылаясь на него показывается изображение ?

Для чего мне это нужно, в Hika Shop я загрузил изображение трем товарам, сделал экспорт, посмотрел что в колонке images_path прописано название. Теперь я по идее должны загруженные изображения попасть по адресу \images\com_hikashop\upload ?
Дальше я хочу загрузить нужные изображения в папку, прописать их название в файл экспорта, сделать импорт и по идее изображение должно присвоиться товару и появиться на сайте. Я правильно понимаю ?

Папка upload у меня пустая, в ней только папка safe. Но в com_hikashop есть папка images, и если зайти в нее то там собраны все миниатюры и папки.

Может я просто не в ту папку изображения загружаю ?

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

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

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

Удачи