Travailler avec des images réactives dans WordPress

Jusqu'à récemment, travailler avec des images réactives dans WordPress était un véritable défi. À moins que les utilisateurs ne soient disposés à écrire la fonctionnalité eux-mêmes, ils n'avaient pas de chance. L'autre option était d'acheter un plugin ou de trouver une autre solution de contournement, mais il n'y avait aucune fonctionnalité de base disponible dont les développeurs pouvaient profiter. Les thèmes créés sans prise en charge des images réactives étaient souvent lents et la convivialité était parfois instable sur différentes tailles d'écran. Ce ne sont pas exactement des attributs que les clients et les utilisateurs associent à une bonne fonctionnalité.

Heureusement, tout cela a changé avec la sortie de WordPress 4.4. Désormais, la fonctionnalité des images réactives est incluse directement dans WordPress, ce qui permet aux développeurs de l'utiliser également dans des thèmes. Cela a été accompli en prenant un plugin d'images réactives et en l'intégrant au cœur de WordPress.

Comment ça marche

Évidemment, à moins que vous ne l'ayez déjà fait, votre première étape consiste à mettre à jour WordPress 4.4. Une fois la mise à jour terminée, si vous visualisez le code source de votre site, vous remarquerez que les images de votre site ont désormais deux nouveaux attributs : sizes et srcset . Ces attributs sont filtrés, ce qui signifie que toutes les tailles d'image disponibles sont présentes, mais que les dimensions restent cohérentes avec l'image d'origine. L'attribut srcset n'autorisera pas le recadrage personnalisé dans les cas où le rapport d'aspect n'est pas le même que celui de la version originale de l'image. Cela permet de s'assurer que la qualité de l'image n'est pas compromise lorsqu'elle est affichée sur l'écran d'un utilisateur.

Passer sous le capot et faire des changements

WordPress a ajouté des images réactives en arrière-plan, ce qui signifie que le processus se déroule automatiquement. Lorsque vous téléchargez une image à l'aide du média uploader, les attributs sont appliqués à ces images sans aucune intervention de votre part. Ceci est également utile pour l'optimisation de l'image.

Parce qu'il s'agit d'une fonctionnalité d'arrière-plan, les images réactives ne sont pas livrées avec une interface utilisateur - elles se produisent tout simplement. En tant que développeur, vous pouvez modifier le fichier functions.php dans chacun de vos thèmes afin d'être certain que vos images reçoivent un attribut de sizes qui soit précis. N'oubliez pas : lorsque vous souhaitez faire référence à des images réactives, cela signifie les attributs de balise d'image de sizes et srcset .

Attributs par défaut

Lorsque vous commencerez à travailler avec cette fonctionnalité, vous remarquerez que WordPress est assez bon pour trouver toutes les tailles possibles et les ajouter à l'attribut srcset . Malheureusement, des problèmes peuvent survenir en ce qui concerne la prévisibilité de l'attribut sizes . Il s'agit de l'attribut utilisé pour communiquer la largeur de l'image aux navigateurs afin que les images soient disponibles et visibles sur n'importe quel écran d'affichage.

La configuration de cet attribut par défaut fonctionne de plusieurs manières. La première est qu'elle force l'attribut sizes à être appliqué à chaque image. Ceci est utile étant donné qu'il s'agit désormais d'une exigence obligatoire. La seconde est qu'elle ne permet pas aux navigateurs d'utiliser une source d'image plus large que la taille d'origine de l'image. Le code CSS utilisé pour modifier la taille de l'image en fonction de la largeur de l'écran d'affichage (comme les requêtes multimédias) peut malheureusement rendre cette valeur par défaut beaucoup moins utile.

Crochets de filtre pour les développeurs de thèmes

Étant donné que cet attribut par défaut ne fonctionne qu'avec des images qui n'ont pas été modifiées par le code CSS, WordPress a créé des crochets de filtre que les développeurs de thèmes peuvent utiliser. Vous ajustez simplement l'attribut sizes pour toutes les images à l'aide de ce crochet. En conséquence, vous pouvez être certain que l'attribut de sizes qui est servi sera idéal dans toutes les situations.

Une mise en garde

Avant d'aller de l'avant, prenons une minute pour indiquer que l'option d'attributs par défaut n'est pas la meilleure façon de fournir une bonne fonctionnalité d'image réactive. En fait, vous devriez vous efforcer d'éviter de créer des thèmes qui reposent sur cette valeur par défaut. La raison en est que l'attribut par défaut empêche les navigateurs de modifier la source de l'image lorsque la zone d'affichage n'est pas aussi grande que la taille de l'image d'origine. Les navigateurs sont également incapables de modifier la source si elle a été modifiée par CSS et qu'une image plus grande est nécessaire.

Filtrage d'images

En tant que développeur de thèmes, vous pouvez utiliser le filtrage dans vos images afin d'extraire un attribut de sizes précis. Cela peut être accompli en utilisant un hook pour la fonction WordPress, wp_calculate_image_sizes . Vous pouvez utiliser cette fonction pour qu'elle fonctionne avec votre thème actuel. Vous pouvez apporter des modifications qui appliquent un attribut de sizes différent à différents types d'images.

Les nouvelles fonctions fournies avec cette version permettent désormais d'appliquer les sizes et les attributs srcset à toutes les images que vous avez ajoutées à l'aide du téléchargeur de médias WordPress. Il vous permet également d'ajouter des attributs aux images dans vos publications. Jetez un œil à wp_get_attachment_image_sizes . Cela renvoie un attribut sizes que vous pouvez attraper et modifier via un filtre dans le fichier functions.php pour votre thème. De même, wp_get_attachment_image_srcset fait la même chose, uniquement pour l'attribut srcset .

Images réactives et votre thème personnalisé

Les nouvelles fonctions fournies avec cette dernière version sont accompagnées de nombreux crochets que vous pouvez utiliser pour fournir une prise en charge efficace des images réactives dans votre thème. Ces crochets incluent les éléments suivants :

Wp_calculate_image_sizes - Un crochet que les développeurs de thèmes peuvent utiliser pour ajuster l'attribut sizes pour travailler avec les points d'arrêt qui sont présents dans leur thème.

Max_srcset_image_width - Un crochet qu'un développeur de thème pourra utiliser pour filtrer en fonction de la largeur maximale des images qui se trouvent dans l'attribut srcset .

W_calculate_image_srcset – Un crochet qui donne aux développeurs la possibilité de filtrer en fonction des attributs srcset .

En savoir plus sur la prise en charge des images réactives

Le manuel du développeur WordPress peut fournir plus d'informations sur l'utilisation efficace de ces crochets. La recherche que vous devez faire variera en fonction de votre niveau de confort pour effectuer ces types d'ajustements en coulisses. Si vous êtes un développeur de thèmes qui poursuit cela strictement comme un passe-temps, vous pouvez choisir de faire un peu d'expérimentation. D'un autre côté, si vous êtes un développeur de thèmes de carrière, vous souhaiterez peut-être investir dans le temps et les ressources nécessaires pour vraiment maîtriser cette mise à jour.

Avantages de la mise à jour

Si vous n'avez pas encore mis à jour WordPress (ou si votre hébergeur WordPress géré n'a pas déjà mis à jour pour vous), vos utilisateurs bénéficieront d'avantages intéressants lorsque vous le ferez. La prise en charge des images réactives peut améliorer les performances des pages, car leurs pages ne perdront pas de temps à extraire des images trop volumineuses. Les utilisateurs noteront également une amélioration très impressionnante de la qualité des images. Ils ne verront pas la «fabrication de saucisses» qui entre dans tout. Au lieu de cela, ils verront simplement que cela fonctionne bien.

En tant que développeur, vous devrez ajuster l'attribut sizes dans chacun des fichiers functions.php pour tous vos thèmes. Cependant, une fois que vous avez fait cet effort initial, les choses deviennent beaucoup plus faciles. Après avoir abordé la courbe d'apprentissage, vous constaterez que travailler avec cette nouvelle fonctionnalité vient assez naturellement.

Il faudra peut-être des recherches et de la pratique pour maîtriser cette nouvelle fonctionnalité et obtenir une prise en charge réactive des images pour vos thèmes personnalisés. Cependant, si vous êtes prêt à fouiller dans le manuel du développeur et à comprendre les choses, vos clients apprécieront vraiment l'amélioration des performances et des fonctionnalités. Cela a été long à venir, et les développeurs de thèmes chevronnés et ceux chargés de maintenir les thèmes personnalisés sont à juste titre enthousiasmés par cette mise à jour.