email
perm_phone_msg
forum

Кадрирование изображений в WooCommerce

Дурная голова ногам покоя не дает. Именно так нужно выразиться о последнем релизе модуля магазина WooCommerce. Что не так?

«В WooCommerce, с версии 3.3, вводится новая методика кадрирования и кропа изображений товаров». Что по мнению разработчиков позволит улучшить контроль за размерами изображений и превью. С этой версии, файлы кадрируются на лету.

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

Кадрирование и кроп изображений в WooCommerce 3.3

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

Принудительное кадрирование изображений в WooCommerce

1. Включение нового механизма кадрирования в теме

По заверениям разработчиков в данном варианте, все довольно просто. Начиная с WooCommerce 3.3, можно обновлять размер изображений с помощью функции add_theme_support. Объявление размеров будет иметь приоритет над любыми настройками, и даже скрытыми.

add_theme_support( 'woocommerce', array(
    'thumbnail_image_width' => 180,
    'single_image_width' => 600,
) );

Мы проверили данный хук на темах Flatsome и Claue — безрезультатно.


2. Кадрирование миниатюр

Новая секция кадрирования миниатюр позволяет выбрать одну из трех настроек:

Выбор кадрирования  в WooCommerce 3.3

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


3. Кадрирование изображение через function.php

C каталогом товаров мы разобрались выше, а как быть с изображением товара. Разработчики предлагают нам, две инструкции на github и обе они не сильно рабочие. И все рано, они там помогут:

Далее, мы вспомнаем по каким правилам ресайзились наши изображения до обновления. И добавляем следующую конструкцию в function.php вашей темы

add_filter( 'woocommerce_get_image_size_single', function( $size ) {
    return array(
        'width'  => 600,
        'height' => 600,
        'crop'   => 1,
    );
} );

,где size_single — изображение, а crop — принудительное кадрирование изображения в WooCommerce

Если в теме совмещенный размер миниатюр с wordpress, например в «кастомной» flatsome:

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

Конечным этапом будет пересоздание всех миниатюр из всех имеющихся на сайте изображений. Для этого мы используем Renegate Thumbnails. В зависимости от количества и размера изображений данная операция занимает от 5 минут до получаса

Запись опубликована: 04.04.2018

Оставьте контактный телефон и мы свяжемся с Вами

Ваше имя

Телефон