Visualizzare come miniatura la prima immagine di un post

WordPress consente fin dalla versione 2.9 di associare ad ogni post un’immagine in evidenza (se supportata dal tema in uso), da utilizzare come miniatura nella home e nelle pagine di archivio (vedi: La struttura di un tema WordPress). Per richiamare laminiatura è sufficiente inserire all’interno del loop la funzione the_post_thumbnail().

[banner336]

Molti temi però consentono di visualizzare come miniatura la prima immagine di un post. Sicuramente è meglio utilizzare le funzionalità di WordPress, ma può essere un’alternativa comoda nel caso non sia stata impostata alcuna immagine in evidenza. Vediamo come fare:

Innanzitutto nel file functions.php si deve inserire la funzione che si occupa di estrarre dal contenuto di un post l’indirizzo della prima immagine.

function get_first_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();

  //seleziono la prima immagine
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
       $post->post_content, $matches);
  $first_img = $matches [1] [0];

  //se non c'è un'immagine ne assegno una di default
  if(empty($first_img)){
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

A questo punto non resta da fare altro che richiamare la funzione get_first_image() all’interno dell loop (in index.php o archives.php). In questo caso, siccome vuole essere un alternativa alla miniatura di WordPress, prima si controlla se il post ha una miniatura associata e, in caso contrario, si usa la prima immagine.

if(has_post_thumbnail()) {
  the_post_thumbnail();
} else {
  ?>
    <img src="<?php echo get_first_image();?>" alt="<?php
        the_title(); ?>" title="<?php the_title(); ?>" />
  <?php
}?>

Fonte: wprecipes.com

Aggiornamento:

Se non si vuole visualizzare un’immagine di default, nel caso non ci sia alcuna immagine disponibile, allora il codice va modificato nel seguente modo.

Nella funzione get_first_image():

if(empty($first_img)){
    $first_img = "/images/default.jpg";
}

diventa

if(empty($first_img)){
    return NULL;
}

mentre nel template si deve inserire

<?php
if(has_post_thumbnail()) {
  the_post_thumbnail();
} else {
   $first_img = get_first_image();
   if($first_img) {
   ?> 
    <img src="<?php echo $first_img; ?>" alt="<?php
        the_title(); ?>" title="<?php the_title(); ?>" />
   <?php
   }
}?>
Precedente Rigenerare tutte le miniature senza ricaricarle: Regenerate Thumbnails Successivo WordPress 3.1.2 aggiornamento di sicurezza
  • sparajurij

    Ciao Niccolò,
    sempre utili le tue guide. Mi perdonerai l’ignoranza del neofita che mi spinge a disturbarti talvolta…
    Ho una sola domanda: se volessi che il loop non mi caricasse alcuna immagine nel caso in cui un post non avesse immagini associate? (il nostro è un blog di letteratura, non sempre ci sono copertine o foto)?
    Grazie,
    Sj

    • Ho aggiornato l’articolo con le modifche!

      • sparajurij

        Grazie!

        • This is a most usfuel contribution to the debate

  • sparajurij

    Purtroppo ho copiato e incollato il codice nel template, ma invece di visualizzarmi l’immagine mi restituisce una linea di codice sopra l’estratto, precisamente:
    $ f i r s t_i m g = g e t_f i r s t_i m a g e (); i f ($ f i r s t_i m g){ +il titolo del post + }

    (ho messo spazi per evitare che non lo leggesse)

    • Si, scusa, l’avevo modificato di fretta e c’era un’imprecisione nell’apertura/chiusura dei tag php. Ora dovrebbe essere corretto, anche se in questo momento non ho tempo di testarlo…

      • sparajurij

        Funziona! Grazie mille!

  • Federico

    Salve, non capisco dove devo inserire il codice (parte seconda) nel file index.php… quando lo inserisco provando ad accedere alla pagina iniziale ovviamente mi da errore.

    GRAZIE

    • Devi individuare il loop (che potrebbe anche essere in un altro file incluso all’interno di index.php) che solitamente inizia con un’istruzione while e inserirlo al suo interno.

  • Dettagliata guida e utilissima 🙂 grazie 🙂

  • Rob

    Ciao, molto interessante l’articolo!
    Mi stavo giusto ponendo tale problema in quanto mi ci sono imbattuto imparando ad usare wordpress (e i layout per tale piattaforma) per creare il mio prossimo blog.
    Volevo però chiedere un chiarimento se possibile: il codice da te proposto permette di utilizzare la prima immagine rilevata dalla funzione get_first_image all’interno del post. Presumo che l’immagine interna al post sia croppata e dimensionata in precedenza prima di inserirla nel post.
    Questa funzione quindi è ottima nel caso in cui l’immagine nel post e l’immagine da inserire per rappresentare il post nella index.php abbiano la stessa dimensione in larghezza. Ma se invece io volessi avere una index.php in cui nella larghezza della colonna volessi farci stare affiancate 3 immagini di 3 post differenti?
    Come faccio a impostare tramite codice una dimensione diversa per l’immagine presa dal post? è possibile?

    Ho letto che con la funzione the_post_thumbnail() prevista da wordpress è possibile impostare larghezza e altezza dell’immagine da inserire, ma nel caso del tuo codice come si potrebbe fare?

    Ti ringrazio anticipatamente per la risposta.

    • Normalmente conviene usare le thumbnail di wordpress. Questo articolo è molto utile nel caso si passa da un tema che non le supporta ad uno che le supporta. In tal caso, per non dover impostare la thumbnail in tutti i post già scritti, si può usare la prima immagine del post. Il tutto funziona bene solo se le immagini hanno lo stesso form factor. Se nel post ho un’immagine 400×300 e nella home le miniature sono 200×150, il rapporto è sempre 4:3 e si vedono correttamente. Il problema si ha quando il rapporto è diverso e l’immagine nella home compare schiacciata o allungata.

      Se stai lavorando su un blog nuovo, ti conviene usare direttamente le thumbnail di wordpress, impostando una grandezza ad hoc per quelle che vuoi affiancare nella home. Dai un’occhiata qui: http://codex.wordpress.org/Post_Thumbnails

      • Rob

        Ti ringrazio per il chiarimento!
        In effetti per il mio layout pensavo di adottare le thumbnails di wordpress.
        Eventualmente però se non ho capito male posso comunque inserire nella function.php la funzione utilizzando il controllo sulla presenza delle thumbnails per eventuali temi che farei in futuro per uso generale in modo che siano adatti ad entrambe le situazioni no?

        • Se sei uno sviluppatore di temi, allora conviene farlo, perché a priori non puoi sapere se il blog in cui viene messo il tema ha già tutte le thumbnails impostate.

  • Ho creato una sezione “articoli in evidenza” sul mio blog. La sezione mostra il titolo e un except dell’articolo. Io vorrei, invece, sapere se è possibile mostrare, al posto dell’estratto, “solo” l’immagine presente in quell’articolo. E’ possibile farlo? Grazie, Mario.

  • Ho inserito questo codice e ora visualizzo :Parse error: syntax error, unexpected ‘}’ in /membri/pensieridiognigiorno/wp-content/themes/altervista/functions.php on line 184

    Il mio blog http://pensieridiognigiorno.altervista.org/ non si vede più, non posso accedere, non so più cosa fare……e ora?

  • ArtikaTheBastet

    Ciao,

    potresti spiegarmi dove inserire il codice all’interno dei due files? Sono agli inizi col php…

    Grazie mille. 😀

  • Akai Ronin

    no

  • Akai Ronin