Як змінити розмір картинок в Magento 2

 

 

Розмір картинки товару, а також інші параметри картинок в Magento 2 визначаються у файлі <ТЕМА>/etc/view.xml. Шлях до ТЕМИ наступний: app/design/frontend/<Vendor>/ТЕМА. Наприклад, для теми Magento Blank розташування файлу view.xml наступне: app/design/frontend/Magento/blank/etc/view.xml. Якщо ж ви встановлювали тему через Composer, тоді папку теми можна знайти в vendor/magento/theme-frontend-<КОД_ТЕМИ>. У файлі view.xml міститься конфігурація зображень для товарів, а також для картинок-мініатюр магазину. Цей файл є обов’язковим для теми, але його можна не використовувати, якщо він є в батьківській темі. Батьківська тема оголошується у файлі <ТЕМА>/theme.xml в ноді <parent>.

 

Конфігурація зображень знаходиться в ноді <images module="Magento_Catalog">. Вона виглядає приблизно так:

<images module="Magento_Catalog">
 <image id="image_location_id" type="image_type">
  <width>200</width>
  <height>200</height>
  ...
 </image>
</images>

 

 

Конфігурація картинок в Мадженто 2

Розглянемо більш докладно налаштування конфігурацій картинок

id – це унікальний параметр, який використовується в .phtml шаблонах для вказівки властивостей зображення в певне розташування на певній сторінці. Це може бути картинка пов’язаного товару на сторінці товару, картинка товару в списку товарів, картинка товару на сторінці кошика і т.д.

type – визначає, яка картинка буде відображатися. Типи картинок описані в адмінці Каталог > Товари в розділі «Зображення і Відео». Кожен тип може мати свою власну картинку, що дозволяє завантажувати різні зображення для невеликих мініатюр або для великого зображення. Допустимі значення:

• image – відповідає типу базового зображення
• small_image – відповідає типу маленької картинки
• swatch_image – відповідає типу Swatch Image (перемикання картинок)
• swatch_thumb – відповідає типу Swatch Image (перемикання картинок)
• thumbnail – відповідає типу ескізного зображення (мініатюра)

 

Якщо вам потрібно змінити/перезаписати значення у файлі view.xml, для цього вам доведеться скопіювати весь файл view.xml в свою тему та внести потрібні коригування. Відсутні вузли у вашій темі не успадковуються від батьківської теми, тому й потрібно копіювати весь файл.

 

 

Як змінити розміри картинки товару

Щоб змінити розміри картинки товару в Magento 2, відкрийте файл <ТЕМА>/etc/view.xml, знайдіть зображення з потрібним ідентифікатором та оновіть параметри widht/height. Наприклад, змінимо розмір картинок товару на сторінці товарів (в режимі Сітки). Для цих картинок ID буде таким category_page_grid. Внесіть зміни в наступний нод (вузол):

<image id="category_page_grid" type="small_image">
  <width>250</width>
  <height>250</height>
</image>

 

 

Повний список параметрів картинки

Фреймворк Magento 2 може змінювати розміри зображень, зберігати пропорції, зберігати прозорість зображення, обрізати і т.д. Весь список параметрів виглядає так:

• width – ширина зображення в пікселях. Використовується для зміни розміру картинки товару.
  • Тип: ціле число
  • Значення за замовчуванням: немає

• height – висота картинки в пікселях. Використовується для зміни розміру картинки товару.
  • Тип: ціле число
  • Значення за замовчуванням: немає

• constrain – якщо для параметра «constrain» встановлено значення true, зображення, які менше заданого значення, не збільшуватимуться Magento. Буде збільшуватися тільки рамка кадрування. Цей параметр може використовуватися для невеликих зображень товару, якщо ви не хочете, щоб Magento змінював їх розмір. Це не впливає на зображення з більшими розмірами, ніж зазначено в параметрах ширини/висоти.
  • Тип: boolean
  • Значення за замовчуванням: true

• aspect_ratio – якщо встановлено значення true, співвідношення пропорцій між шириною та висотою картинки залишається незмінним.
  • Тип: boolean
  • Значення за замовчуванням: true

• frame – при встановленні на true, зображення не буде обрізане. Застосовується тільки в тому випадку, якщо для параметра aspect_ratio встановлено значення true.
  • Тип: boolean
  • Значення за замовчуванням: true

• transparency – якщо встановлено значення true, зберігається прозорий фон зображень. Якщо встановлено значення false, зображення матимуть білий фон (за замовчуванням). Ви можете встановити свій колір фону, використовуючи параметр background.
  • Тип: boolean
  • Значення за замовчуванням: true

• background – колір фону для зображень. Це не застосовується до зображень з прозорістю, якщо для transparency встановлено значення true. Використовуйте параметр для додавання рамки зображення при зміні розміру фотографій і зміну фонового кольору.
  • Тип: рядок
  • Значення за замовчуванням: [255, 255, 255]

 

 

Застосування змін

Коли ви закінчите редагування файлу view.xml і вкажете нові значення параметрів, вам потрібно дати команду Magento перегенерувати зображення товарів. Це можна зробити за допомогою наступних команд в консолі Magento 2:

php bin/magento catalog:images:resize
php bin/magento cache:clean

 

 

Використання в .phtml шаблонах

Ви можете використовувати інші налаштування для параметрів картинок безпосередньо в файлах-шаблонах теми. Для цього вам потрібно зробити ін’єкцію залежностей Хелпер класу для картинок (\Magento\Catalog\Helper\Image) в клас використовуваного Блоку для шаблону.

Приклад коду:

/**
* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
* @var $imageHelper \Magento\Catalog\Helper\Image
*/
$image = 'product_page_more_views';
$items = $block->getProductCollection()->getItems();
$width = 250;
$height = 250;
foreach ($items as $_item) {
  $resizedUrl = $imageHelper->init($_item, $image )
  ->keepAspectRatio(TRUE)
  ->constrainOnly(TRUE)
  ->keepFrame(TRUE)
  ->resize($width, $height)
  ->getUrl();
  echo '<img src="'. $resizedUrl .'" alt="alt text" />';
}