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

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

Переменные регистрируемые WordPress`ом (задаются во вкладке Настройки -> Медиафайлы):

• thumbnail - Размеры миниатюр
• medium - Средний размер
• large - Крупный размер

Переменные, регистрируемые WooCommerce`ом:

• woocommerce_thumbnail - используются там, где продукты выводятся сеткой, например, на странице категории
• woocommerce_single - используется на странице продукта
• woocommerce_gallery_thumbnail - для миниатюр в галерее на странице продукта

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

woocommerce_gallery_thumbnail - всегда обрезано 1:1, то есть квадратное изображение. По-умолчанию это 100х100px. Используется как пиктограммы для навигации в галерее.

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

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

Задать размер изображения в functions.php

Начиная с WooCommerce 3.3.0, тема может задать размеры изображений при объявлении поддержки WooCommerce. Обычно это делают в файле темы functions.php.

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

Когда вызывается функция, ожидающая в качестве аргумента размер изображения, (например, wp_get_attachment_image_src( int $attachment_id, string|array $size = 'thumbnail', bool $icon = false )), можно использовать имена размеров изображений:

• woocommerce_thumbnail
• woocommerce_single
• woocommerce_gallery_thumbnail

Можно при этом контролировать пропорции и обрезку (Об этом далее).

Задать размер изображения в настройках темы

Можно указать размер изображений и пропорции в админке, на вкладке настроек темы:

Если настройки изображений заданы через functions.php, то на этой странице можно задать только пропорции.

Когда меняются настройки пропорций или ширина, справа обновляется предпросмотр. Эти изменения применяются после нажатия кнопки "Опубликовать" и запуска функции "Regenerate Thumbnails", которая стала частью WooCommerce начиная с версии 3.3.0 (Ранее надо быть ставить дополнительный плагин).

Тут есть три варианта обрезки:

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

Изменить изображение через Хуки

Тема может задавать ширину изображения, а владелец сайта может контролировать ширину и пропорции. Если нужно больше контроля над размерами миниатюр, есть некоторые дополнительные Хуки.

Для получения размеров изображений WooCommerce использует функцию wc_get_image_size().

Возвращаемое ею значение проходит через фильтр woocommerce_get_image_size_{SIZE_NAME_WITHOUT_WOOCOMMERCE_PREFIX}

Можно передать в этот хук массив с размерами, например такой:

array(
  'width' => 200,
  'height' => 200,
  'crop' => 1,
)

Например, если хотите изменить миниатюру в галерее (gallery thumbnails) на 150х150px без обрезки, нужно добавить следующий код:

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

Этот метод не рекомендуется использовать, потому что он переопределяет настройки, заданные владельцем сайта.

Список Хуков, меняющих размеры изображений

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

full - размер зарегистрированный в WordPress (Настройки -> Медиафайлы)

Для примера, изменим миниатюры в галерее используя размер thumbnail, зарегистрированный в wordpress место woocommerce_gallery_thumbnail:

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

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

Создать свой размер изображения

Однако можно создать и использовать свои размеры изображений с помощью функции add_image_size( $name, $width, $height, $crop ). Допустим, нам нужно вывести в корзине миниатюры особого размера - 60 х 60 px, который больше нигде не встречается на сайте.

В этом случае, добавим в файл function.php следующие строки

add_image_size( 'cart_image_size', 60, 60, false );

А в шаблоне корзины cart.php мы видим, что у вывода миниатюры есть фильтр

$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image( ), $cart_item, $cart_item_key );

Воспользуемся фильтром добавив в файл functions.php следующий код:

add_filter( 'woocommerce_cart_item_thumbnail', function( $image, $cart_item, $cart_item_key ){
    $product = $cart_item['data'];
    return $product->get_image( 'cart_image_size' );
}, 3, 100 );

Теперь миниатюры стали нужного размера.