Начало > Помощен център > Апликации > WordPress > WooCommerce - Размери на изображения

WooCommerce - Размери на изображения

Помощен център

WooCommerce - Размери на изображения

Изображенията на продуктите са жизненоважна движеща сила за продажби в онлайн магазин. Затова разработчиците на WooCommerce непрекъснато усъвършенстват инструментите за настройване на размерите и подобряване качеството на изображенията.

Част от този стремеж е добавянето в WooCommerce на настройки за изрязване (cropping) на изображенията, така че собствениците на магазини да могат да контролират ширината и височината на основните изображения.

На темите с поддръжка на WooCommerce се предоставя повече контрол върху настройките на изображението, за да се гарантира, че изображенията на продуктите изглеждат добре без допълнителна обработка.

Типове размери на изображения в WooCommerce

За да показва изображения в каталога, WooCommerce регистрира няколко размера на изображенията:

woocommerce_thumbnail се използва в 'решетките на продукта' (grid) на страницата на магазина. По подразбиране ширината на thumbnail е 600px във форма на квадрат, така че решетката с изображения да изглежда добре подредена. Съотношението на размерите за изрязване може да бъде персонализирано от собственика на магазина.

woocommerce_single се използва на страници с обикновени единични продукти. На продуктовата страница се зарежда изображението в пълен размер, по подразбиране ширината е до 600px.

woocommercegallerythumbnail се използва под основното изображение на продуктовата страница като част от галерията. Изображенията винаги са изрязани във форма на квадрат с размери по подразбиране 100 × 100 пиксела и се използват за навигация на изображения в галерията.

Въпреки, че действителните размери на изображенията са конкретно зададени, те могат да бъдат преоразмерени с помощта на CSS правила, а ширината на изображението може да се ограни и от ширината на съдържащия контейнер (

).

Дефиниране размерите на изображение в WooCommerce тема

Разработчиците на теми за WooCommerce вече могат да декларират размери на изображения чрез функцията add_theme_support.

WooCommerce темите може да дефинират размерите на изображенията при деклариране на WooCommerce поддръжка. Ако дадена тема дефинира размерите на изображенията (ширината), собственикът на магазина няма да може да ги промени, но определеният размер ще бъде оптимален за темата:

Дефиниране размерите на изображение в WooCommerce тема

Обърнете внимание, че в официалната WooCommerce тема Storefront размерите на изображенията се дефинират в различен файл (не в functions.php).

public function setup() {
      add_theme_support(
        'woocommerce', apply_filters(
          'storefront_woocommerce_args', array(
            'single_image_width'    => 416,
            'thumbnail_image_width' => 324,
            'product_grid'          => array(
              'default_columns' => 3,
              'default_rows'    => 4,
              'min_columns'     => 1,
              'max_columns'     => 6,
              'min_rows'        => 1,
            ),
          )
        )
      );
      add_theme_support( 'wc-product-gallery-zoom' );
      add_theme_support( 'wc-product-gallery-lightbox' );
      add_theme_support( 'wc-product-gallery-slider' );

      do_action( 'storefront_woocommerce_setup' );
}

Когато извикваме WordPress функции, които очакват размер на изображение (напр. wp_get_attachment_image_src), трябва да използваме имената на размера на изображението:

  • woocommerce_thumbnail;
  • woocommerce_single;
  • woocommercegallerythumbnail;

Собствениците на магазини все още ще могат да контролират съотношението ширина/височина на изображенията и изрязването (cropping) им.

Персонализиране размерите на WooCommerce изображения

Персонализаторът (customizer) съхранява опциите, които контролират умалените картинки в WooCommerce:

Персонализиране настройки на изображение в customizerс

Ако темата декларира размерите на изображението, горната част ще бъде скрита и ще се виждат само опциите за изрязване:

Опции за изрязване на thumbnails

  • 1:1 - изрязване във форма на квадрат;
  • Персонален - избор на собствено съотношение ширина/височина;
  • Без изрязване (uncropped) - запазване на оригиналното съотношение ширина/височина на изображението;

Промяната на опцията за изрязване или ширина на изображение автоматично актуализира визуализацията в дясния панел, за да покаже как ще изглеждат изображенията след промяната:

Настройка по подразбиране за изрязване на умалена картинка

За пример с избор на персонално съотношение на изрязване избрахме съотношение 2:1 за да бъде по-ясна разликата с предишното изображение, някои от най-разпространените формати, подходящи за уеб сайтове, са 3:2, 4:3, 8:5, 16:9... :

Персонална настройка за изрязване

Промените няма да бъдат видими за клиентите, докато промените не бъдат публикувани и умалените картинки не бъдат регенерирани до новите размери.

Автоматично оразмеряване на умалени картинки (thumbnails)

Освен поддръжката на теми (theme support) и настройките за изрязване, WooCommerce също така автоматично преоразмерява thumbnails. Преди при смяна изображението на продукт, WordPress не променяше размера на изображението и трябваше да инсталираме плъгин като Regenerate Thumbnails, който да извърши промяната.

Сега WooCommerce предлага два начина за оразмеряване на thumbnails - на момента (on-the-fly) при промяна на настройката в персонализатора (customizer) и оразмеряване като фонов (background) процес.

Когато променим настройките на изображението, WooCommerce стартира фонов процес, който автоматично преоразмерява всички изображения до новите размери.

Моменталното (on-the-fly) оразмеряване помага при визуално редактиране на страниците чрез персонализатора. Ако темата предоставя поддръжка, може да тестваме с различни размери на изображенията и настройките за изрязване от персонализатора и да видим резултатите незабавно.

Промяна размера на thumbnails в WooCommerce галерия

В настройките за персонализиране липсва конкретна опция за управление на умалените картинки (thumbnails) на галерията с продукти. Ако сме задали опцията за изрязване на thumbnails Без изрязване, те ще се зареждат пропорционално на размерите, с които са качени.

Ако искаме повече контрол върху размера на thumbnails в WooCommerce, може да коригираме техните размери като създадем филтър (код) и го въведем във файла functions.php на активната тема.

Кодът в примера ще промени размерите на thumbnails както следва: ширина (150 пиксела) и височина (150 пиксела):

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

Промяна размерите на thumbnails в WooCommerce галерия

След като добавим този код, трябва да инсталираме и стартираме плъгина Regenerate Thumbnails, за да преоразмерим нашите thumbnails на галериите в WooCommerce. За разлика от каталога и единичните изображения, този процес не е автоматизиран:

Регенериране на картинките с Regenerate Thumbnails

Ще разгледаме подробно работата на плъгина Regenerate Thumbnails в отделна статия.

Препоръчителен размер на WooCommerce изображения

Препоръката в документацията на WooCommerce е да качваме изображения с минимална ширина 800px. Качването на изображения с по-голям размер (напр. 1200px) ни позволява по-голяма гъвкавост ако в бъдеще решим да променим структурата на магазина.

Например, въвеждане на допълнителна точка на прекъсване (media break-point) за десктоп монитори с висока резолюция (1920 px ширина) ще увеличи ширината на контейнера, за което ще имаме нужда от по-широки изображения на продуктите.

Винаги може да намалим размерите на изображенията, но не може да ги увеличим без да жертваме качеството. Освен това, качвайки по-големи изображения имаме необходимия резерв за коректната работа на функцията увеличение (zoom).

Оптимизиране на изображения

Има редица услуги за оптимизиране на изображения като TinyPNG и Optimizilla, чрез които може да свалим допълнително няколко килобайта от файловия размер на нашите изображения. Но наградата за този труд е минимална и отнема много време.

Вместо това може да извършим две действия, които отнемат само няколко минути, и се отнасят за всяко изображение в нашия WooCommerce сайт:

  • Активиране на CDN с изображения;
  • Активиране на мързеливо зареждане (Lazy loading);

CDN (content delivery network - мрежа за доставка на съдържание) с изображения означава, че изображенията вече няма да се зареждат от нашия собствен сървър, a от най-близката точка на присъствие (point-of-presence), като облекчават натоварването и осигуряват много по-кратко време на зареждане.

Мързеливото зареждане (lazy loading) увеличава скоростта на зареждане на страницата, като не изтегля изображения, които са извън полето за преглед от посетителите на сайта и страницата се зарежда без да чака тези невидими изображения да бъдат изтеглени.

Активиране на CDN и Lazy loading в Jetpack

Най-лесният начин да активираме и двете функции е с помощта на плъгина Jetpack от разработчиците на WordPress и WooCommerce.

След инсталиране на плъгина отваряме Jetpack > Настройки и раздела Performance активираме опциите, показани на изображението:

Раздел Performance в настройките на Jetpack

Активиране на CDN и Lazy loading в Jetpack

Отваряме функцята Inspect Element (в браузърите Firefox и Chrome с клавиш F12) и откриваме доказателство за коректната работа на двете приложения - изображението се зарежда от поддомейн на wp.com (CDN) чрез атрибута data-lazy-loaded:

Доказателство за коректна работа на CDN и Lazy loading

Премахване на zoom и lightbox

Едно последно нещо, което може да направим, е да премахнем функциите lightbox (разглеждане на галерии в затъмнен фон) и zoom (увеличаване на изображенията) на единични продукти. Това намалява CSS и JS заявките към продуктовите страници, осигурявайки малко увеличение на бързината на магазина.

Добавяме следния код във файла functions.php на активната тема:

add_action( 'after_setup_theme', 'cg_remove_zoom_lightbox_theme_support', 99 );
function cg_remove_zoom_lightbox_theme_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
}

Ако желаем да премахнем само едната функция трябва да коментираме или изтрием съответния ред remove_theme_support...