Des fonctionnalités telles que la prochaine système de widgets basé sur des blocs, l’éditeur de modèles, blocs liés au thème, et d’autres ont occupé une grande partie de l’attention ces derniers temps. Cependant, l’un des meilleurs outils axés sur l’utilisateur livrés avec WordPress 5.8 est un filtre à deux tons pour les blocs Image et Cover.
Le terme “duotone” dans ce sens signifie combiner deux couleurs en tant que filtre. Ensuite, superposez-le sur une image ou une vidéo. Plus précisément, une couleur est utilisée pour les ombres (éléments sombres), et la deuxième couleur est utilisée pour les hautes lumières (couleurs claires).
Lorsque la fonctionnalité d’abord a atterri à Gutenberg 10.6 en mai, j’ai passé quelques heures à le bricoler le premier jour. Depuis, j’en ai accumulé quelques autres. Il s’agit d’un puissant outil d’édition multimédia qui n’oblige pas les utilisateurs à se plonger dans des programmes d’édition d’images, leur permettant de changer l’ambiance d’une histoire en cliquant sur un bouton.
Les duotones peuvent aller d’une simple échelle de gris à un mélange de deux couleurs. Les ombres et les reflets peuvent même être inversés, selon les nuances choisies.
Ce qui suit montre la différence entre une image originale de chatons (car qui n’aime pas les chatons ?) et un avec un filtre en niveaux de gris :
Image originale par rapport à la version bicolore en niveaux de gris.WordPress propose un ensemble de huit ensembles de couleurs bicolores par défaut. Cela comprend une échelle de gris, une échelle de gris foncé et diverses combinaisons, ce qui en fait des filtres amusants. Certains fonctionneront mieux que d’autres, souvent en fonction du fichier multimédia téléchargé.
<img data-attachment-id="119954" data-permalink="https://wptavern.com/duotone-filters-wordpress-5-8-puts-a-powerful-image-editing-tool-into-users-hands/kittens-yellow-purple" data-orig-file="https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple.jpg" data-orig-size="1792,856" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="kittens-yellow-purple" data-image-description="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple-300x143.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple-500x239.jpg" loading="lazy" width="1792" height="856" src="https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple.jpg" alt="Ajout d'un filtre bicolore violet et jaune au-dessus d'une image de chatons dans un champ d'herbe." class="wp-image-119954" srcset="https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple.jpg 1792w, https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple-300x143.jpg 300w, https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple-500x239.jpg 500w, https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple-768x367.jpg 768w, https://wptavern.com/wp-content/uploads/2021/07/kittens-yellow-purple-1536x734.jpg 1536w" sizes="(max-width: 1792px) 100vw, 1792px" />Application du filtre WordPress bicolore violet et jaune.Comme de nombreuses autres fonctionnalités qui attendent les utilisateurs avec WordPress 5.8, les auteurs de thèmes sont ceux qui doivent creuser pour offrir une gamme d’options prêtes à l’emploi aux utilisateurs. Le nouveau configuration du fichier JSON du thème permet aux développeurs de définir un ensemble de couleurs bicolores qui correspondent à leur thème.
Définir des filtres bicolores personnalisés est aussi simple que de brancher un nom, un slug et deux couleurs dans un theme.json
déposer. Le manuel du développeur de thème comprend exemples de création de tels préréglages.
Les utilisateurs ne sont pas limités aux filtres proposés par WordPress ou leurs thèmes. Le popover bicolore leur permet de choisir parmi n’importe quelle gamme de couleurs pour des ombres et des reflets personnalisés.
Duotone fonctionne généralement mieux lorsqu’une image a un contraste élevé, ce qui signifie une large gamme entre les couleurs claires et sombres. Des ombres plus sombres et des reflets plus clairs créent des filtres visuellement plus époustouflants.
Lorsqu’il est utilisé avec le bloc Couverture, les utilisateurs peuvent ajouter des filtres aux arrière-plans d’images et de vidéos. Cependant, ils ont également accès à l’option de couleur de superposition ou de dégradé typique. Cela offre une tonne de flexibilité pour la personnalisation des médias.
<img data-attachment-id="119958" data-permalink="https://wptavern.com/duotone-filters-wordpress-5-8-puts-a-powerful-image-editing-tool-into-users-hands/record-cover-duotone-overlay" data-orig-file="https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay.jpg" data-orig-size="1792,829" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="record-cover-duotone-overlay" data-image-description="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay-300x139.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay-500x231.jpg" loading="lazy" width="1792" height="829" src="https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay.jpg" alt="Application d'un filtre bicolore bleu et rouge avec une superposition transparente noire, violette et bleue sur l'image d'un disque et d'un lecteur." class="wp-image-119958" srcset="https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay.jpg 1792w, https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay-300x139.jpg 300w, https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay-500x231.jpg 500w, https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay-768x355.jpg 768w, https://wptavern.com/wp-content/uploads/2021/07/record-cover-duotone-overlay-1536x711.jpg 1536w" sizes="(max-width: 1792px) 100vw, 1792px" />Filtre bicolore + superposition de dégradé sur un bloc Cover.Étant donné que la fonction bichromie fonctionne avec un fichier SVG en ligne sous le capot, cela signifie également que son utilisation ne modifie pas de manière permanente les fichiers image ou vidéo. Les utilisateurs peuvent toujours utiliser leurs supports originaux ailleurs sur le site sans télécharger une deuxième copie.
Duotone n’est que la pointe de l’iceberg. Il y a tellement d’autres possibilités que de simplement poser quelques couleurs sur une image. Bence Szabó a écrit un tutoriel complet sur l’utilisation Filtres SVG pour les motifs sur CSS-Tricks. Cela pourrait être une voie pour les options d’arrière-plan à l’avenir – grain de bois, quelqu’un? Peut-être que toutes les possibilités ne conviennent pas au cœur de WordPress, mais j’aimerais voir les auteurs de plugins essayer certaines alternatives.
Comme ça:
Comme Chargement…
— to wptavern.com