Contenuto
- Il problema con WordPress e le "immagini fluide"
- La soluzione non jQuery
- Il codice
- Una confessione
- Avvertenze
- Conoscenza necessaria: PHP e CSS di base
- Richiede: Installazione di WordPress, editor di testo di scelta
- Tempo del progetto: 10 minuti
Se ti iscrivi alla versione cartacea della rivista .net (in caso contrario, perché no !?), avrai visto che il numero di questo mese presenta un eccellente articolo sul "Responsive Design with WordPress".
Nell'articolo, l'autore Jesse Friedman delinea un carico di tecniche davvero utili per sfruttare al massimo e superare le funzionalità intrinseche di WordPress al fine di produrre un sito Web reattivo davvero efficace. Se stai pensando di produrre un sito reattivo con WordPress, dovresti assolutamente prendere una copia del suo articolo. È una lettura obbligata.
Avendo recentemente ricostruito il mio blog personale su WordPress utilizzando un approccio reattivo e mobile-first, conoscevo alcune delle tecniche trattate nell'articolo. Tuttavia, l'unico elemento che mi ha davvero colpito è stato l'approccio di Jesse per abilitare immagini fluide tramite jQuery.
Il problema con WordPress e le "immagini fluide"
Come sono sicuro sapete tutti, le "immagini fluide", che utilizzano la larghezza massima: 100%, richiedono che le immagini non abbiano larghezza o altezza fisse per poter essere ridimensionate in base alle dimensioni del loro contenitore. Sfortunatamente, WordPress calcola automaticamente le dimensioni delle immagini generate dalla libreria multimediale e aggiunge gli attributi di larghezza e altezza corrispondenti a qualsiasi tag img>.
Questo è ottimo per la velocità di rendering della pagina ma genera un file massiccio chiave in lavorazione quando si tratta di creare layout reattivi poiché le dimensioni dell'immagine non sono più vincolate alle dimensioni del loro contenitore.
Questo é un problema.
La soluzione non jQuery
Nel suo articolo Jesse 'suggerisce di utilizzare jQuery per rimuovere gli attributi di larghezza e altezza da tutti i tag img> sulla pagina una volta caricata. Questo certamente funziona, ma durante la creazione del mio sito non mi piaceva l'idea di fare affidamento su JavaScript per raggiungere questo obiettivo, soprattutto se c'erano molte immagini nella pagina in questione.
È qui che i filtri di WordPress sono venuti in soccorso.
Il codice WordPress definisce un filtro come:
"... hook che WordPress lancia per modificare il testo di vari tipi prima di aggiungerlo al database o inviarlo alla schermata del browser."
A quanto pare questo è esattamente ciò di cui abbiamo bisogno. Impostando un filtro da eseguire su tutte le immagini come azione finale prima che vengano renderizzate sulla pagina, possiamo usare PHP per rimuovere gli attributi di larghezza e altezza, aggirando così la necessità di una (potenzialmente) costosa manipolazione del DOM tramite JavaScript.
Il codice
- /**
- * FUNZIONI DI IMMAGINE REATTIVA
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- funzione remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (width
Nel codice sopra stiamo aggiungendo due filtri utilizzando la funzione add_filter. Il primo argomento è il filtro a cui vogliamo collegarci e il secondo specifica la funzione che vogliamo eseguire quando viene chiamato il filtro.
Nel nostro codice ci colleghiamo a due funzioni oscure:
- post_thumbnail_html - immagini recuperate con il file post_thumbnail ()
- image_send_to_editor - immagini aggiunte all'editor
Quindi utilizziamo un'espressione regolare per rimuovere sia gli attributi di larghezza che di altezza dai tag immagine. Ora, quando le nostre immagini vengono inviate al browser, possono essere completamente "fluide", proprio come ci ha detto l'onorevole Marcotte.
Una confessione
Devo confessare di aver avuto l'idea di utilizzare add_filter per rimuovere attributi che non sono riuscito a trovare per tutta la vita i filtri WordPress corretti a cui agganciarmi.
Dopo molte ricerche mi sono finalmente imbattuto in questo post estremamente utile su Wordpress Stack Exchange di Nathaniel Taintor che ha fornito le informazioni sui due filtri di cui avevo bisogno.
Avvertenze
Per quanto ne so, l'unico grande svantaggio di questo approccio è che non rimuove gli attributi di larghezza e altezza da tutte le immagini sul tuo sito. Ho scoperto che questo è un problema, in particolare con le immagini Gravatar che WordPress utilizza nei commenti.
Se qualcuno ha una soluzione a questo problema, lascia un commento in modo che tutti possiamo trarne vantaggio.
Spero che questo sia stato utile e abbia dimostrato un'alternativa al fare affidamento su JavaScript per implementare "immagini fluide" sui siti Web WordPress.
Parole: David Smith
Dave Smith è un designer di front end che vive vicino alla bellissima città di Bath, nel Regno Unito. Quando non sta lavorando a nuovi ed entusiasmanti progetti web, lo si può trovare a suonare la tromba in tutto, dai gruppi jazz di Big Band alle orchestre sinfoniche. Puoi raggiungere Dave su Twitter come @get_dave.
