Created by Alex Lende
Beginning with WordPress 5.8, you can colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images to integrate well with your themes.
Filters? Like on Instagram?
Duotone doesn't work in quite the same way as Instagram filters. Whereas Instagram filters do color adjustments (color levels/curves and sometimes a vignette for the photo editors among us), the new duotone filters entirely replace the colors of your images.
You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights.
For example, a grayscale filter can be created by selecting black and white as shadow/highlight colors, and a sepia filter by choosing brown and tan.
Analogous colors can add a subtle effect and work well for cover backgrounds where the overlaid text still needs to stand out.
Much more vibrant and interesting effects can be made with complementary colors.
How Do I Add Duotone Filter?
The duotone effect works best on high-contrast images, so start with an image with a lot of large dark and light areas. From the block toolbar, use the filter button and choose a preset:
You can also choose colors from your theme's palette, or a custom color of your choice.
In addition to the image block, duotone can be applied to both images and video in the cover block.
Will This Overwrite Images in My Media Library?
Images and videos in your media library will remain unchanged. The duotone effect works using SVG filters and the CSS filter property , so the image or video is never modified in your library. On the one hand, this means that you can apply a filter to an image that you link to that doesn't exist in your media library. On the other hand, this means that the filter won't show up in RSS feeds or places that use the image URL directly.
Can I Add Duotone Colors to Blocks or Themes That I Develop?
The API for adding duotone colors to blocks is experimental in Gutenberg v10.6. Still, the documentation for using it in your own blocks can be found and will be updated under Supports Color in the Block Editor Handbook. Themes can add duotone presets with theme.json. More information can be found under Global Settings & Styles Presets in the Block Editor Handbook.
Try it Out Now Using the Gutenberg plugin
The duotone feature was released in version 10.6 of the Gutenberg plugin, so you can try it out now prior to the WordPress 5.8 release in July.
- Kendall Jenner tries out her own striking icy blue eye filter... after her sister Kylie used the same look
- The Property Brothers Reveal One Color That Makes Them Cringe
- Kate Hudson sports colorful leggings with a yellow face mask featuring pink lips for her walk in LA
- Mood boosting fashions! Desigual releases colorful clothing and accessory collaboration with luxury designer Christian Lacroix
- Colors TV To Pay Tribute To Irrfan Khan & Rishi Kapoor; Hina Khan, Arjun & Others To Participate
- Elsa Hosk says the rain has been getting her down so she slipped into a bright-colored bra: 'This look makes me feel like I'm on vacation'
- OnePlus’ 8 Pro has an accidental X-ray vision filter that sees through plastic and clothes
- The OnePlus 8 Pro’s color filter camera can see through certain plastics
- Ghost Of Tsushima: New Gameplay Details, Film Filter, Release Date, Combat, And Everything Else We Know
- Facebook bows to WA state pressure to remove “discriminatory” ad filters
Coloring Your Images With Duotone Filters have 617 words, post on wordpress.org at May 26, 2021. This is cached page on WP Discuss. If you want remove this page, please contact us.