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:

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.

Čtěte  Jak přidat favicon do vaší stránky

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 '<a href="' . $large_image_url[] . '" title="' . the_title_attribute('echo=0') . '" 
class="fancybox" >';
echo get_the_post_thumbnail($post->ID, 'thumbnail'); 
echo '</a>';
 }
Čtěte  Jak nainstalovat Woocommerce eshop plugin

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ů.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

11 Comments

  1. Adam

    Vždycky jsem to chtěl umět, ale byl jsem moc líný na to, abych si to někde vyhledal. Tak jsem raději používal šablony, které vložení obrázku umožňují defaultně :-) Super článek, šéfe.

    Reply
  2. Vladislav

    Dobrý den pane Musílku,

    děkuji za Vaše (video)návody.

    Je možné tímto pluginem přidat do ve WP profilu fotografii? V rámci WP-u je položka Uživatelé a tam možnost úprav profilu (není však tam možné nainstalovat fotku).

    Díky

    Reply
  3. Vladislav

    Ještě jednou děkuji.
    Vaše video-návody na You Tube jsou pro mně velice hodnotné.

    Reply
  4. Pavel

    Supr, konečně si upravím svoji oblíbenou šablonu o náhledové obrázky a nemusím je vkládat přímo v textu článku.

    Reply
  5. Pingback: Jak vytvořit vlastní šablonu pro Wordpress - 4 díl | Musilda.cz

  6. Honza

    Dobrý den,

    je možné přidat do příspěvku druhý náhledový obrázek s jinou velikostí, např. střední – medium?

    Děkuji mockrát.

    Reply
    1. Musilda

      Dobrý den

      aby bylo možné přidat do příspěvku druhý náhledový obrázek, je nutné použít plugin Multiple thumbnails a upravit šablonu.

      Reply
  7. duf

    Dobrý den, mohu nějak ovlivnit rozostření náhledu? To co z fotek udělá wordpress je dost nepěkně rozostřené s nepravdivými barvami – po načtení skutečné velikosti je ten rozdíl veliký. viz http://www.dufki.cz/obchod děkuji předem za radu

    Reply
  8. Pingback: WooCommerce nastavení zobrazování produktů - Musilda.cz

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.