Lavorare con immagini reattive in WordPress

Fino a poco tempo, lavorare con immagini reattive in WordPress era una vera sfida. A meno che gli utenti non fossero disposti a scrivere la funzionalità da soli, erano sfortunati. L'altra opzione era acquistare un plug-in o trovare qualche altra soluzione alternativa, ma non erano disponibili funzionalità di base che gli sviluppatori potessero sfruttare. I temi creati senza il supporto per le immagini reattive erano spesso a prestazioni lente e l'usabilità a volte era instabile su schermi di dimensioni diverse. Questi non sono esattamente attributi che clienti e utenti associano a una buona funzionalità.

Fortunatamente, tutto questo è cambiato con il rilascio di WordPress 4.4. Ora la funzionalità per le immagini reattive è inclusa direttamente in WordPress, consentendo agli sviluppatori di lavorare con essa anche nei temi. Ciò è stato ottenuto prendendo un plug-in di immagini reattive e rendendolo parte del core di WordPress.

Come funziona tutto

Ovviamente, a meno che tu non l'abbia già fatto, il tuo primo passo è aggiornare a WordPress 4.4. Una volta completato l'aggiornamento, se visualizzi il codice sorgente del tuo sito, noterai che le immagini sul tuo sito ora hanno due nuovi attributi: srcset sizes Questi attributi vengono filtrati, il che significa che tutte le dimensioni dell'immagine disponibili sono presenti, ma che le dimensioni rimangono coerenti con l'immagine originale. L'attributo srcset non consentirà il ritaglio personalizzato nei casi in cui le proporzioni non sono le stesse della versione originale dell'immagine. Questo per garantire che la qualità dell'immagine non venga compromessa quando viene visualizzata sullo schermo di un utente.

Entrare sotto il cofano e apportare modifiche

WordPress ha aggiunto immagini reattive come funzionalità di sfondo, il che significa che il processo avviene automaticamente. Quando carichi un'immagine utilizzando il media uploader, gli attributi vengono applicati a quelle immagini senza alcun intervento da parte tua. Questo è utile anche per l'ottimizzazione delle immagini.

Poiché si tratta di una funzione in background, le immagini reattive non vengono fornite con un'interfaccia utente: accadono e basta. Come sviluppatore, puoi modificare il file functions.php in ciascuno dei tuoi temi per essere certo che alle tue immagini venga assegnato un attributo di sizes accurato. Ricorda: quando vuoi fare riferimento a immagini reattive, significa che gli attributi del tag immagine di sizes e srcset .

Attributi predefiniti

Quando inizi a lavorare con questa funzione, noterai che WordPress è abbastanza bravo a trovare tutte le dimensioni possibili e ad aggiungerle all'attributo srcset . Sfortunatamente, possono entrare in gioco problemi quando si tratta della prevedibilità dell'attributo delle sizes . Questo è l'attributo utilizzato per comunicare la larghezza dell'immagine ai browser in modo che le immagini siano disponibili e visualizzabili su qualsiasi schermo.

L'impostazione di questo attributo come predefinito funziona in un paio di modi. Il primo è che forza l'attributo delle sizes da applicare a ciascuna immagine. Questo è utile considerando che ora è un requisito obbligatorio. Il secondo è che non consente ai browser di utilizzare un'origine immagine più ampia della dimensione originale dell'immagine. Il codice CSS utilizzato per modificare le dimensioni dell'immagine in base alle larghezze dello schermo di visualizzazione (come le query multimediali) può purtroppo rendere questo valore predefinito molto meno utile.

Filtro hook per sviluppatori di temi

Poiché questo attributo predefinito funziona solo con immagini che non sono state modificate dal codice CSS, WordPress ha creato filtri hook che gli sviluppatori di temi possono utilizzare. Basta regolare l'attributo delle sizes per tutte le immagini usando questo gancio. Di conseguenza, puoi essere certo che l'attributo delle sizes che viene offerto sarà l'ideale in ogni situazione.

Un avvertimento

Prima di andare avanti, prendiamoci un minuto per affermare che l'opzione degli attributi predefiniti non è il modo migliore per fornire una buona funzionalità di immagine reattiva. In effetti, dovresti lavorare per evitare di creare temi che si basano su questa impostazione predefinita. Il motivo è che l'attributo predefinito impedisce ai browser di modificare l'origine dell'immagine quando l'area di visualizzazione non è grande quanto la dimensione dell'immagine originale. I browser non sono inoltre in grado di modificare il sorgente se è stato ottimizzato dai CSS ed è necessaria un'immagine più grande.

Filtraggio delle immagini

Come sviluppatore di temi, puoi utilizzare il filtraggio nelle tue immagini per inserire un attributo di sizes che sia accurato. Ciò può essere ottenuto utilizzando un hook per la funzione WordPress, wp_calculate_image_sizes . Puoi usare questa funzione in modo che funzioni con il tuo tema attuale. Puoi apportare modifiche che applicano un attributo di sizes diverse a diversi tipi di immagini.

Le nuove funzioni fornite con questa versione ora consentono di applicare le sizes e gli attributi srcset a tutte le immagini che hai aggiunto utilizzando l'uploader multimediale di WordPress. Ti consente anche di aggiungere gli attributi alle immagini nei tuoi post. Dai un'occhiata a wp_get_attachment_image_sizes . Questo restituisce un attributo di sizes che puoi catturare e modificare tramite un filtro nel file functions.php per il tuo tema. Allo stesso modo, wp_get_attachment_image_srcset fa la stessa cosa, solo per l'attributo srcset .

Immagini reattive e il tuo tema personalizzato

Le nuove funzioni fornite con quest'ultima versione sono accompagnate da molti hook che puoi utilizzare per fornire un supporto efficace per immagini reattive all'interno del tuo tema. Questi ganci includono quanto segue:

Wp_calculate_image_sizes – Un hook che gli sviluppatori di temi possono utilizzare per regolare l'attributo delle sizes per lavorare con i punti di interruzione presenti nel loro tema.

Max_srcset_image_width – Un hook che uno sviluppatore di temi potrà utilizzare per filtrare in base alla larghezza massima delle immagini che si trovano nell'attributo srcset .

W_calculate_image_srcset – Un hook che offre agli sviluppatori la possibilità di filtrare in base agli attributi srcset .

Ulteriori informazioni sul supporto delle immagini reattive

Il manuale per sviluppatori di WordPress può fornire ulteriori indicazioni quando si tratta di utilizzare questi hook in modo efficace. La ricerca che devi fare varierà a seconda del tuo livello di comfort nell'effettuare questo tipo di regolazioni dietro le quinte. Se sei uno sviluppatore di temi che persegue questo strettamente come un hobby, potresti scegliere di fare un po' di sperimentazione. D'altra parte, se sei uno sviluppatore di temi di carriera, potresti voler investire nel tempo e nelle risorse necessarie per padroneggiare veramente questo aggiornamento.

Vantaggi dell'aggiornamento

Se non hai già aggiornato WordPress (o se il tuo host WordPress gestito non si è già aggiornato per te), i tuoi utenti trarranno vantaggio da alcuni fantastici vantaggi quando lo farai. Il supporto delle immagini reattive può migliorare le prestazioni delle pagine poiché le loro pagine non perderanno tempo a tirare giù le immagini troppo grandi. Gli utenti noteranno anche un notevole miglioramento della qualità delle immagini. Non vedranno la "produzione di salsicce" che c'è in ogni cosa. Invece, vedranno solo che funziona bene.

In qualità di sviluppatore, dovrai regolare l'attributo delle sizes in ciascuno dei file functions.php per tutti i tuoi temi. Tuttavia, una volta che hai fatto questo sforzo iniziale, le cose diventano molto più facili. Dopo aver affrontato la curva di apprendimento, scoprirai che lavorare con questa nuova funzionalità è del tutto naturale.

Potrebbero essere necessarie alcune ricerche e pratica per comprendere questa nuova funzionalità e ottenere un supporto per immagini reattive per funzionare con i tuoi temi personalizzati. Tuttavia, se sei disposto a scavare nel manuale dello sviluppatore e capire le cose, i tuoi clienti apprezzeranno davvero il miglioramento delle prestazioni e della funzionalità. È passato molto tempo e gli sviluppatori di temi esperti e coloro che hanno il compito di mantenere i temi personalizzati sono giustamente entusiasti di questo aggiornamento.