Sicuramente avrete notato il box "Immagine in evidenza" quando scrivete un post. Questo box vi consente di caricare o scegliere un'immagine da associare al vostro post. Il supporto a questa funzionalità, chiamata thumbnail (ossia miniatura dell'immagine) deve essere abilitato nel vostro tema. In questo articolo vedremo appunto come gestire le thumbnail in WordPress.
Per abilitare il supporto alle thumbnail su tutto il vostro contenuto, aggiungete il seguente codice al vostro file functions.php
:
add_theme_support('post-thumbnails');
In alternativa potete abilitarle solo per i post:
add_theme_support('post-thumbnails', array('post'));
O solo per le pagine:
add_theme_support('post-thumbnails', array('page'));
Impostare la dimensione delle thumbnail
WordPress vi consente di impostare la dimensione delle thumbnail nelle sue Impostazioni (sotto la voce Media). Niente vieta tuttavia di farlo in modo esplicito:
set_post_thumbnail_size(100, 75);
Questo codice produrrà immagini larghe 100 pixel ed alte 75 pixel (con una proporzione di 4:3). Ma cosa succede se caricate un'immagine delle dimensioni di 100 x 150 ? In questo caso l'immagine verrà ridotta in modo proporzionale e l'immagine risultante sarà di 50 x 75. In alternativa potete impostare un ridimensionamento netto usando come terzo parametro true
:
set_post_thumbnail_size(100, 75, true);
Quest'impostazione taglierà l'immagine in modo da rispettarne le proporzioni. La thumbnail sarà sempre 100 x 75, ma i suoi margini verranno tagliati.
Usare le thumbnail
Potete usare le seguenti tre funzioni all'interno di un Loop di WordPress:
has_post_thumbnail()
restituiscetrue
se il post ha una thumbnail impostatathe_post_thumbnail()
visualizza una stringa con l'elemento <img> della thumbnailget_the_post_thumbnail()
restituisce (senza visualizzare) una stringa con l'elemento <img> della thumbnail
Una routine di base è la seguente:
if (has_post_thumbnail()) {
the_post_thumbnail();
}
che possiamo perfezionare fornendo una thumbnail predefinita nel caso il post non ne avesse una:
echo '<a href="', get_permalink(), '">';
if (has_post_thumbnail()) {
the_post_thumbnail();
}
else {
echo
'<img src="',
get_bloginfo('template_directory'), '/images/thumb-default.png',
'" width="100" height="75" alt="thumbnail" />';
}
echo '</a>';
Usi avanzati delle thumbnail
Due argomenti opzionali possono essere passati alle funzione the_post_thumbnail()
:
- Le dimensioni
- una stringa con
thumbnail
,medium
olarge
presa dalle impostazioni di WordPress - un array con la larghezza e l'altezza (es.
array(120, 90)
)
- una stringa con
- Un array associativo contenente gli attributi HTML
src
,class
,alt
etitle
Esempio:
the_post_thumbnail(
array(120, 90),
array(
'src' => 'image.jpg',
'class' => 'thumbnail',
'alt' => 'Testo alternativo',
'title' => 'Titolo'
)
);
Questo codice restituisce il seguente output:
<img width="120" height="90" src="image.jpg" alt="Testo alternativo" title="Titolo" />
get_the_post_thumbnail()
accetta invece tre argomenti, tutti opzionali. Il primo è l'ID del post corrente, mentre il secondo e il terzo corrispondono ai due argomenti di the_post_thumbnail()
.
Questa funzione può anche essere usata in quei Loop diversi da quello principale del vostro tema:
$query = new WP_Query(array('tag'=>'test', 'posts_per_page'=>-1));
if($query->have_posts()) {
while($query->have_posts()) {
$query->the_post();
$id = get_the_ID();
echo get_the_post_thumbnail($id,
array(100, 100),
array(
'alt' => get_the_title();
));
}
}
has_post_thumbnail()
accetta a sua volta come suo unico parametro opzionale l'ID del post corrente:
$id = get_the_ID();
if(has_post_thumbnail($id)) {
echo get_the_post_thumbnail($id,
array(100, 100),
array(
'alt' => get_the_title();
));
}