Comment mettre en œuvre un traitement d'image réactif à l'aide d'API génériques ?

Dans cet article, nous allons explorer ensemble l'API Responsive Images de WordPress. Nous allons mentionner ce que sont les images réactives, pourquoi vous devriez les utiliser, comment WordPress fait fonctionner ces images, et ce qu'il faut faire si vous voulez les personnaliser.

Qu'est-ce qu'une image réactive ?

Images réactivesest une image qui peut être adaptée à la taille de l'écran de l'appareil sur lequel elle est visualisée. C'est important car cela signifie que l'image sera toujours belle, quel que soit l'appareil sur lequel elle est visualisée.

Voyons ce qu'il en est.Un exemple.

La plupart des navigateurs modernes disposent d'un mode spécial pour afficher les mises en page des pages web sur les appareils mobiles. Dans les navigateurs basés sur Chrome, il s'agit du mode appareil, et dans Firefox et Safari, il s'agit du mode "responsive design". Vous pouvez généralement y accéder à partir des outils de développement de votre navigateur. Lorsque ce mode est activé, vous pouvez voir comment une page web s'affichera sur différents appareils.

Si vous regardez l'image d'en-tête dans cet exemple, vous verrez qu'elle est recadrée lorsque vous l'affichez sur votre appareil mobile. En revanche, l'image de la zone de contenu ne l'est pas ; elle est simplement affichée en plus petit.

Par conséquent, vous souhaiterez peut-être pouvoir afficher une version recadrée de cette image sur un appareil mobile et l'image complète sur un appareil de bureau. C'est là que les images réactives s'avèrent utiles.

Comme vous pouvez le voir dans cet exemple d'image réactiveComme vous pouvez le voir dans , lorsque vous passez à un appareil mobile, l'image d'en-tête et l'image du contenu principal sont recadrées.

Bien que la connaissance du fonctionnement des images réactives dépasse le cadre de ce tutoriel, vous pouvez en savoir plus à ce sujet dans la documentation Web de MDN à l'adresse suivantePour en savoir plus sur la mise en place d'images réactives, consultez la rubrique.

API WordPress Responsive Images

srcsetA partir de WordPress 4.4, l'inclusion et l'attribution de lafonction (math.)taillesEn ce qui concerne les balises d'images générées, WordPress supporte nativement les images réactives. Cela signifie qu'elle est activée par défaut et que toute image générée par WordPress est automatiquement réactive.wp_get_attachment_image()

Pour comprendre son fonctionnement, prenons un exemple simple.

Tout d'abord, ajoutez l'image à la bibliothèque multimédia de votre site WordPress.

Si vous vous rendez ensuite dans le répertoire de téléchargement et que vous visualisez l'endroit où l'image est stockée, vous verrez qu'il existe plusieurs versions de l'image.

En effet, WordPress génère automatiquement plusieurs versions d'une image dans différentes tailles, qui peuvent ensuite être utilisées dans différents contextes.

Avant l'apparition des images réactives, les développeurs essayaient de servir dynamiquement différentes images au navigateur en fonction du type d'appareil. Le serveur vérifie la taille de l'appareil utilisé et sert ensuite l'image appropriée.

Cela peut se faire en utilisant la fonctionagent utilisateurLa chaîne est mise en œuvre sous la forme d'une chaîne que le navigateur envoie au serveur et qui contient des informations sur le navigateur et l'appareil utilisés.

// vérifier la variable $_SERVER["HTTP_USER_AGENT"] pour voir s'il s'agit d'une requête concernant un appareil mobile
$isMob = is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]), "mobile")) ;

if($isMob){
    echo 'Using Mobile Device...' ;
}else{
    echo 'Utilisation d'un ordinateur de bureau...' ; }else{ ;
}

Cependant, cela rend les tests difficiles, car vous devez les effectuer sur un appareil physique à l'aide de la fonctionBrowserStacket d'autres services, ou de mettre en place une chaîne d'agents utilisateurs dans un environnement de test.

La conception réactive utilise des éléments tels que les requêtes multimédias pour rendre une page unique qui réagira dans le navigateur en fonction d'éléments tels que la largeur de la fenêtre et la densité d'affichage. Les images réactives suivent cette stratégie et envoient toutes les informations au navigateur à l'avance, laissant à ce dernier le soin de charger l'image appropriée plutôt que de prendre ces décisions sur le serveur avant le chargement de la page.

Voyons cela en action en ajoutant l'image à l'article et en réglant sa taille sur pleine grandeur dans l'éditeur.

Lorsque vous prévisualisez l'image, vous remarquez que la balise image ne contient pas seulement l'URL de l'image, mais aussi une balisesrcsetet un attributtaillesAttributs.

<img decoding="async" fetchpriority="high" width="799" height="533" src="https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg"  class="wp-image-9" 
     srcset="     https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg 799w,      https://learnpress.test/wp-content/uploads/2023/09/water-4-300x200.jpeg 300w,      https://learnpress.test/wp-content/uploads/2023/09/water-4-768x512.jpeg 768w" 
     sizes="(max-width: 799px) 100vw, 799px">

Examinons de plus près cette balise image pour comprendre ce que font ces attributs.

devraitsrcsetcontient une liste de toutes les versions différentes de l'image générée par WordPress, ainsi que la largeur de cette image en pixels.

Dans cet exemple, il y a 3 versions différentes de l'image avec des largeurs de799et769répondre en chantant300.

devraittaillesspécifie la largeur de la mise en page de l'image pour chaque liste de conditions de support. Dans cet exemple, les conditions de support sont les suivantes(max-width : 799px)et dispose de deux largeurs de présentation100vwrépondre en chantant799px.100vwIndique que l'image sera affichée à 100% de la largeur de la fenêtre.799pxIndique que l'image sera affichée à 799px.

Par conséquent, dans cet exemple, si la largeur de la fenêtre est inférieure à 799 px, l'image sera affichée à 100% de la largeur de la fenêtre, sinon l'image sera affichée à une largeur de 799 px.

Le navigateur peut alors utiliser ces informations pour déterminer l'image à charger en fonction de l'appareil (déterminé par la largeur de la fenêtre) qui visualise l'image. La logique côté serveur n'est plus nécessaire, ce qui permet d'accélérer les temps de requête des pages. Les images étant servies de manière statique, le navigateur peut les mettre en cache, ce qui accélère encore les temps de chargement des pages.

Nouvelles fonctionnalités et crochets

WordPress 4.4 introduit un grand nombre de nouvelles fonctions et de crochets qui facilitent le travail avec des images réactives.

• wp_get_attachment_image_srcset () - récupère la valeur de l'attribut d'attachement de l'imagesrcset.
• wp_calculate_image_srcset () - fonction d'aide pour calculer la source de l'image à inclure dans la propriétésrcset.
• wp_get_attachment_image_sizes () - Crée la valeur de l'attribut size de l'image.
• wp_calculate_image_sizes () - fonction d'aide utilisée pour créer l'attribut taille de l'image.
• wp_image_add_srcset_and_sizes () -srcsetA l'existantimgpour lui ajouter des attributs et le redimensionner.

Afin d'empêcher le transfert de données verssrcsetajoute des images de très grande taille, ajoute unmax_srcset_image_width Filtre (machine)Il permet au thème de définir la largeur maximale des images contenues dans la liste.srcsetLa valeur par défaut est de 2048 pixels. La valeur par défaut est de 2048 pixels.

Balisage d'image personnalisé et réactif

Le balisage des images peut également être personnalisé si nécessaire.

Vous pouvez utiliser des filtresrépondre en chantantFiltre (machine)pour modifier la valeur par défautsrcsetrépondre en chantanttaillesou en utilisant le filtre wp_get_attachment_image_attributesécraserLes attributs ou des images qui ne sont pas intégrées dans le contenu du message (par exemple, les vignettes du message, les galeries, etc.) sont modifiés de la même manière que les autres attributs d'image.wp_calculate_image_srcset wp_calculate_image_sizes srcsettailles

Si vous développez un thème, vous pouvez également créer vos propres balises personnalisées à l'aide de la fonctionwp_get_attachment_image_srcset paradigme.

Prenons un exemple.

Supposons que vous souhaitiez générer un résultatimgpour l'étiquette de cette image, mais vous ne voulez rendre que des images de taille moyenne et définir une fonctiontaillesAttributs.

Par défaut, l'image est affichée à une largeur de 100% pour les fenêtres de moins de 799 pixels, et à une largeur de 799 pixels pour les fenêtres plus larges où vous souhaitez définir la propriété Size pour utiliser une largeur d'image moyenne de 768 pixels.

Cela signifie que vous devez définir la propriété "size" à(max-width : 768px) 100vw, 768px.

function get_custom_responsive_image( $attachment_id ) {
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' ) ;
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ;
echo '<img src="' . $img_src . '" srcset="' . $img_srcset . '" sizes="(max-width: 768w) 100vw, 768px" alt="Notre image responsive personnalisée">';
}

Vous pouvez ensuite appeler cette fonction dans n'importe quel fichier de thème prenant en charge PHP, comme les modèles et les sections de modèles dans le thème Classic, ou les modèles de blocs dans le thème Block.

Dans cet exemple, elle est ajoutée au schéma par défaut du pied de page du thème TwentyTwelveThirteen, qui se trouve dans le bloc en haut du schéma. L'ID de l'image est 9, que vous pouvez transmettre à la fonction :

	<!-- wp:group {"align":"wide"} -->
	<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40)">
		<?php get_custom_responsive_image( 9 ); ?>
	</div>
	<!-- /wp:group -->

Si vous visualisez cette image sur la page d'accueil, vous pouvez voir que la propriété Taille personnalisée a été utilisée pour cette image en particulier.

Si vous testez cela en mode périphérique, vous verrez qu'en dessous de 768 pixels, l'image est affichée à 100% de la largeur de la fenêtre, et qu'au-dessus de 768 pixels, l'image est affichée à 768 pixels de large.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.