Thumbnails WordPress – obrázky na vašom webe vo všetkých veľkostiach

Wordpress je skvelý CMS, hlavne začiatočníci sa s ním radi hrajú a objavujú jeho zákutia. Jednoduchým „naklikaním“ tém, pluginov a widgetov dokáže takmer každý vytvoriť pekný a blog, či nejakú jednoduchšiu stránku. Pre tých, ktorí sa dostali o krôčik ďalej, k thumbnailom, mám jednoduchý návod, ako ich efektívne používať. Budete k tomu potrebovať nejaký ten textový editor, jemnú zručnosť v php a editovaní súborov vášho webu na FTP.

Thumbnaily – zmenšeniny obrázkov, resp. v reči WordPressu – obrázky nastaviteľných veľkostí, ktoré sa generujú keď nahrávate v administrácii obrázok. Sú naozaj skvele použiteľné. Pomocou nich si môžete zrealizovať situáciu, pri ktorej nap. priradíte obrázok vášmu článku v 3 rôznych veľkostiach.

Zeditujte si súbor functions.php v adresári vašej témy. Ak ho nemáte, vytvorte si ho.

Do functions.php napíšte nasledovný kód:

add_theme_support( 'post-thumbnails', array('post','page') );
add_image_size('tiny_thumb', 150, 90, true);
add_image_size('thumb', 320, 200, true);
add_image_size('big_thumb', 640, 400, true);

Pomocou add_theme_support povolíme v našej téme používať funkciu „Set featured image“, pomocou ktorej jednoducho v administrácii zvolíme predvolený obrázok vášho článku, ktorý bude potom zmenšený do 3 veľkostí, ktoré nastavíme a nazveme funkciou add_image_size. Ja som zvolil názvy tiny_thumb, thumb, big_thumb, vy si ich môžete nazvať inak. Parameter „true“ na konci funkcie zabezpečí, že tieto obrázky budú „cropnuté“ a teda zmenšené (nie proporčne) do danej veľkosti. No a práve o to mi od začiatku šlo – nie proporčne. V administrácii WordPressu, v menu v sekcii „Media“ je možné 3 formátom zadať veľkosti, ale iba jednému je možné „proporčnosť“ vypnúť a zapnúť crop. Ak netušíte o čom to píšem, na konci sa dozviete.

Ak máte všetko potrebné v súbore functions.php, môžeme prejsť k testovaniu – nahrať a vypísať obrázky. Vytvorte si nový post. Obrázok k nemu sa priraďuje cez spomínaný „Featured Image“ v pravo dole. Kliknite na „Set featured image“ vyberte si nejaký vhodný obrázok a po nahratí obrázku kliknite dolu na „Use as featured image“ a následne na „Save all changes“. Potom popup okno ztvorte -obrázok sa objaví v pravo dole v administrácii (v okienku Featured Image). Poste uložte a zeditujte si single.php (slúži na vypísanie postov).

Nájdite si v kóde the_post() a niekde pod tento príkaz napíšte:

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'big_thumb');
if ($src[0]) { echo '<img src="'.$src[0].'" alt="'.get_the_title().'" />'; }

Všetky PHP príkazy musia byť (samozrejme) obalené <? a ?>. Keď si teraz otvoríte váš článok v prehliadači, vypíše sa vám najväčšia varianta obrázku, ktorý ste do článku vložili. Pre menšiu prepíšte v kóde big_thumb na thumb alebo tiny_thumb. Namiesto tohoto zložitejšieho zápisu je možné použiť the_post_thumbnail('big_thumb');, pri ktorom však nemáte možnosť manuálne zmeniť alt obrázku.

A to je všetko. Teraz si môžete ku každému článku nastaviť jeden obrázok a dať si vykresliť jeho zmenšeniny na rozličné miesta vašej témy. Jednoduché, účelné a efektné. Ak by ste použili WordPressom predvolené veľkosti medium a large, ich zmenšeniny budú proporčné a teda závisí od veľkosti uploadovaného obrázku, aký bude po zmenšení. Taktiež si to môžete vyskúšať a zistiť, čo vám viac sedí. Mne osobne táto metóda funguje všade, kde potrebujem. Mimochodom, ak si chcete zmeniť veľkosti obrázkov, budete ich musieť následne znovu vygenerovať, inak sa ich rozmery nezmenia. Na tento účel slúži jednoduchý plugin Regenerate Thumbnails.