Durante lo sviluppo di un tema WordPress la gestione delle immagini in base alle esigenze editoriali è un elemento fondamentale
Se non affrontato correttamente può generare uno o più di questi problemi:
- gestione dei ritagli delle immagini che non soddisfa i requisiti editoriali;
- gestione dei ritagli inadeguata ai vari device e quindi pagine con immagini sovradimensionate o sottodimensionate;
- creazione di un numero di ritagli elevato e conseguenti problemi di spazio su server;
Come sempre per ogni progetto il passaggio più importante è in fase di definizione dei layout: valutare le esigenze editoriali e razionalizzare il più possibile i formati di ritaglio delle immagini sarà sempre una scelta saggia che porterà ad avere un sito equilibrato per chi lo naviga e intuitivo da gestire per chi pubblica contenuti.
A livello pratico WordPress permette di gestire i ritagli tramite la funzione add_image_size. Grazie a questa funzione potrete gestire con estrema semplicità i ritagli e i ridimensionamenti di tutte le immagini che verranno utilizzate nel vostro tema.
Il ritaglio di un’immagine
Ipotizzando di partire da un’immagine originale (1920×1080 pixel) il ritaglio può essere ad esempio un’immagine di 400×350 pixel. Questo ritaglio sarà quindi differente dall’immagine originale sia per proporzioni (4:3 invece di 16:9) sia per misure (400×350 pixel invece di 1920×1080 pixel).
È importante notare che oltre ad aver ridotto le misure dell’immagine abbiamo anche fatto un intervento editoriale sulle proporzioni (e quindi sul taglio).


Esempio di ritaglio che rende priva di significato l’immagine ottenuta. Le immagini in formato portrait difficilmente si adatteranno alle esigenze editoriali del tema a meno che non sia stata valutata in fase di progettazione dei layout la necessità di utilizzare questo formato.
Photo by Daniel Cheung on Unsplash
Ogni intervento editoriale deve essere fatto con consapevolezza perchè porterà alla creazione di un ritaglio che potrebbe snaturare il senso dell’immagine originale.
Il ridimensionamento di un’immagine
Ipotizzando di partire da un’immagine originale 16:9 fullHD il ridimensionamento può essere ad esempio un’immagine di 480×270 pixel. Questo ritaglio sarà quindi identico dall’immagine originale per proporzioni ma avrà misure ridotte in modo da ottimizzare il peso.
Un esempio pratico della differenza tra ritaglio e ridimensionamento
Molto probabilmente un sito, anche se molto semplice, è progettato con almeno due ritagli di immagine: l’immagine in evidenza che accompaga gli articoli nelle pagine di archivio e l’immagine di apertura nella pagina singola.
Questi due ritagli vengono generati a partire dalla stessa immagine originale. Il primo (nelle pagine di archivio) probabilmente avrà un ritaglio in formato 4:3 mentre il secondo (nella pagina singola) probabilmente sarà posizionato all’inizio e avrà quindi un formato 16:9.
A questi ritagli si aggiungono poi (almeno) quelli della versione mobile del sito. Queste ottimizzazioni mobile non solo avranno dimensioni differenti ma, se il sito è stato progettato correttamente, avranno anche proporzioni differenti tra altezza e larghezza per migliorare l’esperienza di navigazione.
Un esempio tipico di ridimensionamento è invece quello che WordPress gestisce in maniera quasi automatica quando inseriamo un’immagine del contenuto (o in un blocco di Gutenberg). In questo caso l’immagine verrà mostrata al visitatore con le stesse proporzioni di quella originale ma sarà ridimensionata per ottimizzare le performance e ridurre i tempi di caricamento.
Bene, se ora è chiara la differenza tra ritaglio e ridimensionamento vediamo quali grattacapi possono creare questi elementi.
La gestione delle immagini in siti complessi può essere problematica. Il primo passo da fare per ridurre i problemi è utilizzare l’elemento HTML <picture>. Questo elmento è in grado di gestire ritagli e ridimensionamenti delle immagini basandosi sulle media query.
In pratica con grande semplicità vi permette di utilizzare le immagini che avete definito tramite add_image_size.
In ogni template di pagina potrete quindi definire quali immagini utilizzare per desktop, smartphone. E se proprio volete anche tablet (buongiornissimo!!1!1) e schermi con tecnologia Retina.
Come è facile intuire potreste arrivare presto a dover indicare 4 immagini differenti per gestire ogni singolo elemento <picture>. Senza contare che possono esserci uno o più elementi <picture> in ogni template.
Le considerazioni che seguono sono solo uno dei possibili approcci al problema. La regola che vale è sempre la stessa: se una cosa si adatta al tuo metodo di lavoro assorbila, adattala e falla tua.
Questo esempio è il modo più semplice che ho sviluppato per gestire le immagini quando realizzo temi personalizzati: non è detto che sia perfetto per te ma se ti sarà utile prima o poi mi offrirai una birra o una PHPizza.
L’obiettivo è creare una funzione in grado di generare l’elemento <picture> in base ai parametri che vengono passati di volta in volta. Qundi una volta scritta la funzione potrete richiamarla da un qualsiasi template del tema WordPress semplicemente indicando alcuni parametri come ad esempio:
- se l’immagine da richiamare deve essere l’immagine in evidenza o l’immagine associata ad un field (o sub_field) di ACF;
- nel caso di un’immagine associata ad un field di ACF il nome del campo;
- i differenti ritagli di immagine basati su quanto impostato con add_image_size e su quanti device avete deciso di coprire;
Un esempio pratico di codice per gestire le immagini basato su <picture> e add_image_size
// questa funzione è da inserire nel file functions.php del tema function print_your_theme_name_image( $image_data, $image_sizes ) { if( count( $image_data ) > 0 ) { $image_data_select = $image_data['image_type']; // post_thumbnail, acf_field or acf_sub_field $size_fallback = $image_data['size_fallback']; // crop to use as fallback if ( $image_data_select === 'acf_field' ) { // ACF FIELD - be sure to set "image -> image array in ACF options" $thumb_id_pre = get_field( $image_data['image_value'] ); // retrieve the image data array $thumb_id = $thumb_id_pre['ID']; // retrieve the image ID } elseif ( $image_data_select === 'acf_sub_field' ) { // ACF SUB FIELD - be sure to set "image -> image array in ACF options" $thumb_id_pre = get_sub_field( $image_data['image_value'] ); $thumb_id = $thumb_id_pre['ID']; // retrieve the image ID } elseif ( $image_data_select === 'post_thumbnail' ) { // nomrmal featured image $post_id = get_the_ID(); // retrieve post/page ID $thumb_id = get_post_thumbnail_id( $post_id ); // retrieve the image ID } if ( $thumb_id != 0 ) { $attachment_title = get_the_title( $thumb_id ); // image title $attachment_alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true ); // image alt text if( count( $image_sizes ) > 0 ) { $print_theme_image_cache_key = 'print_theme_image_cache_'.$thumb_id; $sharped_images = wp_cache_get( $print_theme_image_cache_key ); // check if array of images URL is set as cache if ( false === $sharped_images ) { $sharped_images = array(); // declare arry to use later in data-srcset foreach( $image_sizes as $image_size) { $thumb_url[$image_size] = wp_get_attachment_image_src( $thumb_id, $image_size, true ); // retrive array for desired size if ( $thumb_url[$image_size][3] == true ) { // check if cropped image exists $sharped_images[] = $thumb_url[$image_size][0]; // retrive image URL } else { // if cropped image does not exist $thumb_url[$image_size] = wp_get_attachment_image_src( $thumb_id, $size_fallback, true ); // retrive array for fallback size $sharped_images[] = $thumb_url[$image_size][0]; // retrive fallback image URL } } wp_cache_set( $print_theme_image_cache_key, $sharped_images, 300 ); // set array of images URL as cache } $html_image_output = ''; $html_image_output .= '<div class="no-the-100">'; $html_image_output .= '<picture>'; $html_image_output .= '<source media="(max-width: 1024px)" data-srcset="'.$sharped_images[2].', '.$sharped_images[3].' 2x">'; $html_image_output .= '<source media="(min-width: 1025px)" data-srcset="'.$sharped_images[1].', '.$sharped_images[0].' 2x">'; $html_image_output .= '<img data-src="'.$sharped_images[1].'" src="'.$sharped_images[4].'" title="'.$attachment_title.'" alt="'.$attachment_alt.'" class="lazy" />'; $html_image_output .= '</picture>'; $html_image_output .= '</div>'; echo $html_image_output; } } } } // questo snippet invece richiama la funzione e può essere usato dovunque serva mostrare l'immagine $image_data = array( 'image_type' => 'post_thumbnail', // options: post_thumbnail, acf_field, acf_sub_field 'image_value' => '', // se utilizzi un custom field indica qui il nome del campo 'size_fallback' => 'full_desk' ); $image_sizes = array( // qui sono definiti i ritagli o dimensioni. Devono corrispondere per numero a quanto dedinfito nella funzione nei parametri data-srcset o srcset 'desktop_retina' => 'full_column_desktop_retina', 'desktop' => 'full_column_desktop', 'mobile' => 'full_column_mobile', 'mobile_retina' => 'full_column_mobile_retina', 'micro' => 'micro' ); print_your_theme_name_image( $image_data, $image_sizes );
La funzione “print_your_theme_name_image” può essere aggiunta al file functions.php del tema; lo snippet che definisce quale immagine usare, le relative size e richiama la funzione può invece essere eseguito in qualsiasi page template. È importante definire tutti i ritagli che andrete ad usare tramite add_image_size.
Questo codice sfrutta anche LazyLoad di Andrea Verlicchi e quindi ai 4 formati di immagine (desktop HD, desktop, mobile HD e mobile) ne aggiunge un quarto (micro) per l’immagine segnaposto.