Comprendre le fonctionnement des images WordPress (pour un design plus réactif)

Ce que vous allez créer

L’un des plus grands défis auxquels les développeurs Web sont confrontés aujourd’hui est la gestion correcte des images pour une conception réactive. Nous sommes confrontés à des problèmes tels que le dimensionnement correct de l'image pour l'écran sur lequel elle est visualisée, en prenant en compte les vitesses de téléchargement de l'utilisateur, que l'appareil soit ou non une rétine (ou en général un écran à très haute résolution), etc.. 

Heureusement, le element est récemment devenu une spécification acceptée qui sera implémentée par les principaux navigateurs, mais il reste encore du travail à faire. Heureusement, la façon dont WordPress gère les images rend les choses beaucoup plus faciles. 

Comment fonctionne Media Uploader

Commençons par un rapide cours intensif sur l'utilisation de Media Uploader. Il est accessible dans l’administrateur de WordPress à partir de plusieurs domaines, y compris les publications, les pages, les types de publication personnalisés qui la prennent en charge (généralement, l’éditeur) et le menu Médias.. 

La seule différence entre le menu Multimédia et le reste est qu'une image est directement associée à un message ou à une page si elle est téléchargée à partir de l'éditeur.. 

Une fois qu'une image est téléchargée, WordPress crée par défaut jusqu'à 4 tailles: 

• vignette (150x150)
• moyen (300 max x 300 max)
• grande (640 max x 640 max)
• plein (la taille originale de l'image). 

Vous pouvez également ajouter vos propres tailles d’image à l’aide de la fonction add_image_size (). Par exemple, si nous voulions ajouter une image pour un produit de 700 pixels de large sur 450 pixels de haut, nous ferions ce qui suit: 

add_image_size ('product-img', 700, 450, false);

Ceci indique à WordPress de créer une nouvelle image avec le nom "product-img" avec nos dimensions spécifiées. Le dernier argument est de savoir si l'image doit être recadrée ou non. 

Lorsqu'il est réglé sur faux, l'image sera redimensionnée proportionnellement sans recadrage; lorsqu'il est défini sur true, l'image est rognée des côtés ou du haut / bas. Soyez prudent avec cela car les résultats varieront d'une image à l'autre.. 

Insérer une image

Il existe deux manières d'insérer une image dans un message ou une page: la première consiste à utiliser Media Uploader, comme illustré ci-dessous: 

La deuxième méthode consiste à utiliser une image sélectionnée. Vous pouvez activer les images en vedette en ajoutant ce code à celui de votre thème. functions.php fichier, ou quelque part au début de vos plugins: 

if (function_exists ('add_theme_support'))) add_theme_support ('post-vignettes'); 

Cela ajoutera une zone "image sélectionnée" à tous les articles, pages et types d'articles personnalisés qui le prennent en charge. Vous pouvez également envoyer un deuxième argument, qui est un tableau de ce qui devrait avoir une image sélectionnée. 

Par exemple, si vous souhaitez uniquement que les publications prennent en charge les images en vedette: 

if (function_exists ('add_theme_support')) add_theme_support ('post-vignettes', array ('post');

La dernière étape consiste à placer ce code dans la boucle de votre modèle, où vous souhaitez que l'image apparaisse: 

if (has_post_thumbnail ()) the_post_thumbnail ('large');  

L'argument accepté est le nom de la taille de l'image que vous souhaitez utiliser. Par défaut, c'est post-vignette. Une fois que vous avez cela, vous ajouterez votre image sélectionnée via cette case: 

Enfin, si vous téléchargez un ensemble d’images dans le même message ou la même page, vous pouvez les insérer sous forme de galerie à l’aide de la touche suivante. [Galerie] shortcode, sur lequel vous pouvez en savoir plus. 

Améliorations de 3.9

Avec le lancement de WordPress 3.9, et avec lui, de très belles améliorations ont été apportées aux images et à la galerie. Outre les améliorations apportées à l'éditeur visuel, comme la possibilité de glisser-déposer des images, add_image_size () reçoit un nouvel argument pour spécifier s'il faut rogner sur les côtés ou haut / bas. 

Alors, qu'est-ce que tout cela a à voir avec Responsive? Content que tu aies demandé! 

Tirer parti du téléchargeur de média

La base de la En tant que développeurs Web, nous fournissons plusieurs copies d’une image à afficher à des points de rupture particuliers, c.-à-d.. image-images_14 / comprendre-comment-wordpress-images-travailler pour une meilleure réactivité-design_2.jpg pour les smartphones et image-full.jpg pour les grands écrans. 

Pour le moment, cet élément est accepté mais quelques mois après son intégration dans les navigateurs. Il y a une autre option, cependant. 

picturefill.js

Il existe un fichier JavaScript créé par le groupe de filaments appelé picturefill.js, qui émule la même fonction que le élément. 

La syntaxe ressemble à ceci: 

Notez qu'il y a un données-src entrée pour chaque image que nous voulons utiliser, ainsi qu'un point d'arrêt minimum associé pour afficher cette image. Il est à noter qu'il n'y a pas de limite au nombre d'images / points d'arrêt que vous pouvez avoir.. 

C’est actuellement un moyen largement accepté d’obtenir le même effet que le élément. J'imagine que lors de son déploiement sur les navigateurs, la manière appropriée de coder des images réactives sera la suivante: -> picturefill.js ->

Cela nous permettra d'utiliser le dernier et le meilleur HTML dans les navigateurs modernes avec les solutions de rechange appropriées (amélioration progressive!).. 

Avec picturefill.js et les multiples images créées par Media Uploader, nous pouvons créer un processus automatisé pour des images réactives sur nos sites utilisant WordPress.. 

Mettre tous ensemble

À l’heure actuelle, il n’ya aucun moyen que WordPress le fasse de manière native; J'imagine que ça va changer quand le l’élément est déployé (dibs lors de sa soumission à Core :). Cela ne signifie pas que nous pouvons faire nous-mêmes quelques choses pour automatiser le processus. Dans cette section, nous allons aborder quelques possibilités. 

Remarque: Vous remarquerez que j'utilise le préfixe jlc_ sur mes fonctions. Je vous recommande de vous utiliser pour éviter les conflits avec d'autres thèmes et plugins. 

Remplacement des images en vedette

La première pièce de ce puzzle, et la plus simple, consiste à remplacer les images présentées par les picturefill.js balisage. 

Ceci peut être réalisé avec le filtre post_thumbnail_html, qui échangera la balise par défaut pour la nôtre. La première chose à faire est de mettre en file d'attente picturefill.js (ce qui peut être fait en functions.php ou dans votre plugin): 

function jlc_script () wp_register_script ('picturefill', get_stylesheet_directory_uri (). '/js/picturefill.js'); wp_enqueue_script ('picturefill');  add_action ('wp_enqueue_scripts', 'jlc_script');

Assurez-vous de modifier le chemin ici pour que l'emplacement de votre picturefill.js fichier. Une fois que cela est en place, il est temps d'ajouter notre fonction de remplacement:

function jlc_get_featured_image ($ html, $ aid = false) $ tailles = array ('vignette', 'moyen', 'grand', 'complet'); $ img = ''; $ ct = 0; $ aid = (! $ aid)? get_post_thumbnail_id (): $ aid; foreach ($ tailles en tant que $ size) $ url = wp_get_attachment_image_src ($ aid, $ size); $ width = ($ ct < sizeof( $sizes ) - 1 ) ? ( $url[1] * 0.66 ) : ( $width / 0.66 ) + 25; $img .= ' 0)? 'data-media = ”(min-width:'. $ width .'px)”>':'>'; $ ct ++;  $ url = wp_get_attachment_image_src ($ aid, $ tailles [1]); $ img. = ' '; return $ img; 

Plusieurs tâches sont effectuées ici: 

1. Nous avons un tableau de chaque taille d'image que nous voulons inclure (par nom). Vous pouvez ajouter ou supprimer ici comme vous le souhaitez
2. Nous avons mis en place le picturefill.js balisage
3. Nous parcourons le tableau, obtenant l'URL de chaque taille et l'ajoutant comme entrée à notre élément picturefill.js
4. Nous incluons des calculs pour déterminer où les points d'arrêt devraient se produire en fonction de la taille de l'image.
5. Pour les utilisateurs sans javascript, nous retombons sur l'image de taille moyenne

La prochaine étape consiste à ajouter notre filtre, que vous pouvez ajouter directement sous la fonction: 

add_filter ('post_thumbnail_html', 'jlc_get_featured_image');

Maintenant notre fonction jlc_get_featured_image () sera utilisé pour la sortie post_thumbnail au lieu du marquage par défaut.

J'ai regroupé tout cela dans un simple plug-in appelé Responsive Featured Image. Vous pouvez le télécharger depuis Github.

Autres méthodes

Comme vous pouvez l’imaginer, la gestion des images est une tâche assez complexe en matière de conception réactive. La fonction sur ne fonctionnera qu'avec les images en vedette, pas toutes les images de la publication. Bien qu'il existe des méthodes pour ce faire, y compris ce plugin, mes tests ont montré des problèmes de performances et de dimensionnement. 

Vous pouvez également utiliser un shortcode, en passant une URL ou un identifiant d'image pour générer le code, comme suit: [jlc_picturefill_image aid = x]. Malheureusement, sans codage étendu, cela désactivera l'utilisation de Media Uploader pour insérer des images dans le message. Avec la fonctionnalité glisser-déposer de 3.9, cela pourrait causer encore plus de conflits. 

Si vous êtes intéressé par cette méthode, dans mon livre, Responsive Design avec WordPress, Je vais beaucoup plus en profondeur sur cela et les images WordPress en général.

Conclusion

Dans cet article, nous avons longuement étudié la manière dont WordPress traite les images et exploré un moyen d’intégrer picturefill.js dans un manoir facile à utiliser et surtout efficace. 

Il est important de savoir qu'il s'agit d'un domaine d'intérêt en constante évolution. Alors que de meilleures méthodes commencent à se développer, je suis impatient de voir ce que l'avenir (proche, espérons-le) réserve pour les images réactives et WordPress..