ZenCart. Как управлять размерами изображений товаров

Этот туториал покажет, как управлять размерами изображений товаров в шаблонах ZenCart.

Маленькое (Small) — миниатюра изображения, которая отображается на домашней странице и на странице списков товаров.

Среднее (Medium) – миниатюра изображения, которая отображается на индивидуальной странице товара.

Большое (Large) – изображение, которое открывается нажатием на ссылку ‘большое изображение’ (‘larger image’) на индивидуальной странице товара.

1. Размеры изображений можно отредактировать в админ панели ZenCart в меню Администратор > Настройки > Изображения (Admin > Configuration > Images).

2. Здесь можно изменить следующие параметры изображений:

   1. Ширина маленького изображения (Small Image Width)

   2. Высота маленького изображения (Small Image Height)

   3. Ширина изображения товара на странице категории (Product Listing Width)

   4. Высота изображения товара на странице категории (Product Listing Height)

   5. Ширина изображения товара на домашней странице (Product New Listing Width)

   6. Высота изображения товара на домашней странице (Product New Listing Height)

   7. Ширина изображения нового товара (New Products Width)

   8. Высота изображения нового товара (New Products Height)

   9. Ширина изображения рекомендуемого товара (Featured Products Width)

   10. Высота изображения рекомендуемого товара (Featured Products Height)

   11. Ширина изображения товара в списке товаров (Product All Listing Width)

   12. Высота изображения товара в списке товаров (Product All Listing Height)

   ВНИМАНИЕ: Все значения ширины и высоты должны быть одинаковыми. А именно, опции 1,3,5,7,9 и 11 должны иметь одно и то же значение. А опции 2,4,6,8,10 и 12 тоже должны иметь одно и то же значение.

3. Отредактируйте размеры изображений и сохраните изменения нажатием кнопки обновить (update):

   

4. Откройте страницу любого товара на вашем сайте в браузере Firefox, в котором необходимо установить дополнение Firebug, если оно еще не установлено. С помощью Firebug необходимо определить высоту нового изображения и строку в .css файле, в которой необходимо изменить значение высоты.

5. Для того чтобы открыть Firebug, нажмите иконку Firebug в верхнем правом углу браузера Firefox.

6. Кликните необходимый элемент на сайте, чтобы проинспектировать его.

7. Кликните картинку и вручную измените значение высоты в окне Firebug.

8. Правой кнопкой мышки нажмите на название .css файла в Firebug и выберите опцию Скопировать адрес (Copy location):

   

9. Данное правило должно находиться в фале stylesheet_main.css в папке /includes/templates/themeXXX/css/ на вашем сервере, но иногда используются другие файлы или данный файл находится в другой папке в зависимости версии шаблона.

10. Отредактируйте высоту и ширину изображения на ваше усмотрение.

11. Сохраните изменения в .css файле и загрузите его обратно на сервер.

12. Обновите страницу товара. Изображения товаров должны иметь установленные вами размеры.

Теперь вы знаете, как управлять размерами товаров в шаблонах ZenCart.

Вы также можете воспользоваться детальным видео туториалом: