Náhledové obrázky, které se nově objevily ve WordPressu 2.9, toho sice na první pohled moc neumí, ale s pomocí několika drobných zásahů je možné jejich zobrazení v šabloně libovolně upravovat. Nejčastějším způsobem těchto úprav je obvykle zápis dodatečné funkce do souboru functions.php ve vaší šabloně, ale v tomto případě to ani není nutné a vystačíme si s úpravou funkce the_post_thumbnail() a doplněním HTML. Na žádost našeho čtenáře si v tomto článku ukážeme úpravu zobrazení náhledových obrázků tak, aby odkazovaly přímo na příslušný příspěvek a braly si z něj jeho název pro atributy alt a title.

Existují sice i pluginy, které mají více možností nastavitelných klikáním myši, ale vzhledem k tomu, že jsou náhledové obrázky novou součástí WordPressu, tak doporučujeme naučit se s nimi pracovat a používat je. Narozdíl od sebelepších pluginů tak máte jistotu, že budou do budoucna podporovány. Celý náš vytyčený úkol je třeba rozdělit na dvě části. Nejdříve půjde o zobrazení náhledového obrázku, respektive o úpravu jeho atributů alt a title, které si bere tato funkce bere defaultně přímo z Knihovny médií.

the_post_thumbnail( $size, $attr );

Základní tvar funkce the_post_thumbnail() má tedy dva parametry, velikost a další atributy. První je vcelku jasnýa druhý parametr využijeme pro naše účely (libovolný soubor šablony, kde se bude zobrazovat náhledový obrázek):

the_post_thumbnail( 'medium', array( 'title' => $post->post_title, 'alt' => $post->post_title, 'class' => 'alignleft' ) );

A to je vlastně všechno. Říkáme tím WordPressu, aby zobrazil náhledový obrázek ve střední velikosti (medium) a upravil atributy obrázku title a alt (převezmeme uvnitř loopu název příspěvku přímo z proměnné $post->post_title) a přidal mu také třídu .alignleft, která obvykle určuje, že bude obrázek zarovnán doleva (vše musí být samozřejmě správně nastylováno v šabloně).

Druhý problém, tedy obalení náhledového obrázku odkazem na článek, má dokonce více možných řešení. Jedním z nich je opět úprava šablony, kde před (a za) výpis náhledového obrázku pomocí funkce (parametry si samozřejmě můžete libovolně doplnit) the_post_thumbnail() přidáme jednoduché HTML odkazu s využitím funkce get_permalink().

<a href="<?php echo get_permalink( $post->post_id ); ?>">
<?php the_post_thumbnail(); ?>
</a>

Protože byste to ale museli dělat ve všech souborech šablony, kde se budou náhledové obrázky zobrazovat (obvykle index.php, archive.php, ale třeba i search.php a další) , tak existuje i elegantnější řešení, když vložíte následující (upravený) kód do souboru functions.php ve vaší šabloně:

add_filter( 'post_thumbnail_html', 'moje_vlastni_html', 10, 3 );
function moje_vlastni_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>';
return $html;
}

Využijeme tak filtru WordPressu a odkaz tak přidáme už k vygenerovanému HTML pro náhledový obrázek. Potom už nemusíte nikde nic vkládat do šablony a odkaz se objeví u všech výskytů náhledových obrázků na webu. Pokud máte s uvedenými příklady nějaké problémy či konkrétní dotazy, tak se klidně ozvěte v komentářích…

Linkovací služby:
  • Bookmarky.cz
  • Jaggni to!
  • Linkuj.cz!
  • MediaBlog.cz
  • MojeLinky.sk
  • TOPodkazy.cz
  • vybrali.sme.sk
  • Park.sk
  • Pozrisi.sk
  • TextTip.eu
  • Blogus.cz
  • Top Články.cz
 

12 komentářů u “Pokročilé úpravy zobrazování náhledových obrázků v šabloně”

  1. James napsal:

    Zdravím. Thumbnail se mi vždy ořízne na přesnou velikost. Což je OK .. ale pak dám na hlavní stránce ještě menší obrázek … pomocí the_post_thumbnail( array( 75, 75 ), .. jenže to se už jen obrázek zmenšuje .. tudíž když nemá správné proporce tak má velikost např .. 75, 68 .. lze to nějak vyřešit?

  2. Separatista napsal:

    Jestli tomu dobře rozumím, tak se pokoušíte udělat pravidelný čtvercový náhled z nepravidelného obrázku? Automaticky to logicky není možné (hodnoty funkce the_post_thumbnail jsou hodnoty maximální), ale verze 2.9 přišla s novým editorem obrázků právě pro tyto účely. Takže si tam náhled upravte na potřebné (čtvercové) rozměry a až pak ho použijte jako náhledový obrázek. Brzy by měl vyjít na našem webu konkrétní návod jak efektivně používat vestavěný editor obrázků…

  3. James napsal:

    Přesně tak to myslím .. v tom případě chudáci moji redaktoři. :-D Ale thumbnail do příspěvku se vždy ořízne v pohodě ;-) .

  4. James napsal:

    Ještě dotaz lze donutit wordpress aby si zmenšil právě oříznutý thumbnail. Prostě aby použil na zmenšení thumbnail … To je třetí velikost obrázků u článků, co si grafik vymyslel :-D

  5. Separatista napsal:

    Heh, tak to jsem opravdu nepobral :-( Zkus to trochu rozvést…

  6. James napsal:

    Promiň. NEdivím se :-D . V Nastavení médíí mám nastavený jak se má oříznout Náhled .. (obdélník) – to se vkládá do článku. Pak tedy ten čtverec na hl. stránce .. jak jsi mi poradil .. a pak mám mít ještě někde takový obdélníček .. tak jestli nejde donutit Wordpress aby zmenšil ten z článku (náhled) .. jelikož takhle se mi tam zmešuje ten čtverec akorát menší … pomocí zadání výšky, šířky samotné. Chjo asi taky nepochopitelné že? :-( (

  7. Separatista napsal:

    Už je to trochu lepší :-) Zkus využít v menu Nastavení – Média – Střední velikost obrázku. To pro tebe bude náhled (specifikuješ mu potřebné maximální rozměry) a Náhled pro tebe bude vlastně ještě menší velikost. Všechny velikosti se vygenerují automaticky při nahrávání obrázku. A pak si můžeš ještě vytvořit v editoru čtverec (a nebo nahrávat už čtvercové originální obrázky). A nebo jsme se zase možná nepochopili :-)

  8. James napsal:

    Mno je ale ta střední velikost jsou zase jen maximální hodnoty. Jen náhled se ořezává, ne? Možná byl lepší ten timthumb .. jenže ne a ne ho rozchodit :-( .

  9. Separatista napsal:

    Asi si možná pořád nerozumíme. Zkus to pořádně popsat – hlavně to, čeho chceš dosáhnout. Při nahrání obrázku se vygeneruje Náhled, Střední velikost i Velký obrázek (+ tam bude samozřejmě originál). Vygenerují se podle nastavených maximálních rozměrů. Potom můžeš obrázek upravit na čtvercový rozměr, změnit jeho velikost a použít jako náhledový obrázek. Stejně se ve všech možnostech dostaneš pouze k jedné variantě – Buď budeš nahrávat už předem čtvercový originální obrázek, nebo ho budeš muset na čtverec upravit po nahrání ve WordPressu. protože jinak z něj prostě čtverec nedostaneš :-) Jde to samozřejmě i automaticky (při nahrávání udělat čtverec), ale to není ideální, protože to pak ořezává automat a opět všechny velikosti najednou. Ale není podle mě jiné řešení, jak skloubit čtvercové a obdelníkové obrázky z jednoho originálu (jedině snad nahrávat dva originály – jeden obdelníkový a jeden čtvercový)…

  10. James napsal:

    No klidně oříznuté automatem :-D to jsou malé obrázky .. Zkusím ještě ten TimThumb …

  11. dino napsal:

    a čo video? exisuje aj pre video nieco ako pre obrázky potrebujem aby vzdy na zaciatku prispevku objavilo automaticky sreenshot z videa kedze ide o videogaleriu

  12. Separatista napsal:

    dino: U videa je to mnohem složitější. Automatické náhledy z videa umějí myslím v některých případech některé pluginy, jinak to lze dělat s podporou FFmpeg na serveru. Pokud se na něco podobného necítíš a máš jen několik videogalerií, tak bych ty náhledy asi udělal ručně a nahrál je jako náhledové obrázky. Ale pokud má někdo jiné řešení, tak se rád něčemu přiučím…

Vložit komentář