Pokročilé úpravy zobrazování náhledových obrázků v šabloně

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…

Nejoblíbenější hosting pro WordPress WEDOS.cz

26 thoughts on “Pokročilé úpravy zobrazování náhledových obrázků v šabloně”

  1. 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. 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. 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. 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. 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? :-((

  6. 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 :-)

  7. 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 :-(.

  8. 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ý)…

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

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

  11. 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…

  12. Mám plugin galerie, na výpise homepage je vše jak má být….. v detailu je ale vše bez obrázku… už si nevím rady… poraďte.. děkuju

  13. Michal-kv: Jaký plugin galerie? NextGen Gallery? Díval jsem se na web a je to opravdu zajímavé – HTML je stejné, ale v detailu příspěvku je to opravdu bez obrázku. Používáš opravdu náhledové obrázky (součást WordPressu) nebo ještě nějaký plugin, např. Volitelné obrázky? Upravoval jsi nějak výchozí šablonu Twenty Ten? Těžko říci, kde by mohl být problém, pokud na to nepřijdeš, tak se ozvi na email pavelevap@separatista.net (a pošli přístupové údaje).

  14. Zdravým měl bych k tomu jeden zajímavý dotaz jdou použít i obrázky z interních galerií nechce se mi ty obrázky zrovna moc ukládat na můj server.

  15. Ati: Co máš na mysli obrázky “z interních galerií”? Jako náhledový obrázek můžeš použít jakýkoliv obrázek nahraný v Knihovně médií ve WordPressu, ale některé pluginy ji umí také využívat, takže lze myslím zvolit např. i obrázky z NextGEN Gallery a dalších (možná i externích) služeb, záleží na tom, co vlastně potřebuješ…

  16. Bylo by dobré kdyby ten obrázek šel nalinkovat i z URL a ne jen z Knihovny médíí – jak psal Ati – nechce se mi zrovna moc ukládat obrázky na svůj server.
    Q: Jde to nějak?

  17. LuCain: Nepřijde mi to jako moc dobrý nápad, sám mám raději všechno u sebe na serveru, protože když ten nalinkovaný obrázek někdo zruší, tak budete mít problém… Ale zpět k dotazu…

    A: Jednoduše ne. Je to sice možná v plánu do některé z budoucích verzí WordPressu, ale zatím mě napadá pouze řešení, které to trochu “obejde”. Můžete si založit uživatelské pole “externi_nahledovy_obrazek” a když bude vyplněné (vložená URL adresa obrázku), tak ho budete v šabloně zobrazovat. Pokud pole vyplněné nebude, tak budete zobrazovat klasický náhledový obrázek.

  18. pravd.a má to svoje výhody i nevýhody … osobně to teda řeším kombinací s Custom Field Images pluginem …

Napsat komentář

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