Как изменить размер картинок в 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" />';
}