{"id":106,"date":"2023-05-23T17:44:14","date_gmt":"2023-05-23T17:44:14","guid":{"rendered":"http:\/\/svg-presentation.local\/?page_id=106"},"modified":"2023-05-23T17:52:21","modified_gmt":"2023-05-23T17:52:21","slug":"duotone-filter","status":"publish","type":"page","link":"https:\/\/jeffmcnear.com\/wpsvg\/duotone-filter\/","title":{"rendered":"Duotone filter"},"content":{"rendered":"\n<p>The image block in gutenberg has a built in Duotone filter<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"478\" src=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-1-1024x478.png\" alt=\"\" class=\"wp-image-108\" srcset=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-1-1024x478.png 1024w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-1-300x140.png 300w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-1-768x358.png 768w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-1.png 1070w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Core WordPress includes several duotone sets, and there are provisions for themes to adjust these sets and\/or add new ones.<\/p>\n\n\n\n<p>Once a pair has been selected a class is assigned to the block that assigns CSS filters to the container thereby changing the how the image appears:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large wp-duotone-8c00b7-fcff41-1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"367\" src=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/1AAA-sandstorm1-1024x367.jpg\" alt=\"\" class=\"wp-image-83\" srcset=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/1AAA-sandstorm1-1024x367.jpg 1024w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/1AAA-sandstorm1-300x107.jpg 300w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/1AAA-sandstorm1-768x275.jpg 768w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/1AAA-sandstorm1-1536x550.jpg 1536w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/1AAA-sandstorm1-2048x733.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>While the CSS behind this is pretty complex, essentially what is happening is that a &#8220;replacement&#8221; color is being applied to the dark elements of the image (shadow) and another replacement color is being applied to the lighter elements.<\/p>\n\n\n\n<p>For a deep dive into the CSS at play:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cssfiltergenerator.com\" target=\"_blank\" rel=\"noreferrer noopener\">cssfiltergenerator.com<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/cssduotone.com\" target=\"_blank\" rel=\"noreferrer noopener\">cssduotone.com<\/a><\/li>\n<\/ul>\n\n\n\n<p>The Duotone selector also will allow the selection of custom colors for the &#8220;shadow&#8221; and &#8220;highlight&#8221; colors<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"295\" height=\"656\" src=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-2.png\" alt=\"\" class=\"wp-image-111\" srcset=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-2.png 295w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-2-135x300.png 135w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/figure>\n\n\n\n<p>In the case of a single color logo or icon there is only one color that can be applied &#8211; the shadow &#8230; besides the default selections you can set any custom hex value by clicking in the checkered region.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"720\" src=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-3.png\" alt=\"\" class=\"wp-image-112\" srcset=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-3.png 312w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/duotone-3-130x300.png 130w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/figure>\n\n\n\n<p>this would allow a color change from black to any color you like!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>BEFORE<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/JPG-beakers-boiling.jpg\" alt=\"\" class=\"wp-image-66\" width=\"203\" height=\"325\" srcset=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/JPG-beakers-boiling.jpg 406w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/JPG-beakers-boiling-187x300.jpg 187w\" sizes=\"auto, (max-width: 203px) 100vw, 203px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>AFTER<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized wp-duotone-ff6900-ffffff-2\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/JPG-beakers-boiling.jpg\" alt=\"\" class=\"wp-image-66\" width=\"203\" height=\"325\" srcset=\"https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/JPG-beakers-boiling.jpg 406w, https:\/\/jeffmcnear.com\/wpsvg\/wp-content\/uploads\/2023\/05\/JPG-beakers-boiling-187x300.jpg 187w\" sizes=\"auto, (max-width: 203px) 100vw, 203px\" \/><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The image block in gutenberg has a built in Duotone filter Core WordPress includes several duotone sets, and there are provisions for themes to adjust these sets and\/or add new ones. Once a pair has been selected a class is assigned to the block that assigns CSS filters to the container thereby changing the how [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":0,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages\/106\/revisions"}],"wp:attachment":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/media?parent=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}