Immagini Responsive per il tuo WordPress

Immagini Responsive per il tuo WordPress

Se mi segui da diverso tempo, avrai sicuramente notato il cambio di design e di dominio che questo sito ha avuto. Se invece non te ne sei accorto, vuol dire che sei un nuovo lettore o che precedentemente eri troppo impegnato a leggere i contenuti per dare importanza alla grafica che li circondava.

Qualsiasi sia il tuo caso, vorrei semplicemente dirti grazie! Grazie del tempo che spendi a leggere i miei articoli, per i commenti che lasci sul sito e, semplicemente, per essere te!

Quest’oggi voglio darti qualcosa in cambio condividendo con te una piccola esperienza che ho vissuto durante la realizzazione di questo template e come mi è stato possibile risolverla.

Dato che ho creato questo nuovo tema con l’intenzione che durasse nel tempo e che fosse consultabile da qualsiasi dispositivo, durante la progettazione del layout ho deciso di creare una template responsive. Se non conosci il significato del termine, ti basti sapere che utilizzando queste tecniche il tuo stesso sito sarà in grado di adattarsi alle dimensioni dei diversi schermi permettendo al tuo contenuto di poter essere consultato praticamente ovunque.

A parte i concetti sulla creazione del design e su come esso si debba adattare; concetti importantissimi ma impossibili da trattare in questo articolo, c’è stata una cosa che mi ha tolto qualche notte di sonno e della quale non riuscivo a trovarne una soluzione, le immagini.

Questi elementi, che definirei vitali per mantenere l’attenzione e l’interesse di un lettore, non volevano proprio rispondere alla grandezza degli schermi sulle quali venivano mostrate. Per il classico inserimento delle immagini all’interno di un post, tutto quello che ho dovuto fare è stato aggiungere le seguenti regole CSS:

Con queste due semplici regole sono stato in grado di permettere alle immagini di adattarsi alla larghezza delle finestre. Certo, c’è chi consiglia di caricare delle immagini differenti a seconda della risoluzione (in modo da far salvare un pò di banda agli utenti mobili) ma personalmente ero già contento con queste piccole modifiche.

Tutta la mia felicità si è andata a scontrare contro un muro quando ho visto per la prima volta delle immagini con la descrizione al suo interno, un disastro totale!

Con la logica che ho utilizzato per le immagini semplici, non mi è stato possibile ottenere questo tipo di immagini e, dato che il div.wp-caption ha delle dimensioni impostate come attributi, ho iniziato a cercare di modificare il codice WordPress per fare in modo di rimuovere questa caratteristica.

Ho trovato anche dei tutorial interessanti che mi hanno fatto applicare delle modifiche all’interno del file functions.php ma purtroppo, non sono stato in grado di risolvere la situazione.

Avevo quasi rinunciato a risolvere il problema, mi stavo convincendo che sarebbe stato per un altra volta, ma poi è successo qualcosa, sono riuscito a trovare una soluzione. La mia testardaggine nella ricerca di una soluzione è stata, ancora una volta, premiata! (In barba a chi dice che su Internet non si trova niente!)

Con queste tre semplici regole sono riuscito a sistemare il problema immagini e ora posso urlare al mondo intero “ho un sito responsive“. Se non capisci il motivo della mia felicità prova a dare uno sguardo a questa infografica per vedere alcune statistiche e previsioni sul traffico mobile.

Tagliando corto sulle ragioni e le esperienze personali, voglio condividere direttamente con te una lista di classi e regole CSS che ti permetteranno di correggere una volta per tutte tutte le immagini presenti in un sito WordPress:

Come puoi capire dai commenti inseriti in questo blocco di codice, non sono stato di certo io a creare tutte queste regole CSS e a testare che tutto funcionasse correttamente. Se ti stai chiedendo chi ha fatto questo lavoro, il suo nome è Jeff Sebring e ha condiviso la soluzione alle immagini responsive su questo sito.

Spero che questo veloce articolo ti permetta di risolvere questo problema in modo semplice e veloce!

Lascia il tuo Pensiero

6 Responses to “Immagini Responsive per il tuo WordPress”

    • Andrea Barghigiani

      Ciao Gianluca,

      per quanto ne so io AdSense ha già pensato a questo perché fanno lo sniff del dispositivo connesso ed adattano l’annuncio alla grandezza dello schermo. Ovviamente la tua è una soluzione più precisa perché permetterà di adattare anche l’annuncio riducendo le dimensioni dello schermo. Ma, visto anche che non punto molto ad AdSense, diciamo che per il momento sono contento così 😀

      Rispondi
    • Andrea Barghigiani

      Ciao Gino,

      il codice che trovi va inserito all’interno del tuo foglio di stile che ha una estenzione .css. Generalmente è il file style.css presente nella cartella principale del tuo tema.

      Rispondi