{"id":253232,"date":"2025-09-30T08:50:31","date_gmt":"2025-09-30T08:50:31","guid":{"rendered":"https:\/\/en-gb.wordpress.org\/plugins\/responsive-picture-block\/"},"modified":"2026-03-12T08:40:00","modified_gmt":"2026-03-12T08:40:00","slug":"responsive-picture-block","status":"publish","type":"plugin","link":"https:\/\/twd.wordpress.org\/plugins\/responsive-picture-block\/","author":23278042,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.1","stable_tag":"1.1.1","tested":"6.9.4","requires":"6.3","requires_php":"7.4","requires_plugins":null,"header_name":"Responsive Picture Block","header_author":"Core Essentials","header_description":" HTML element for blocks. Wrap multiple core\/image blocks for art direction. Uses per child with optional media override. Robust ordering for mixed media queries (max\/min\/range).","assets_banners_color":"281b8c","last_updated":"2026-03-12 08:40:00","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/coreessentials.online\/plugins-for-wordpress\/responsive-picture-block\/","header_author_uri":"https:\/\/coreessentials.online\/","rating":5,"author_block_rating":0,"active_installs":0,"downloads":945,"num_ratings":1,"support_threads":2,"support_threads_resolved":2,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"coreessentials","date":"2025-09-30 11:05:47"},"1.1.0":{"tag":"1.1.0","author":"coreessentials","date":"2026-02-17 09:27:20"},"1.1.1":{"tag":"1.1.1","author":"coreessentials","date":"2026-03-12 08:40:00"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon.svg":{"filename":"icon.svg","revision":3370243,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3370243,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3370243,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3480941,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"landingPage\":\"\\\/responsive-picture-block\\\/\",\"preferredVersions\":{\"php\":\"8.2\",\"wp\":\"latest\"},\"phpExtensionBundles\":[\"kitchen-sink\"],\"steps\":[{\"step\":\"setSiteOptions\",\"options\":{\"blogname\":\"Responsive Picture Block Demo\"}},{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"responsive-picture-block\"},\"options\":{\"activate\":true}},{\"step\":\"mkdir\",\"path\":\"\\\/wordpress\\\/wp-content\\\/uploads\\\/2025\\\/11\"},{\"step\":\"writeFile\",\"path\":\"\\\/wordpress\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/emilia-willberg-adEviDyBoEI-unsplash.webp\",\"data\":{\"resource\":\"url\",\"url\":\"https:\\\/\\\/raw.githubusercontent.com\\\/iwtw-richb\\\/demo-content\\\/refs\\\/heads\\\/main\\\/emilia-willberg-adEviDyBoEI-unsplash.webp\"}},{\"step\":\"writeFile\",\"path\":\"\\\/wordpress\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/steven-van-elk-wyPZrkpuyu4-unsplash.webp\",\"data\":{\"resource\":\"url\",\"url\":\"https:\\\/\\\/raw.githubusercontent.com\\\/iwtw-richb\\\/demo-content\\\/refs\\\/heads\\\/main\\\/steven-van-elk-wyPZrkpuyu4-unsplash.webp\"}},{\"step\":\"wp-cli\",\"command\":\"wp media import \\\/wordpress\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/emilia-willberg-adEviDyBoEI-unsplash.webp --porcelain\"},{\"step\":\"wp-cli\",\"command\":\"wp media import \\\/wordpress\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/steven-van-elk-wyPZrkpuyu4-unsplash.webp --porcelain\"},{\"step\":\"runPHP\",\"code\":\" 'attachment', 'post_status' => 'inherit', 'posts_per_page' => -1, 'orderby' => 'ID', 'order' => 'DESC']); $steven_id = null; $emilia_id = null; foreach ($attachments as $att) { $file = get_attached_file($att->ID); if (strpos($file, 'steven-van-elk') !== false) { $steven_id = $att->ID; } if (strpos($file, 'emilia-willberg') !== false) { $emilia_id = $att->ID; } if ($steven_id && $emilia_id) break; } if (!$steven_id || !$emilia_id) { echo 'Error: Could not find attachments'; exit; } $steven_src = wp_get_attachment_image_url($steven_id, 'large'); $emilia_src = wp_get_attachment_image_url($emilia_id, 'large'); if (!$steven_src || !$emilia_src) { echo 'Error: Could not get image URLs'; exit; } $content = '' . \\\"\\\\n\\\" . '
<\\\/div>' . \\\"\\\\n\\\" . '' . \\\"\\\\n\\\\n\\\" . '' . \\\"\\\\n\\\" . '

Preview this page in desktop and mobile mode to see the change of art direction based on device.
Challenge<\\\/strong>: Try adding a tablet version or a landscape only version with a custom media query.<\\\/p>' . \\\"\\\\n\\\" . '' . \\\"\\\\n\\\\n\\\" . '' . \\\"\\\\n\\\" . '

<\\\/div>' . \\\"\\\\n\\\" . '' . \\\"\\\\n\\\\n\\\" . '' . \\\"\\\\n\\\" . '' . \\\"\\\\n\\\" . '
\\\"\\\"<\\\/figure>' . \\\"\\\\n\\\" . '' . \\\"\\\\n\\\\n\\\" . '' . \\\"\\\\n\\\" . '
\\\"\\\"<\\\/figure>' . \\\"\\\\n\\\" . '' . \\\"\\\\n\\\" . ''; wp_insert_post(['post_title' => 'Responsive Picture Block Test', 'post_name' => 'responsive-picture-block', 'post_content' => $content, 'post_status' => 'publish', 'post_type' => 'page']); echo 'OK';\"}]}"}},"all_blocks":{"ce\/responsive-picture":{"name":"ce\/responsive-picture","title":"Responsive Picture (Group)"}},"tagged_versions":["1.0.0","1.1.0","1.1.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3370243,"resolution":"1","location":"assets","locale":""},"screenshot-2.gif":{"filename":"screenshot-2.gif","revision":3371045,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3370243,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3370348,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"Block wrapper with Desktop, Tablet, Mobile child options","2":"Front-end markup: <picture><\/code> with differnt image for mobile","3":"Choosing Responsive Picture Block in the block editor"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[8521,148857,148076,53596,2698],"plugin_category":[],"plugin_contributors":[242178],"plugin_business_model":[],"class_list":["post-253232","plugin","type-plugin","status-publish","hentry","plugin_tags-art-direction","plugin_tags-block-editor","plugin_tags-gutenberg","plugin_tags-picture-element","plugin_tags-responsive-images","plugin_contributors-coreessentials","plugin_committers-coreessentials","plugin_support_reps-richard-b"],"banners":{"banner":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/banner-772x250.png?rev=3370243","banner_2x":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/banner-1544x500.png?rev=3370243","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/icon.svg?rev=3370243","icon":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/icon.svg?rev=3370243","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/screenshot-1.png?rev=3370243","caption":"Block wrapper with Desktop, Tablet, Mobile child options"},{"src":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/screenshot-2.gif?rev=3371045","caption":"Front-end markup: <picture><\/code> with differnt image for mobile"},{"src":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/screenshot-3.png?rev=3370243","caption":"Choosing Responsive Picture Block in the block editor"},{"src":"https:\/\/ps.w.org\/responsive-picture-block\/assets\/screenshot-4.png?rev=3370348","caption":""}],"raw_content":"\n

Core Essentials \u2013 Responsive Picture Block<\/strong> turns several standard Image<\/strong> blocks into one semantic, front-end <picture><\/code> HTML element. It\u2019s built for art direction<\/strong>: choose different crops, compositions, or formats<\/strong> for different breakpoints (e.g., a tight mobile crop, a wider desktop crop, or an AVIF\/WebP source).<\/p>\n\n

Why this matters:<\/p>\n\n

    \n

  • <picture><\/code> vs <img srcset><\/code><\/strong>
    \n srcset is great for picking the right resolution<\/strong> of the same<\/em> image. But when you need different content<\/strong> (crop\/ratio\/composition) at different viewport widths, you need art direction<\/strong> \u2014 that\u2019s exactly what <picture><\/code> does by letting you swap entire sources<\/strong> via <source media=\"\u2026\"><\/code>.<\/p><\/li>\n

  • Editor-first UX<\/strong>
    \nAuthors see a single \u201cResponsive Picture (Block)\u201d wrapper, then insert one Image per breakpoint. The plugin mirrors the link \/caption from the Desktop image. Per-image design controls (aspect ratio, object-fit, width\/height) are respected. The block\u2019s preview<\/strong> shows the native Desktop \/ Tablet \/ Mobile<\/strong> toolbar:<\/p>\n\n

      \n
    • Desktop preview \u21d2 show all<\/strong> child images <\/li>\n
    • Tablet preview \u21d2 show Tablet<\/strong>, else Desktop<\/strong>, else Mobile<\/strong> <\/li>\n
    • Mobile preview \u21d2 show Mobile<\/strong>, else Tablet<\/strong>, else Desktop<\/strong><\/li>\n<\/ul><\/li>\n

    • Perfect source ordering<\/strong>
      \nCustom media queries are auto-sorted<\/strong> so the correct <source><\/code> wins (most specific first). Works with max-width<\/code>, min-width<\/code>, and range queries.<\/p><\/li>\n<\/ul>\n\n

      Key Features<\/h3>\n\n
        \n
      • Wraps multiple core Image<\/strong> blocks into a single semantic <picture><\/code><\/li>\n
      • Pick Desktop \/ Tablet \/ Mobile \/ Custom<\/strong> images (true art direction)<\/li>\n
      • Override media<\/code><\/strong> per Tablet\/Mobile\/Custom (e.g., (max-width: 1200px)<\/code>)<\/li>\n
      • Optional sizes<\/code> override<\/strong> per source (advanced bandwidth tuning)<\/li>\n
      • Allows width, height, aspect-ratio, object-fit<\/strong> per breakpoint<\/li>\n
      • Uses link + caption<\/strong> from the Desktop (fallback) image<\/li>\n
      • Editor preview<\/strong> follows WordPress\u2019 device switcher (Desktop\/Tablet\/Mobile)<\/li>\n
      • Prevents layout overflow; picture wrapper is fully responsive<\/li>\n
      • Works with standard WP image sizes and responsive srcset<\/code><\/li>\n
      • Lightweight, no front-end JS \u2014 pure HTML\/CSS on the front end<\/li>\n<\/ul>\n\n

        Why <picture><\/code> (Art Direction 101)<\/h3>\n\n

        When your layout needs different imagery<\/strong> across breakpoints (e.g., a vertical crop on phones and a wide landscape on desktops), you\u2019re doing art direction<\/strong>. The <picture><\/code> element enables this by letting the browser choose an entire source<\/strong> based on media<\/code> conditions (and even file type<\/code>, like AVIF\/WebP), not just a different width of the same file. The result is better design control<\/strong> and faster pages<\/strong> because each device downloads only the most appropriate asset<\/strong> for its layout saving you bandwidth as well as having compositions control.<\/p>\n\n

        Use Cases<\/h3>\n\n
          \n
        • Hero banners with different crops<\/strong> for mobile vs desktop <\/li>\n
        • Product images where the subject framing<\/strong> changes on small screens <\/li>\n
        • Editorial layouts that require portrait vs landscape<\/strong> compositions <\/li>\n
        • File format switching<\/strong> (e.g., AVIF\/WebP with PNG\/JPEG fallback)<\/li>\n<\/ul>\n\n

          Usage<\/h3>\n\n
            \n
          1. Insert<\/strong> the Responsive Picture (Block)<\/strong> block. <\/li>\n
          2. Add Image blocks<\/strong> inside it for: Desktop (fallback), Tablet, Mobile, and\/or Custom. <\/li>\n
          3. Select each Image<\/strong> and open the Responsive: Breakpoint<\/strong> panel:\n\n
              \n
            • Viewport<\/strong>: Desktop \/ Tablet \/ Mobile \/ Custom <\/li>\n
            • Override media query<\/strong> (Tablet\/Mobile): optional (e.g., (max-width: 1200px)<\/code>) <\/li>\n
            • Custom media query<\/strong>: required when using the \u201cCustom\u201d viewport <\/li>\n<\/ul><\/li>\n
            • (Optional) Open Advanced: Sizes override<\/strong> to set a custom sizes=\"\"<\/code> for that source. <\/li>\n
            • Use the editor\u2019s Desktop \/ Tablet \/ Mobile<\/strong> preview to check the effective image per breakpoint. <\/li>\n
            • Publish. The front end renders a single <picture><\/code> with perfectly ordered <source><\/code> tags and a fallback <img><\/code>.<\/li>\n<\/ol>\n\n

              Block Details<\/h3>\n\n
                \n
              • Block name: ce\/responsive-picture<\/code> <\/li>\n
              • Children: one or more core\/image<\/code> blocks <\/li>\n

              • Front-end HTML output:<\/p>\n\n

                <picture>\n  <source media=\"(max-width: 767px)\" srcset=\"\u2026\" sizes=\"\u2026\">\n  <source media=\"(max-width: 1024px)\" srcset=\"\u2026\" sizes=\"\u2026\">\n  <!-- custom sources (auto-sorted) -->\n  <img src=\"\u2026\" srcset=\"\u2026\" sizes=\"\u2026\" alt=\"\">\n<\/picture>\n<\/code><\/pre><\/li>\n<\/ul>\n\n\n
                  \n
                1. Upload the plugin folder to \/wp-content\/plugins\/<\/code> or install via the Plugins screen.<\/li>\n
                2. Activate Core Essentials \u2013 Responsive Picture Block<\/strong>.<\/li>\n
                3. In the block editor, add Responsive Picture (Block)<\/strong> and insert one Image<\/strong> per breakpoint.<\/li>\n<\/ol>\n\n\n
                  \n
                  Does this replace `srcset` \/ responsive images?<\/h3><\/dt>\n
                  No. Each <source><\/code> (and the fallback <img><\/code>) still uses WordPress\u2019 native responsive srcset<\/code>. The plugin adds art direction<\/strong> by swapping sources<\/strong> per breakpoint; srcset<\/code> then chooses the best resolution<\/strong> within that source.<\/p><\/dd>\n
                  Can I add multiple custom breakpoints?<\/h3><\/dt>\n
                  Yes. Add more Custom<\/strong> Images with your media queries. The plugin sorts<\/strong> them (and Tablet\/Mobile) into the correct order so the right source wins.<\/p><\/dd>\n
                  Do I need to touch `sizes`?<\/h3><\/dt>\n
                  No. It\u2019s optional and only affects resolution selection<\/strong> inside a matched source. If you use it, follow the pattern:
                  \n    (media) length, \u2026, fallback-length (e.g., (max-width: 1024px) 100vw, 1024px<\/code>).<\/p><\/dd>\n
                  Accessibility? Alt text?<\/h3><\/dt>\n
                  Alt text is taken from the Desktop Image<\/strong>, the image; the <picture><\/code> <img><\/code> carries it.<\/p><\/dd>\n
                  What about aspect ratio and scale?<\/h3><\/dt>\n
                  All aspect ratio and scale settings are taken from the individual image, so if your mobile image is 9:16 and desktop image is set to 4:3 both will be respected at their screen sizes.<\/p><\/dd>\n
                  Performance and formats?<\/h3><\/dt>\n
                  You can upload AVIF\/WebP<\/strong> assets and still provide a PNG\/JPEG fallback in the Desktop image if needed. The browser will pick the first matching<\/strong> <source><\/code> (by media<\/code> and optionally type<\/code>) and an optimal width via srcset<\/code>.<\/p><\/dd>\n
                  Does it work with Synced Patterns and Overrides?<\/h3><\/dt>\n
                  As of version 1.1.0, the Responsive Picture Block fully supports WordPress Synced Patterns with Overrides. You can:\n1. Create a synced pattern containing a Responsive Picture Block\n2. Enable overrides on the Desktop, Tablet, and Mobile images\n3. Use the pattern across multiple pages\n4. Replace images on each page using the standard \"Replace\" feature\nEach page will display different images while maintaining the same responsive structure and design. The Block Bindings API handles all image attributes (id, url, alt, caption) automatically.<\/p><\/dd>\n\n<\/dl>\n\n\n
                  1.1.1<\/h4>\n\n
                    \n
                  • Fixed: Classes and alignments added to the main block are now included<\/li>\n<\/ul>\n\n
                    1.1.0<\/h4>\n\n
                      \n
                    • Thanks: Huge thank you to the @spinndevs team for their feedback and functionality suggestions which powered this version<\/li>\n
                    • Added: Full support for WordPress Synced Patterns with Override images per pattern instance<\/li>\n
                    • Added: Block Bindings API integration for pattern overrides (id, url, alt, caption attributes)<\/li>\n
                    • Changed: Default preview mode is now \"Show All\" for better user experience<\/li>\n
                    • Changed: Auto mode now correctly mirrors frontend behaviour (shows only relevant image \/ fallback per viewport)<\/li>\n
                    • Improved: Block toolbar simplified to All\/Auto toggle (full controls remain in inspector panel)<\/li>\n
                    • Fixed: Floating toolbar now appears correctly when block is selected<\/li>\n
                    • Fixed: Block now properly receives pattern override context via uses_context<\/li>\n<\/ul>\n\n
                      1.0.0<\/h4>\n\n
                        \n
                      • Initial release<\/li>\n<\/ul>","raw_excerpt":"Create truly responsive, art-directed images in the block editor. Wrap multiple Image blocks (Desktop\/Tablet\/Mobile\/Custom) and render a single HTML e …","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/253232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=253232"}],"author":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/coreessentials"}],"wp:attachment":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=253232"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=253232"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=253232"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=253232"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=253232"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=253232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}