Големите картинки, заемащи почти целия екран от доста време са на мода, но освен да впечатляват потребителя, те могат и доста да го изнервят докато чака да се заредят. Проблемът става съвсем явен когато потребителя разглежда сайта на екрана на телефона си, особено ако на мястото на което се намира няма 3G покритие. За решаването на този проблем на помощ идват отзивчивите картинки.
Годината е вече 2016та, най-популярните браузъри от доста време поддържат srcset, sizes и picture, така че няма причина да не ги използваме. А с новата версия 4.4 на WordPres това е още по-лесно. Не че с предишните беше трудно, просто трябваше да се инсталира разширението RIGC Responsive Images.
И така, постановката е проста, в горната част на сайта, под главата или като част от нея, искаме да поставим голяма картинка, която да заема цялата ширина на екрана. Освен това сайтът ще е с отзивчив дизайн, все пак е 2016 година вече. До тук нищо сложно, но като погледнем картинката с пропорции 16:9 на екрана на телефона в портретен режим и виждаме, че нещо е е така. Тогава сигурно бихме искали картинката също да е в портретен режим или поне да отива към квадрат, може би да увеличим основния елемент в нея. За да решат този проблем, хората от Responsive Images Comunity Group измислиха елемента picture.
Веднага ви давам пример:
<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=""> </picture>
Браузърите, които поддържат picture, ще заредят първия елемент source, в чийто атрибут media е посочена медийна заявка, отговаряща на устройството на потребителя. Браузърите, които не поддържат picture просто ще покажат елемента img.
За да направим заглавната картинка в WordPress да използва елемента picture първо трябва да накараме WordPres да създава варианти на картинката с необходимите ни размери:
function image_sizes() {
add_image_size( 'image-big', 1920, 1080, true );
add_image_size( 'image-medium', 1024, 768, true );
add_image_size( 'image-small', 480, 480, true );
}
add_action( 'after_setup_theme', 'image_sizes' );
След това идва интересната част. Тук предполагам, че темата вече поддържа custom-header. В предишните версии на WordPress заглавната картинка се показва обикновено с функцията header_image(). Но в най-добрия случай с тази функция ще получите img елемент с атрибути srcset и sizes, което не е това, което искаме. За да можем да използваме дефинираните от нас размери на картинки първо трябва да вземем ID на картинката и след това да използваме wp_get_attachment_image_src() за искания размер. Ако търсите начин да вземете ID на заглавната картинка в codex-а, няма да намерите (поне аз не успях), но един преглед на кода на WordPress веднага ще ви посочи get_custom_header() като решение на проблема. Накрая получаваме това:
<?php $header = get_custom_header(); ?> <picture> <?php $src = wp_get_attachment_image_src()( $header->ID, 'image-big' )[0]; ?> <source media="(min-width: 1024px)" src="<?php echo esc_attr($srcset); ?> /> <?php $src = wp_get_attachment_image_src()( $header->ID, 'image-medium' )[0]; ?> <source media="(min-width: 480px)" src="<?php echo esc_attr($srcset); ?> /> <?php $src = wp_get_attachment_image_src()( $header->ID, 'image-small' )[0]; ?> <img src="<?php echo esc_attr($src); ?>" /> </picture>
Това е добре, но има един недостатък – една и съща картинка се сервира при доста голям диапазон от размери на екрана и съответно в доста случаи ще натовари клиента с излишен трафик и браузъра с по-тежко преоразмеряване на голяма картинка. Решението е на всеки source елемент вместо една картинка със src да подадем набор от размери чрез srcset. Тук на помощ идва функцията wp_get_attachment_image_srcset, която е нова в WordPress 4.4, в по-ранни версии може да се използва чрез разширението RICG Responsive Images. Тя връща srcset атрибут със всички дефинирани размери картинки със същата пропорция като подадения като втори параметър размер.
<?php $header = get_custom_header(); ?> <picture> <?php $srcset_value = wp_get_attachment_image_srcset( $attachment_id, 'header-image-small' ); $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : ''; ?> <source media="(min-width: 1024px)" <?php echo $srcset; ?> /> <?php $srcset_value = wp_get_attachment_image_srcset( $attachment_id, 'wide-big' ); $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : ''; ?> <source media="(min-width: 600px)" <?php echo $srcset; ?> /> <?php $srcset_value = wp_get_attachment_image_srcset( $attachment_id, 'square-medium' ); $srcset = $srcset_value ? ' srcset="' . esc_attr( $srcset_value ) . '"' : ''; ?> <source <?php echo $srcset; ?> /> <img src="<?php echo esc_attr(wp_get_attachment_image_src($attachment_id, 'header-image-base', false)[0]); ?>" /> </picture>
И така получаваме картинка в главата, която наистина реагира на размера на екрана, с още малко усилия може да подавате различни картинки за различна ориентация при една и съща ширина на екрана. И при това без да изразходвате безплатните мегабайти от плана на потребителя.
Малко полезни разширения
Вече споменах RIGC Responsive Images, официалното разширение добавящо поддръжка за отзивчиви картинки в WordPress. От версия 4.4 вече е част от самия WordPress, но можете да го използвате, за да активирате лесно picturefill или заради добавянето на подобрена компресия на картинките.
Докато работите върху сайта и се опитвате да прецените какви точно пропорции на картинките ще подхождат на различните екрани и какви размери картинки да генерирате, неизбежно ще ви се наложи да променяте набора от размери, които искате WordPress да генерира. Тогава на помощ идват разни разширения, които регенерират различните размери картинки. След няколко проби аз се спрях на Image Regenerate & Select Crop.
Когато започнете да качвате картинки бързо ще забележите, че автоматичното оразмеряване не винаги работи добре и често ще имате нужда ръчно да отрежете картинка така, че да се вижда най-добре дадена част от нея. Тук на помощ идва Manual Image Crop – това разширение ви позволява ръчно да изберете как да се отреже всеки регистриран размер на картинката.
