Magento 2: Как изменить размер картинок
15Magento 2

В данной статье все о там как изменить размер картинкам товара, а также другие параметры картинок в Magento 2.

Основы.

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

ВАЖНО!!! Если вам нужно изменить/перезаписать значения в файле view.xml, для этого вам необходимо скопировать весь файл view.xml в свою тему и внести нужные правки. Недостающие узлы в вашей теме не наследуются от родительской темы, поэтому и нужно копировать весь файл.

Шаг 1.

Скопировать файл в вашу тему и отредактировать.

Путь к файлу в вашей теме: app/design/frontend/[VENDOR]/[THEME]/etc/view.xml

Если в вашей теме его еще нет, то можно скопировать готовый из темы Luma.

Путь к файлу: vendor/magento/theme-frontend-luma/etc/view.xml

Шаг 2

Команда для Magento 2 которая выполнит изменение размеров нужных изображений.

php bin/magento catalog:images:resize

На данном этапе рекомендую найти, что то интересное минут на 20. У меня данная команда 800 изображение ресайзила 20 минут...

Шаг 3

Очистим кеш.

php bin/magento catalog:images:resize

Все готово.


Список параметров картинки

Magento 2 может: изменять размеры изображений, сохранять пропорции, сохранять прозрачность изображения, обрезать и т.д.

Весь список параметров выглядит так:

width – ширина изображения в пикселях. Используется для изменения размера картинки товара.

height – высота картинки в пикселях. Используется для изменения размера картинки товара.

constrain – если для параметра «constrain» установлено значение true, изображения, которые меньше заданного значения, не будут увеличиваться. Будет увеличиваться только рамка кадрирования. Этот параметр может использоваться для небольших изображений товара, если вы не хотите, чтобы Magento изменял их размер. Не влияет на изображения с большими размерами, чем указано в параметрах ширины/высоты.

aspect_ratio – если установлено значение true, соотношение пропорций между шириной и высотой картинки остается неизменным.

frame – если установлено значение true, изображение не будет обрезано. Применяется только в том случае, если для параметра aspect_ratio установлено значение true.

transparency – если установлено значение true, сохраняется прозрачный фон изображений. Если установлено значение false, изображения будут иметь белый фон (по умолчанию). Вы можете установить свой цвет фона, используя параметр background.

background – цвет фона для изображений. Не применяется к изображениям с прозрачностью, если для transparency установлено значение true. Используйте параметр для добавления рамки изображения при изменении размера фотографий и изменении фонового цвета. Значение по умолчанию: [255, 255, 255]

Использование в .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" />';
}