WordPress: guida alle thumbnail e al loro uso

Short link

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:

  1. has_post_thumbnail() restituisce true se il post ha una thumbnail impostata
  2. the_post_thumbnail() visualizza una stringa con l'elemento <img> della thumbnail
  3. get_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():

  1. Le dimensioni
    • una stringa con thumbnail, medium o large presa dalle impostazioni di WordPress
    • un array con la larghezza e l'altezza (es. array(120, 90))
  2. Un array associativo contenente gli attributi HTML src, class, alt e title

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();
							));
}