Размеры изображения для разработчиков темы

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

• woocommerce_thumbnail — используется в «сетках» продуктов в таких местах, как страница магазина.
• woocommerce_single — используется на отдельных страницах продукта.
• woocommerce_gallery_thumbnail — используется под основным изображением на странице одного продукта для переключения галереи.

woocommerce_single показывает полное изображение продукта в том виде, в каком оно загружено, поэтому по умолчанию оно никогда не обрезается. По умолчанию оно имеет ширину 600px.

woocommerce_gallery_thumbnail всегда обрезается квадратом, по умолчанию 100×100 пикселей. Используется для навигации по изображениям в галерее.

woocommerce_thumbnail по умолчанию имеет ширину 600px, обрезание по квадрату, чтобы сетки продуктов выглядели аккуратно. Соотношение сторон для обрезки может быть настроено владельцем магазина.

Важно отметить, что, несмотря на установленную фактическую ширину изображения, темы могут в конечном итоге изменять размер изображения, отображаемого с помощью CSS, а ширина изображения может быть ограничена шириной сетки товара или колонок.

Темы могут определять размеры изображения

Начиная с WooCommerce 3.3.0, темы могут объявлять, какие размеры следует использовать при объявлении поддержки WooCommerce. Если тема определяет размеры (ширину) изображений, то владелец магазина не сможет их изменить, но заданный размер должен быть оптимальным для темы.

add_theme_support( 'woocommerce', [
    'thumbnail_image_width'         => 200,
    'gallery_thumbnail_image_width' => 100,
    'single_image_width'            => 500,
] );

При вызове функций WordPress, которые ожидают размер изображения, например, wp_get_attachment_image_src, следует использовать имена размеров изображения — вот они:

• woocommerce_thumbnail
• woocommerce_single
• woocommerce_gallery_thumbnail

Владельцы магазинов по-прежнему смогут контролировать соотношение сторон и обрезку (см. ниже).

Настройка размеров изображений в кастомизаторе

Кастомайзер содержит опции, которые управляют изображениями в WooCommerce.

Если тема декларирует размеры изображения, то верхняя часть будет скрыта и будет видна только опция обрезки.

Изменение опции обрезки, или ширины, приведет к обновлению предварительного просмотра справа, чтобы показать, как все будет выглядеть. Изменения не будут видны клиентам до тех пор, пока кастомизатор не будет «опубликован», а эскизы не будут регенерированы в новые размеры.

Раздел обрезки эскизов в кастомизаторе позволяет владельцам магазина выбрать одну из трех настроек коэффициента обрезки для изображений в каталоге:

• 1:1 (сбрасывание площадей)
• Пользовательский (Владелец магазина может ввести пользовательское соотношение сторон)
• Необрезанный (Сохранить соотношение сторон одного изображения)

Фактические размеры изображения рассчитываются на основе выбранной опции кадрирования и ширины изображения.

Изменение размеров изображения с помощью хуков

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

Функция wc_get_image_size используется в WooCommerce для получения размеров изображений. Возвращаемое значение передается через фильтр:

woocommerce_get_image_size_{SIZE_NAME_WITHOUT_WOOCOMMERCE_PREFIX}
При использовании этого хука вам будет передан массив размеров, похожих на этот:

[
    'width'  => 200,
    'height' => 200,
    'crop'   => 1,
]

Так, например, если бы я хотел изменить эскизы галереи на 150x150px необрезанные изображения, то можно было бы использовать следующий код:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    return [
        'width'  => 150,
        'height' => 150,
        'crop'   => 0,
    ];
} );

 

Мы не рекомендуем использовать плагины и темы в этом русле, так как это снимает контроль с владельца магазина и их настройки не будут соблюдаться, но для владельцев магазинов это вполне возможно.

Примечание: после внесения изменений в размеры изображений может потребоваться регенерация эскизов, чтобы новые размеры использовались для существующих изображений.

Изменение размеров изображений, используемых в WooCommerce, с помощью хуков.

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

Существуют следующие фильтры:

Фильтр	Описание	По умолчанию
single_product_archive_thumbnail_size	Контролирует размер, используемый в сетке/каталоге продуктов.	woocommerce_thumbnail
subcategory_archive_thumbnail_size	Управляет размером, используемым в сетке/каталоге продуктов для категорийных изображений.	woocommerce_thumbnail
woocommerce_gallery_thumbnail_size	Управляет размером, используемым в галерее продуктов, ниже основного изображения, для переключения на другое изображение.	Массив представляет разрешениеgallery_thumbnail размера изображения. Обычноarray( 100, 100 ).
woocommerce_gallery_image_size	Контролирует размер, используемый в галерее продуктов.	woocommerce_single
woocommerce_gallery_full_size	Управляет размером, используемым в галерее продуктов для увеличения или просмотра полноразмерного изображения.	full

Примечание: полный — это размер, зарегистрированный WordPress и установленный в Настройки > Медиафайлы.

В качестве примера, допустим, я хотел, чтобы размер эскиза галереи использовал размер эскиза, зарегистрированный WordPress, а не эскиз woocommerce_gallery_thumbnail. Следующий фрагмент сделает эту работу:

add_filter( 'woocommerce_gallery_thumbnail_size', function ( $size ) {
    return 'thumbnail';
} );

Примечание: Перечисленные выше хуки используются ядром WooCommerce. Если тема имеет собственные шаблонные файлы или использует собственные функции для вывода изображений, эти фильтры могут не использоваться.