Gestione editoriale delle immagini con WordPress

CodeTutorial | 4 Giugno 2019 di Giovanni Invernizzi
 - Paperplane

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:

  1. gestione dei ritagli delle immagini che non soddisfa i requisiti editoriali;
  2. gestione dei ritagli inadeguata ai vari device e quindi pagine con immagini sovradimensionate o sottodimensionate;
  3. 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.

Per capire meglio questo punto è importante capire la differenza tra ritaglio e ridimensionamento di un’immagine

Il ritaglio

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 in cui l’immagine ritagliata mantiene un significato visivo pur cambiando formato. (Photo by Fernand De Canne 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.

ritaglio-sbagliato

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 Harley-Davidson on Unsplash)

Il ridimensionamento

Ipotizzando di partire da un’immagine originale 16:9 fullHD (1920×1080 pixel) 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.

Esempio di ridimensionamento.

Diventa quindi semplice capire che il ritaglio assegna all’immagine uno scopo differente e, oltre a questo scopo, deve tenere conto anche delle ottimizzazioni di peso necessarie.

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.

Un esempio di ritaglio: la stessa immagine viene utilizzata sia nell’elenco in archivio che in apertura nella pagina singola.

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.

Come fare per utilizzare l’elemento HTML <picture> in maniera efficace senza scrivere decine di righe di codice noioso che diventano un incubo da mantenere?

Semplice: utilizzando più PHP di quanto vorresti.

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

Qui potete trovare un esempio pratico che potete utilizzare nel vostro tema >

Si tratta di due file: uno che definisce la funzione (functions.php) e l’altro che la richiama (page.php).

Potete aggiungere il codice del primo file direttamente al file functions.php del vostro tema; la funzione contenuta nel secondo file può invece essere eseguita in qualsiasi page template.
L’esempio in questione sfrutta anche LazyLoad di Andrea Verlicchi e quindi ai 3 formati di immagine (retina, desktop e mobile) ne aggiunge un quarto (micro) per l’immagine segnaposto.

Immagine di copertina: drmakete lab on Unsplash.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Loading...
Se l'hai trovato interessante condividi con questi obsoleti pulsanti
CI SONO ALTRI ARTICOLI, CHE FAI NON LI LEGGI?

Vuoi saperne di più? Contattaci!