Náhledové obrázky ve WordPressu

Post thumbnails, featured images, nebo česky – náhledové obrázky, je vylepšení, které je ve WordPressu od verze 2.9 a za tu dobu se už stalo běžnou součástí šablon, především u magazínů, které obsahují náhled u každého článku . V dnešním návodu si ukážeme, jak náhledové obrázky do šablony přidat a jak je upravovat.

Podpora náhledových obrázků v šabloně se aktivuje pomocí funkce, kterou přidáme do functions.php

add_theme_support( 'post-thumbnails' );

Po přidání se nám u editoru stránky, nebo článku objeví nový metabox

Pokud tomu tak není, zkontrolujte, zda máte v povolení zobrazovaných informací zaškrtnutý náhledový obrázek.
Po kliknutí na „Zvolit náhledový obrázek“ se vám otevře klasický dialog pro nahrání obrázku.

Zobrazení thumbnail v šabloně

Pokud jsme přidali náhledový obrázek ke článku, musíme se také postarat o to, aby se nám v šabloně zobrazoval. Toho dosáhneme jednoduchým zápisem:

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 

Tedy – pokud jej šablona podporuje, zobraz náhledový obrázek. WordPress používá čtyři základní velikosti pro náhledové obrázky, a to thumbnail – 150 x 150 pixelů, medium – 300 x 300 pixelů, large – 640 x 640 a full – plná, neupravená velikost. Pokud použijeme v šabloně the_post_thumbnail(), automaticky se nám zobrazí velikost 50 x 50 pixelů. Pro zobrazení jiné velikosti použijeme the_post_thumbnail(‚large‘).

Změna defaultní velikosti

Pokud nám základní velikost nevyhovuje, můžeme ji změnit použitím set_post_thumbnail_size:

set_post_thumbnail_size( 50, 50 );

Vytvoření vlastních velikostí

Samozřejmě, že nám tyto velikosti nemusí vyhovovat a budeme potřebovat vygenerovat si vlastní. Pro to nám poslouží funkce add_image_size(). Ta používá čtyři parametry – jméno, šířku, výšku a oříznutí.

add_image_size( $name, $width, $height, $crop );

Pokud si tedy budeme chtít definovat například pro výpis kategorie náhledový s odlišnými velikostmi, vložíme do functions.php:

add_image_size( 'kategorie', 300, 250 );

Parametr pro oříznutí je defaultně nastaven na false, jeho význam si vysvětlíme níže.
Náš definovaný náhledový obrázek si v šabloně zobrazíme:

if ( has_post_thumbnail() ) {
	the_post_thumbnail('kategorie');
} 

Oříznutí obrázku – crop mode

Parametr $crop funkce add_image_size definuje, jakým způsobem se bude náhledový obrázek generovat.
Může mít dvě hodnoty a to true a false.
Hodnota false je defaultní a obrázek je vždy zmenšen na největší definovaný rozměr a zbytek je odříznut. Pokud použijeme předchozí příklad, tak pokud nahrajeme obrázek 1000 x 500 px, tak jej WordPress zmenší na největší možnou velikost – tedy pokud by jej zmenšil na 300px šířky, výška by pak byla 150px a část obrázku by chyběla. Proto jej tedy zmenší na šířku 500px a výšku 250px. Následně jej pak ořízne na 300 x 250 px.
Hodnota true znamená, že se z obrázku prostě vyřízne obrázek s definovanou velikostí. Obrázek se nijak nezmenšuje.

Přidání class a úprava alt

Funkce the_post_thumbnail() má kromě parametru $size, také parametr $attr, v kterém jsou obsaženy:

• src – adresa obrázku
• class – css třída
• alt – alt obrázku

Pokud nemáte potřebu nic upravovat, můžete tento atribut vynechat, ale pokud chcete některé náhledové obrázky upravit, můžete postupovat takto:

$attr = array(
             class => 'moje-trida',
             alt   => 'Super obrázek'
);
the_post_thumbnail('kategorie', $attr);

Zobrazení náhledového obrázku mimo loop

Jen pro připomenutí, loop je v podstatě smyčka, kterou WordPress používá pro výpis obsahu stránky/článku/kategorie/archívu. Vše co je mezi if (have_posts()) : while (have_posts()) : the_post(); a endwhile; endif; je uvnitř loopu. Funkce the_post_thumbnail() funguje pouze uvnitř tohoto loopu. Pokud budete chtít vypsat náhledový obrázek v jiné části šablony, použijte :

get_the_post_thumbnail( $post_id, $size, $attr );

Oproti the_post_thumbnail() je zde rozdíl v nutnosti použít $id_post, jinak je užití identické.

Získání id náhledového obrázku

Někdy se můžete dostat do situace, kdy potřebujete získat id náhledového obrázku. Pak použijte funkci:

$post_thumbnail_id = get_post_thumbnail_id( $post_id );

Klasický příklad, kdy se vám bude id obrázku hodit, je zobrazení náhledových obrázků, které se mají otevřít v nějakém fancyboxu, či lightboxu:

if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '';
echo get_the_post_thumbnail($post->ID, 'thumbnail'); 
echo '';
 }

Změna velikostí již vložených náhledových obrázků

Pokud upravujete již použitou šablonu, tak po přepsání velikosti ve functions.php se nic nestane. To je proto, že WordPress ukládá náhledové obrázky vždy, když jej nahráváte. Proto musíte použít některý z pluginů, který vygeneruje thumbnails znovu. Já používám Regenerate thumbnails a mohu jej vřele doporučit.

A to by o náhledových obrázcích mohlo být vše. V některém z dalších článků se pokusím sepsat návod na to, jak přidat další náhledové obrázky, tak aby nebyl pouze jeden. Jako příklad uvedu šablonu od Themes4all.com Easyblog, kde jsou multiple thumbnails použity pro efekt několika obrázků ve výpisu článků.