{"id":11833,"date":"2020-10-22T15:59:33","date_gmt":"2020-10-22T15:59:33","guid":{"rendered":"http:\/\/mega.wp-rocket.me\/divi\/?p=11833"},"modified":"2021-02-19T16:21:19","modified_gmt":"2021-02-19T16:21:19","slug":"test-duplication","status":"publish","type":"post","link":"http:\/\/mega.wp-rocket.me\/divi\/test-duplication","title":{"rendered":"Test <picture> duplication"},"content":{"rendered":"<h3 style=\"margin-bottom:20px;font-family:arial;\">Example of default behavior when &lt;picture&gt; tags are used in HTML before Imagify swaps &lt;img&gt; tags out. We end up with nested &lt;picture&gt; tags.<\/h3>\n<picture><source srcset=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg.webp 2880w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-1280x960.jpg.webp 1280w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-980x735.jpg.webp 980w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-480x360.jpg.webp 480w\" type=\"image\/webp\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2880px, 100vw\" \/><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2880px, 100vw\" srcset=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg 2880w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-1280x960.jpg 1280w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-980x735.jpg 980w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-480x360.jpg 480w\" alt=\"\" width=\"2880\" height=\"2160\" \/>\n<\/picture>\n<h3 style=\"margin:80px 0 20px;font-family:arial;\">Example of adding class of &#8220;itoi-skip-picture&#8221; to an &lt;img&gt; tag to prevent nested &lt;picture&gt; tags.<\/h3>\n<picture><source srcset=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg.webp 2880w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-1280x960.jpg.webp 1280w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-980x735.jpg.webp 980w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-480x360.jpg.webp 480w\" type=\"image\/webp\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2880px, 100vw\" \/><img loading=\"lazy\" decoding=\"async\" class=\"itoi-skip-picture\" src=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2880px, 100vw\" srcset=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg 2880w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-1280x960.jpg 1280w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-980x735.jpg 980w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-480x360.jpg 480w\" alt=\"\" width=\"2880\" height=\"2160\" \/>\n<\/picture>\n<h3 style=\"margin:80px 0 20px;font-family:arial;\">Example of adding attribute of data-itoi-skip-picture=&#8221;yes&#8221; to an &lt;img&gt; tag to prevent nested &lt;picture&gt; tags.<\/h3>\n<picture><source srcset=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg.webp 2880w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-1280x960.jpg.webp 1280w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-980x735.jpg.webp 980w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-480x360.jpg.webp 480w\" type=\"image\/webp\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2880px, 100vw\" \/><img loading=\"lazy\" decoding=\"async\" data-itoi-skip-picture=\"yes\" class=\"\" src=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 2880px, 100vw\" srcset=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg 2880w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-1280x960.jpg 1280w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-980x735.jpg 980w, http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-480x360.jpg 480w\" alt=\"\" width=\"2880\" height=\"2160\" \/>\n<\/picture>\n<h3 style=\"margin:80px 0 20px;font-family:arial;\">Example to show this can be used for &lt;img&gt; not nested inside &lt;picture&gt; as well for cases where there may be a layout or lazyload issue. This would allow the &lt;picture&gt; tags option to still be enabled if it works in some cases for users and some cases not.<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" data-itoi-skip-picture=\"yes\" src=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg\" alt=\"\" width=\"2880\" height=\"2160\" class=\"alignnone size-full wp-image-11709\" \/><\/p>\n<h3 style=\"margin:80px 0 20px;font-family:arial;\">Example to show &lt;img&gt; tags without either the class or attribute applied to skip replacement and that are not already nested inside a &lt;picture&gt; tags will still be swapped out for &lt;picture&gt; tags with this helper enabled.<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg\" alt=\"\" width=\"2880\" height=\"2160\" class=\"alignnone size-full wp-image-11709\" \/><\/p>\n<div style=\"width:600px;height:600px;background-image:url(http:\/\/mega.wp-rocket.me\/divi\/wp-content\/uploads\/2020\/10\/IMG_20200126_100422-scaled.jpg);\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Example of default behavior when &lt;picture&gt; tags are used in HTML before Imagify swaps &lt;img&gt; tags out. We end up with nested &lt;picture&gt; tags. Example of adding class of &#8220;itoi-skip-picture&#8221; to an &lt;img&gt; tag to prevent nested &lt;picture&gt; tags. Example of adding attribute of data-itoi-skip-picture=&#8221;yes&#8221; to an &lt;img&gt; tag to prevent nested &lt;picture&gt; tags. Example [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11833","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/posts\/11833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/comments?post=11833"}],"version-history":[{"count":0,"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/posts\/11833\/revisions"}],"wp:attachment":[{"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/media?parent=11833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/categories?post=11833"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mega.wp-rocket.me\/divi\/wp-json\/wp\/v2\/tags?post=11833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}