Contenu
- Le problème avec WordPress et les «images fluides»
- La solution non-jQuery
- Le code
- Une confession
- Mises en garde
- Connaissances nécessaires: PHP et CSS de base
- A besoin: Installation de WordPress, éditeur de texte de choix
- Temps de projet: 10 minutes
Si vous vous abonnez à la version imprimée du magazine .net (sinon, pourquoi pas!?), Vous aurez vu que le numéro de ce mois contient un excellent article sur le «Responsive Design with WordPress».
Dans l'article, l'auteur Jesse Friedman décrit une foule de techniques vraiment utiles pour tirer le meilleur parti des fonctionnalités WordPress inhérentes et les surmonter afin de produire un site Web réactif vraiment efficace. Si vous envisagez de produire un site réactif avec WordPress, vous devez absolument vous procurer une copie de son article. C'est une lecture incontournable.
Ayant récemment reconstruit mon blog personnel sur WordPress en utilisant une approche réactive et mobile d'abord, je connaissais certaines des techniques abordées dans l'article. Cependant, le seul élément qui m'a vraiment marqué était l'approche de Jesse pour activer des images fluides via jQuery.
Le problème avec WordPress et les «images fluides»
Comme je suis sûr que vous connaissez tous les «images fluides» - qui utilisent la largeur maximale: 100% - exigent que les images n’aient pas de largeur ou de hauteur fixe afin qu’elles puissent s’adapter à la taille de leur conteneur. Malheureusement, WordPress calcule automatiquement les dimensions des images générées à partir de la médiathèque et ajoute les attributs de largeur et de hauteur correspondants à toutes les balises img>.
C'est génial pour la vitesse de rendu des pages, mais cela crée un massif clé dans les travaux lorsqu'il s'agit de créer des mises en page réactives, car les dimensions de l'image ne sont plus limitées à la taille de leur conteneur.
C'est un problème.
La solution non-jQuery
Dans son article, Jesse suggère d’utiliser jQuery pour supprimer les attributs width et height de toutes les balises img> de la page une fois qu’elle a été chargée. Cela fonctionne certainement, mais lors de la création de mon site, je n’ai pas aimé l’idée de me fier à JavaScript pour y parvenir, surtout s’il y avait beaucoup d’images sur la page en question.
C'est là que les filtres WordPress sont venus à la rescousse.
Le codex WordPress définit un filtre comme:
"... hooks que WordPress lance pour modifier le texte de différents types avant de l'ajouter à la base de données ou de l'envoyer à l'écran du navigateur."
En fait, c'est exactement ce dont nous avons besoin. En configurant un filtre à exécuter sur toutes les images en tant qu'action finale avant qu'elles ne soient rendues sur la page, nous pouvons utiliser PHP pour supprimer les attributs de largeur et de hauteur, évitant ainsi la nécessité d'une manipulation DOM (potentiellement) coûteuse via JavaScript.
Le code
- /**
- * FONCTIONS D'IMAGE RÉACTIVES
- */
- add_filter ("post_thumbnail_html", "remove_thumbnail_dimensions", 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- fonction remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (largeur
Dans le code ci-dessus, nous ajoutons deux filtres à l'aide de la fonction add_filter. Le premier argument est le filtre auquel nous voulons nous accrocher et le second spécifie la fonction que nous voulons exécuter lorsque le filtre est appelé.
Dans notre code, nous nous connectons à deux fonctions obscures:
- post_thumbnail_html - images récupérées avec le post_thumbnail ()
- image_send_to_editor - images ajoutées à l'éditeur
Nous utilisons ensuite une expression régulière pour supprimer à la fois les attributs de largeur et de hauteur des balises d'image. Désormais, lorsque nos images sont envoyées au navigateur, elles peuvent être totalement «fluides», comme M. Marcotte nous l’a dit.
Une confession
Je dois avouer avoir eu l'idée d'utiliser add_filter pour supprimer des attributs que je n'ai pas pu pour la vie de moi localiser les filtres WordPress corrects à accrocher.
Après de nombreuses recherches, je suis finalement tombé sur ce post extrêmement utile sur Wordpress Stack Exchange par Nathaniel Taintor qui fournissait les informations sur les deux filtres dont j'avais besoin.
Mises en garde
Autant que je sache, le seul inconvénient majeur de cette approche est qu'elle ne supprime pas les attributs de largeur et de hauteur de toutes les images de votre site. J'ai trouvé que c'était un problème, en particulier avec les images Gravatar que WordPress utilise dans les commentaires.
Si quelqu'un a une solution à ce problème, veuillez laisser un commentaire afin que nous puissions tous en profiter.
J'espère que cela a été utile et a démontré une alternative à l'utilisation de JavaScript pour implémenter des «images fluides» sur les sites Web WordPress.
Mots: David Smith
Dave Smith est un concepteur front-end basé près de la belle ville de Bath, au Royaume-Uni. Lorsqu'il ne travaille pas sur de nouveaux projets Web passionnants, il joue de la trompette dans tout, des groupes de jazz Big Band aux orchestres symphoniques. Vous pouvez rattraper Dave sur Twitter en tant que @get_dave.
