Scopo di questo articolo è quello di dare informazioni dettagliate su come gestire le dimensioni delle immagini in WP con la funzione add_image_size () e, con esempi, verificare le opzioni disponibili per questa funzione.

Indice paragrafi:

I formati immagine di WordPress

Capire il dimensionamento delle immagini WP

Dimensioni predefinite delle immagini e filenaming

Come attivare il supporto per l’immagine in evidenza

Aggiungere formati immagine con add_image_size()

Utilizzo avanzato di the_post_thumbnail()

Rimozione dei formati immagine predefiniti WP

I formati immagine di WordPress

Quando si carica un’immagine attraverso i media Uploader (Aggiungi Media) nel post editor, o direttamente nella libreria multimediale tramite il menu Bacheca> Media> Aggiungi nuovo, WordPress crea automaticamente più versioni dell’immagine durante la fase di “macinatura…[crunching]” del processo di caricamento, e crea queste versioni sul server:

  • Miniatura (thumbnail)
  • Media
  • Grande
  • Dimensioni originali (se più grande delle dim. ‘grande’ di cui sopra)

 

Le dimensioni di default delle immagini sono impostate in Bacheca>Impostazioni>Media (vedi screenshot) e, per impostazione predefinita, sono impostate come segue:

Impostazioni WordPress media (Dashboard> Impostazioni> Media)

1) Impostazioni WordPress media (Dashboard> Impostazioni> Media)

  • L’impostazione predefinita Dimensione miniatura è 150px x 150px (con un’opzione di ritaglio, di cui parleremo più avanti)
  • L’impostazione predefinita Medium Size è larghezza massima 300px, altezza max 300px
  • L’impostazione predefinita Large Size è larghezza massima 1024px, altezza max 1024px

Capire le opzioni di dimensionamento media WP

WordPress utilizza due metodi per ridimensionare le immagini: un metodo di ritaglio ‘duro’ (hard crop) e uno ‘morbido’ (soft-crop o box-resize). Il formato immagini medie e grandi utilizzano il metodo “box-resize”, il che significa che la dimensione dell’immagine viene ridotta fino a quando la maggiore delle dimensioni (orizzontale o verticale) si inserisce all’interno del “box” determinato dalla “Larghezza massima” e “Altezza massima”. Vediamo alcuni esempi …

Ipotizziamo di caricare un’immagine che è 600px di larghezza per 600px , l’immagine taglia M creata sarà 300px per 300px. Questo ha senso, dato il rapporto di formato 1: 1. (Vedi imm. sotto)

medium-600-600

Tuttavia, se l’immagine originale è 300px di larghezza per 600px di altezza, siccome la maggiore delle dimensioni in questo caso è l’altezza, l’immagine viene ridotta in modo che l’altezza si inserisca all’interno del box che ha altezza massima di 300px (vedi configurazione di default). Le proporzioni originali sono conservate, quindi l’immagine taglia M risultante sarà 150px di larghezza per 300px di altezza. (Vedi imm. sotto)

medium-150-600

Allo stesso modo, se carichiamo un’immagine originale di 300px X 600px di larghezza, l’impostazione “larghezza massima” ha la prevalenza e determina un ridimensionamento a 150px X 300px di larghezza. (Vedi imm. sotto)

medium-600-150

In altre parole, l’immagine originale viene ridotta fino inserisce all’interno del “box” 300px da 300px – da qui il termine “box resize”.

E ‘importante notare che “box resize” viene sempre usata per medie e grandi dimensioni. Ciò significa che l’immagine è sempre ridimensionata per adattarsi all’interno del “box” e non si verifica alcun ritaglio . Nota : la casella contorno blu negli schemi di cui sopra rappresenta questo “box”.
Invece, l’impostazione Miniatura può utilizzare il metodo “box resize” o, se la casella “Ritaglia” è selezionata, il metodo “hard crop”, il che significa che la miniatura risultante sarà sempre dimensionata come da specificato dalle impostazioni Larghezza e Altezza. Il ritaglio avverrà certamente per immagini non proporzionali alle dimensioni indicate nelle impostazioni. Questa impostazione, se da un lato può apparire eccessivamente stressante, dall’altro consente un controllo assoluto sul layout delle nostre pagine che risulteranno certamente più pulite ed ordinate, in particolare le pagine “elenco” dove tutte le miniature saranno perfettamente allineate. In conseguenza di questi ragionamenti è quindi buona norma uploadare immagini che rispecchino le proporzioni utilizzate nel nostro tema in modo da non avere risultati scomposti ed inattesi.

Dimensioni predefinite delle immagini e filenaming

Come accennato in precedenza, le dimensioni in PX delle immagini risultanti dal ridimensionamento sono aggiunte al nome originale del file per creare i nomi dei file per le tre dimensioni.

Ad esempio, il caricamento di un file immagine di 1200px x 1200px di nome img.jpg si tradurrà in 3 file che vengono salvati nella cartella wp-content/uploads, in aggiuntiva al file originale:

  • La versione Dimensione miniatura verrà chiamata img-150 × 150.jpg
  • La versione Medium Size si chiamerà img-300 × 300.jpg
  • La versione Large Size si chiamerà img-1024 × 1024.jpg

Si noti che, nell’esempio di cui sopra, le dimensioni delle immagini conservano il rapporto di 1: 1 aspetto dell’immagine originale (1200px x 1200px), in questo caso dunque c’è corrispondenza esatta fra la dimensione “media” creata (img-300 × 300.jpg) e il default della dimensione media come da impostazioni ma nella maggior parte degli esempi reali la proporzione dell’immagine originale uploadata non sarà 1: 1, il che significa che le dimensioni degli allegati saranno diverse da quelle sopra indicate.

La seguente tabella fornisce alcuni altri esempi variando le dimensioni delle immagini originali, ipotizzando di avere impostato i valori di default (Bacheca> Impostazioni> Media) come visto sopra in immagine 1

Es: Dimensioni originali
larghezza x altezza		 Multimedia predefinito Le immagini create sul server
1. img.jpg, 1200px x 1200px Thumbnail
Medio
Large
Full Size		 img-150 × 150.jpg
img-300 × 300.jpg
img-1024 × 1024.jpg
img.jpg
2. img.jpg, 900px x 900px Thumbnail
Medio
Large
Full Size		 img-150 × 150.jpg
img-300 × 300.jpg
–
img.jpg
3. img.jpg, 500px x 250px Thumbnail (ritaglio deselezionato)
Medio
Large
Full Size		 img-150 × 75.jpg
img-300 × 150.jpg
–
img.jpg
4. img.jpg, 1200px x 600px * Thumbnail (ritaglio selezionato)
Medio
Large
Full Size		 img-150 × 150.jpg
img-300 × 150.jpg
img-1024 × 506.jpg
img.jpg
  • Es.2 : Le dimensioni dell’immagine originale sono inferiori a quelle del default per le grandi dimensioni, quindi non viene creata l’immagine ‘large’.
  • Es.4 : Questo esempio presuppone che sia stata selezionata la checkbox “ritaglio”, pertanto, per la dimensione miniatura, il formato originale viene ignorato e viene creata una miniatura di 150px x 150px esatti.

 

Le funzioni base relative alle immagini

Come attivare il supporto per l’immagine in evidenza

Le ‘immagini in evidenza non sono automaticamente abilitate in tutti i temi e sono state introdotte in WP dalla versione 2.9, occorre tenerne conto ed eventualmente abilitarle con l’aggiunta nel file “functions.php” del theme (abbiamo visto in altri post come utilizzare i temi figli per modificare un theme WP)

add_theme_support ('post-thumbnail');//aggiunge il supporto per le immagini in evidenza
add_theme_support('post-thumbnail',array('post','SOFT_CPT'));/*solo per post e custom post_type 
indicati nel secondo argomento della funzione*/

Quindi, se prima il tema non disponeva di questa ‘feature’ ora nella pagina di editing o aggiunta nuovi post si vedrà, in basso a destra il box: immagine-in-evidenza-wp

col quale, esattamente come per inserire un’immagine nell’articolo, potremo settare l’immagine in evidenza del nostro post.

Per mostrare nel file di template l’immagine in evidenza dovremo usare la funzione the_post_thumbnail() all’interno di un loop ; la funzione così chiamata si occupa di stampare a video l’output completo del tag immagine. Come impostazione di default, in assenza di ulteriori istruzioni, la funzione mostrerà la miniatura nelle dimensioni impostate come abbiamo visto sopra.

Aggiungere formati immagine con add_image_size()

Per una panoramica completa delle funzioni riferite alla gestione delle immagini, dobbiamo introdurre un’altra funzione ovvero add_image_size() [add_image_size($name, $width, $height, $crop)] e un suo alias specifico per l’immagine in evidenza set_post_thumbnail_size( )

. Con questa funzione possiamo definire a nostro piacimento le dimensioni per le immagini del nostro theme, compresa la dimensione dei thumbnail o quelle da utilizzare ad esempio in un template per uno specifico post_type. In questo contesto vediamo che:

set_post_thumbnail_size( 180, 120, true )/* all'upload di un nuovo media crea una miniatura 
ritagliata a 120px X 180px  da usare come immagine in evidenza dalla funzione the_post_thumbnail(), e
 si tratta di una funzione equivalente a:*/
add_image_size( 'post-thumbnail', 180, 120,true );/*nome: post-thumbnail: riconosciuta da WP come 
standard per le immagini in evidenza*/

//altri esempi con utilizzo di custom thumbnail:

if ( function_exists( 'add_image_size' ) ) {
     add_image_size( 'feature-image', 570, 285, true );
     add_image_size( 'feature-image-small', 285, 285, true);
     add_image_size( 'feature-image-home', 285, 303, true);
}
// Uso nel loop con dimensioni 285, 285
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'feature-image-small' ); } ?>
// aggiungere una classe all'immagine:
<?php echo the_post_thumbnail( 'feature-image-home', array('class' => 'feature-image') ); ?>

Con add_image_size() abbiamo quindi a disposizione una potente funzione per il ridimensionamento delle immagini, come sempre è bene non abusare in quanto l’aggiunta di numerosi formati rallenta la procedura di aggiunta media e consuma spazio disco.

NOTA IMPORTANTE: la funzione add_image_size() ha effetto solo per le immagini che ancora non sono state uploadate, e quindi il nuovo formato non è disponibile per le immagini già caricate in precedenza. Per ricostruire tutti i formati si può utilizzare un utilissimo plugin: Regenate Thumbnails

Alcune  funzioni avanzate relative alle immagini WP

Utilizzo avanzato di the_post_thumbnail()

Possono essere passati due argomenti opzionali a  the_post_thumbnail(). Il primo sono le dimensioni passate
a) come nome ( ‘thumbnail’, ‘medium’ or ‘large’) come definiti nelle impostazioni di base o un nome “custom definito in add_image_size()

b) come array di due numeri rappresentanti la larghezza e l’altezza in pixel – es. array(120,80)

Il secondo, anch’esso un array contenente src, class, alt e title quindi ad esempio:

the_post_thumbnail(
	array(120, 90), //larghezza x altezza
	array(
		'src' => 'image.jpg',//sorgente
		'class' => 'thumbnail', //classe
		'alt' => 'al passaggio del mose mostra questo testo', //tag alt
		'title' => 'al passaggio del mose mostra questo testo'//tag title
	)
);
//che risulterà in output html:
<img width="120" height="90" src="image.jpg" alt="al passaggio del mose mostra questo testo" title="al passaggio del mose mostra questo testo" />

Rimozione dei formati immagine predefiniti WP

E’ possibile inibire a WordPress la creazione dei formati immagine predefiniti? Evidentemente la risposta a questo quesito consentirebbe di risparmiare tempo e spazio limitando i formati immagine a quelli (generati custom con la funzione add_image_size()) strettamente necessari per i template di pagina del nostro theme.

function SOFT_filter_image_sizes( $sizes) {
		
	unset( $sizes['thumbnail']);
	unset( $sizes['medium']);
	unset( $sizes['large']);
	
	return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'SOFT_filter_image_sizes');

Questa funzione si aggancia all’hook intermediate_image_sizes_advanced ovvero alla fase di creazione dei formati immagine all’upload; l’unset determina la non-creazione del formato relativo ( [‘thumbnail’], [‘medium’], [‘large’] ) .