Jak z článku vytáhnout náhledový obrázek

V rubrice: Tipy & Triky | Obtížnost:

Jestliže na webu používáte k upoutání čtenářovy pozornosti obrázky, určitě byste měli alespoň jeden přiřadit do článku jako náhledový. Využívají ho nejen některé šablony, ale například i sociální sítě, které ho zobrazí u odkazu.

Problém nastává, pokud jste například migrovali z jiné služby a obrázky nemáte ani uložené v médiích. Upravování by samozřejmě bylo časově velmi náročné.

Dnes si však ukážeme script, který dokáže v článku najít požadované obrázky. Následující funkce má jako vstupný parametr text, lépe řečeno obsah článku a vrací první obrázek, který nalezne.

function najdiObrazek($post_content) {
    preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post_content, $matches);
    if ($matches[1][0])
        return $matches[1][0];
    else
        return false;
}

A jak to vlastně použít v praxi? Určitě si vzpomínáte, na nedávný článek, kde jsem řešil, jak odladit facebook button. Náhledový obrázek můžeme získat takto:

$thumb = false;
global $post;
if (current_theme_supports('post-thumbnails')) {
    if ($a = wp_get_attachment_image_src(get_post_thumbnail_id(), array(500, 500)))
        $thumb = $a[0];
}
if ($thum == false)
    $thumb = najdiObrazek($post->post_content);
if ($thum == false)
    $thumb = $vychoziObrazek;

V proměné $thumb pak bude uložen náhledový obrázek, který můžete v hlavičce vypsat. A nezapomeňte nahrát funkci najdiObrazek do souboru šablony.

V rubrice: Tipy & Triky | Obtížnost:

Komentáře

  1. Hoj,

    měl bych dotaz. na stránce http://www.satanica.cz používám plugin WPZonBuilder, který přebírá produkty z Amazonu (to jen pro objasnění zakopaného psa).
    Plugin samotný obrázek od zboží uloží na server a nastaví ho jako náhledový obrázek. Ovšem problém je, že v příspěvku se obrázek tahá přímo z Amazonu. A tento obrázek je první. Následující obrázek je „More info“, který už je zase uložen u mně na serveru.
    V podstatě tedy náhledový obrázek nikde nefiguruje, prostě je vidět jen při editaci příspěvku. A teď v čem je problém. Také používám Simply Facebook Connect, díky čemuž mám „Like“, ale i automatické zveřejňování na Facebooku všech nových příspěvků. A tady je problém. Na FB se totiž posílá první obrázek ze serveru, tudíž tlačítko „More info“. Páč skutečný první obrázek není na serveru ale na Amazonu (obrázek zboží).
    Snažil jsem se předhodit náhledový obrázek pomocí meta tagu „og:image“, ale bezúspěšně. Tápu s tím už dva dny. Bez výsledku.
    A tak mně napadla jiná možnost: nějakým automatickým způsobem před samotný obsah příspěvku natvrdo narvat náhledový obrázek, takže by příspěvek vypadal tak, že bude náhledový obrázek a pod ním teprve příspěvek (samozřejmě, že tohle by vypadalo blbě, takže bych to pořešil width/height 1px). Předpokládám tedy, že by pak na FB šel právě tento náhledový obrázek.
    Otázka je, jak ho do toho příspěvku narvat? Máš nějaký tip?

    Snad jsem svůj problém popsal srozumitelně.

    1. ahoj,

      zkoušel bych to řešení pomocí og img. Facebook na tyto změny nereaguje rychle, nastavení vždy cachuje. Poměrně nedávno jsem tady o facebook like měl článek, kde je odkaz na nástroj, kde uvidíš případně chyby a který hlavně necachuje.

Comments are closed.