Responsivní obrázky ve WordPressu

Přístupy na webové stránky z mobilních zařízeni přibývají, a redakční systémy se na tento trend snaží reagovat. U webových prezentací jsou možné dvě cesty, připravit speciální mobilní web, typicky na doméně, která začína m., nebo připravit resposivní web, který se přizpůsobí zařízení. Každá cesta má své výhody i nevýhody, ale do toho se dnes nebudu pouštět, vydáme se druhou cestou.

Redakční systém WordPress je v posledních verzích připraven jako responsivní a proto pokud použijete aktuální verzi s výchozí šablonou twentytwelwe, pak váš web bude fungovat dobře i na mobilních telefonech. Má to několik ale.

Obrázky na webu

Jak fungují obrázky na webu? Do článku vložíte html tag pro obrázek a ten se odkazuje na konkrétní velikost obrázku, např. 480 × 320 px. Při zobrazení z mobilního zařízení se zbytečně stáhne tento obrázek, přestože display má nižší rozlišení a potom se pomocí kaskádových stylů zmenší, aby se správně zobrazil. Z pohledu uživatele to funguje, ale vy jako tvůrce webu víte, že se přenáší zbytečné data, které zpomalují načítání stránky a zbytečně zatěžují jak klienta tak server. Ideální by bylo poslat fotografii už zmenšenou podle klienta.

Zmenšování fotografií je ale trochu problém, server neví komu poslat velkou a komu malou a klient v současné době žádnou relevantní informaci neposílá, podle které by se to dalo rozhodnout. Dalším problémem je chování klienta, může zmenšit okno, otočit mobilní zařízení a i tato událost může způsobit, že je třeba odeslat obrázek v jineém rozlišení.

Javascript vybere velikost

Tyto problémy se snaží vyřešit iniciativa http://www.w3.org/community/respimg/, která připravila návrh řešení. Návrh využívá html a javascript, ale má i záložní řešení bez javascriptu. Prakticky to znamená, že do html místo jednoho obrázku vložíme něco podobného následující ukázce:

<picture alt="Description of image subject."> <source srcset="small.jpg 1x, small-highres.jpg 2x"> <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x"> <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x"> <img src="small.jpg" alt="Description of image subject."> </picture>

Klient sám vyhodnotí aktuální šířku a zobrazí odpovídající obrázek. Pokud nemá javascript, pak se zobrazí ten, který je vložen pomocí tagu img.

Plugin PB Responsive Images pracuje za vás

Na první pohled to vypadá, že je to moc práce a že se to nevyplatí řešit. Naštestí existuje pro WordPress plugin PB Responsive Images, který udělá veškerou práci za vás. Pokud máte v příspěvku standardně vložené obrázky, pak je nahradí uvedenou syntaxí.

Instalace pluginu je docela jednoduchá, pro správnou funkci je důležité do .htaccess nezapomenout přidat řádek:

RewriteRule ^slir/(.*)$ /wp-content/plugins/pb-responsive-images/slir/index.php?r=$1 [QSA,L]

a pro adresář slir/cache v pluginu povolit zápis webovým serverem. Do tohoto adresáře se generují zmenšené obrázky. V nastavení modulu ještě můžete doladit velikosti obrázků a který obrázek se bude přenášet vždy. Tady opatrně, protože na mobilní zařízení nechceme přenášet zbytečně velké obrázky.

Ukázku nasazení můžete vidět např. na http://www.doousek.org/hudba/sona-jobarteh-jarabi, spodní fotografie se na mobilním zařízení načítá v jiném rozlišení než na klasickém webu.