Gestione editoriale delle immagini con WordPress

e come ottimizzare l'uso del tag picture per ogni device

CodeTutorial | di: Giovanni Invernizzi

4 Giugno 2019 — Tempo di lettura: 6'

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

Gianni Morandi — Cantante di UX design, Banane e Lampone

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.

Esempio di ridimensionamento.
Photo by Daniel Cheung on Unsplash

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.

Come fare per utilizzare l'elemento HTML 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

// 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.

Articoli correlati

Vuoi spiccare il volo insieme a noi?

    info@paperplanefactory.com
    +39 339 54 36 752




    Invia