Content
- El problema amb WordPress i les "imatges fluides"
- La solució que no és jQuery
- El codi
- Una confessió
- Advertiments
- Coneixements necessaris: PHP i CSS bàsics
- Requereix: Instal·lació de WordPress, editor de text escollit
- Temps del projecte: 10 minuts
Si us subscriviu a la versió impresa de la revista .net (si no, per què no !?), haureu vist que el número d’aquest mes inclou un article excel·lent sobre “Disseny responsiu amb WordPress”.
A l’article, l’autor Jesse Friedman descriu un munt de tècniques realment útils per aprofitar al màxim i superar la funcionalitat inherent a WordPress per tal de produir un lloc web sensible realment eficaç. Si esteu pensant en crear un lloc sensible amb WordPress, heu de recollir definitivament una còpia del seu article. És de lectura obligada.
Després d’haver reconstruït recentment el meu bloc personal a WordPress mitjançant un enfocament sensible i primer per a mòbils, coneixia algunes de les tècniques que es tracten a l’article. Tanmateix, l’únic que em va destacar realment va ser l’enfocament de Jesse per permetre imatges fluides mitjançant jQuery.
El problema amb WordPress i les "imatges fluides"
Com estic segur que tots sabeu que les "imatges fluides" (que fan ús de l'amplada màxima: 100%) requereixen que les imatges no tinguin amplada o alçada fixes per tal que puguin escalar a la mida del contenidor. Malauradament, WordPress calcula automàticament les dimensions de les imatges generades des de la biblioteca multimèdia i afegeix els atributs d’amplada i alçada corresponents a qualsevol etiqueta img>.
Això és ideal per a la velocitat de renderització de pàgines, però genera un fitxer massiva clau en funcionament a l’hora de crear dissenys responsius, ja que les dimensions de la imatge ja no es limiten a la mida del contenidor.
Això és un problema.
La solució que no és jQuery
Al seu article, Jesse suggereix utilitzar jQuery per eliminar els atributs d’amplada i alçada de totes les etiquetes img> de la pàgina un cop s’hagi carregat. Certament, això funciona, però a l’hora de construir el meu lloc no em va agradar la idea de confiar en JavaScript per aconseguir-ho, sobretot si hi havia moltes imatges a la pàgina en qüestió.
Aquí és on van sortir els filtres de WordPress.
El còdex de WordPress defineix un filtre com:
"... connecta que llança WordPress per modificar text de diversos tipus abans d'afegir-lo a la base de dades o enviar-lo a la pantalla del navegador."
Resulta que això és exactament el que necessitem. En configurar un filtre perquè s’executi a totes les imatges com a acció final abans que es representin a la pàgina, podem utilitzar PHP per eliminar els atributs d’amplada i alçada, evitant així la necessitat d’una manipulació DOM (potencialment) costosa mitjançant JavaScript.
El codi
- /**
- * FUNCIONS D'IMATGE RESPONSIVES
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funció remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (ample
Al codi anterior, afegim dos filtres mitjançant la funció add_filter. El primer argument és el filtre al qual volem connectar i el segon especifica la funció que volem executar quan es crida el filtre.
Al nostre codi connectem a dues funcions fosques:
- post_thumbnail_html - imatges recuperades amb miniatura_enviament ()
- image_send_to_editor - imatges afegides a l'editor
A continuació, utilitzem una expressió regular per eliminar tant els atributs d'amplada com d'alçada de les etiquetes d'imatge. Ara, quan les nostres imatges s’envien al navegador, poden ser completament «fluides», tal com ens va dir el senyor Marcotte.
Una confessió
He de confessar haver tingut la idea d’utilitzar-lo add_filter per eliminar atributs que durant tota la vida no he pogut localitzar els filtres de WordPress correctes per connectar-los.
Després de moltes cerques, finalment vaig trobar aquest post extremadament útil sobre Wordpress Stack Exchange de Nathaniel Taintor, que proporcionava la informació sobre els dos filtres que necessitava.
Advertiments
Pel que sé, l’únic inconvenient important d’aquest enfocament és que no elimina els atributs d’amplada i alçada de totes les imatges del vostre lloc. Em va semblar un problema, específicament amb les imatges de Gravatar que WordPress fa servir als comentaris.
Si algú té una solució a aquest problema, si us plau, deixeu un comentari perquè tots puguem beneficiar-nos.
Espero que això hagi estat útil i hagi demostrat una alternativa a confiar en JavaScript per implementar "imatges fluides" als llocs web de WordPress.
Paraules: David Smith
Dave Smith és un dissenyador frontal situat a prop de la bella ciutat de Bath, al Regne Unit. Quan no treballa en nous i emocionants projectes web, es pot trobar tocant la trompeta en tot, des de grups de jazz de Big Band fins a orquestres simfòniques. Podeu posar-vos al dia amb Dave a Twitter com a @get_dave.
