Размер картинки товара, а также другие параметры картинок в 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>
Рассмотрим более подробно настройки конфигураций картинок
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 изменял их размер. Не влияет на изображения с большими размерами, чем указано в параметрах ширины/высоты. aspect_ratio
– если установлено значение true
, соотношение пропорций между шириной и высотой картинки остается неизменным. frame
– если установлено значение true
, изображение не будет обрезано. Применяется только в том случае, если для параметра aspect_ratio
установлено значение true
. transparency
– если установлено значение true
, сохраняется прозрачный фон изображений. Если установлено значение false
, изображения будут иметь белый фон (по умолчанию). Вы можете установить свой цвет фона, используя параметр background
. background
– цвет фона для изображений. Не применяется к изображениям с прозрачностью, если для transparency
установлено значение true
. Используйте параметр для добавления рамки изображения при изменении размера фотографий и изменении фонового цвета.
Когда вы закончите редактирование файла view.xml и укажете новые значения параметров, вам нужно дать команду Magento перегенерировать изображения товаров. Это можно сделать с помощью следующих команд в консоли Magento 2:
php bin/magento catalog:images:resize php bin/magento cache:clean
Вы можете использовать другие настройки для параметров картинок непосредственно в файлах-шаблонах темы. Для этого вам нужно сделать инъекцию зависимостей Хелпер класса для картинок (\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" />'; }
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…
Выход айфонов 15 и 16 поколения — не повод забыть об устройствах 14-го, которые продолжают…
Очень неприятно получается, когда вы приложили много усилий, труда и сил, чтобы создать картинку, а…
Подавляющую часть всего мирового веб-трафика занимает трафик с мобильных устройств (включая планшеты), поэтому этот факт…
Не стоит портить нервы из-за того, что мир устроен так, а не иначе Джон Брэйн…