Abilitiamo il supporto alle thumbnails

Le features images (immagini in evidenza) o miniature dei post sono una caratteristica dei temi che permette agli utenti di selezionare un’immagine per ogni post nella schermata di modifica del post. In fase di realizzazione del nostro tema dobbiamo abilitarla (almeno che non partiamo da un framework o tema di base); per farlo dobbiamo utilizzare:

add_theme_support();

e passargli il parametro post-thumbnails nel file functions.php

add_theme_support( 'post-thumbnails' );

con il codice sopra, abilitiamo il riquadro “Immagine in Evidenza” nell’interfaccia di amministrazione. Per le immagini in evidenza è possibile aggiungere una dimensione con

add_image_size()

e registrare le nuove dimensioni che vogliamo, che verranno create a ogni caricamento analogamente alle dimensioni in miniatura o medie.

Vediamo ora, un codice da utilizzare con l’hook

after_setup_theme

per aggiungere una dimensione di immagine chiamata developress-slider scalata a 2000 x 300 pixel, aggiungiamo nel functions.php

add_image_size('developress-slider', 2000, 300);

A questo punto, abbiamo abilitato la caratteristica e ora dobbiamo visualizzarla nel nostro tema. Per visualizzare un’immagine all’interno del loop (nel template di pagina, ad esempio), utilizziamo:

the_post_thumbnail()

Se vogliamo aggiungere un controllo condizionale aggiungiamo:

has_post_thumbnail();

Utilizzato in questo modo, abbiamo la versione in miniatura dell’immagine ma, passando uno di questi parametri: thumbnail, medium o large, abbiamo l’immagine in formati differenti. In questo caso, passando come parametro developress-slider avremmo l’immagine scalata a 2000 x 300 px.

Possiamo anche passare una classe CSS (che deve essere già definita) per ottenere un altro stile:

the_post_thumbnail( 'medium', array( 'class' => 'develop-dark' ) );

Cosa è successo? con il codice sopra abbiamo aggiunto la classe develop-dark al tag img che viene generato come output da

the_post_thumbnail()

Possiamo anche aggiungere un controllo condizionale per avere conferma che ogni post abbia l’immagine in evidenza:

if ( has_post_thumbnail() ) {

     the_post_thumbnail();
}