Toro_Unit (Hiroshi Urabe)

Aki Hamano

Enable Responsive Image adds settings to the Image block to display different images depending on the width of the screen. You can add multiple images and set media queries and resolution for each image. If the screen width matches the conditions of that media query, it will switch to the corresponding image.
<h3>Resources</h3>
<h4>Image for screenshot</h4>
<ul>
<li>License: Public Domain</li>
<li>Source: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20</li>
</ul>

Enable Responsive Image


This is exactly the plugin I wanted. Thank you.


Must install for website creation at work.

WordPress plugin that adds settings to the Image block to display different images depending on the width of the screen.

Ronald Huereca

Photo Block is an advanced yet intuitive responsive image block plugin for WordPress that makes adding, styling, cropping, and managing photos inside the block editor a breeze.
<h3>Quick Links:</h3>
🏠 <a href="https://dlxplugins.com/plugins/photo-block/" rel="nofollow ugc">Plugin Home</a> | 📗 <a href="https://docs.dlxplugins.com/v/photo-block/" rel="nofollow ugc">Documentation</a> | 🙏 <a href="https://dlxplugins.com/support/" rel="nofollow ugc">Support</a> | 🤓 <a href="https://github.com/DLXPlugins/photo-block" rel="nofollow ugc">Source Code</a>
<blockquote>
❤️ <a href="https://app.instawp.io/launch?t=photo-block&d=v2" rel="nofollow ugc">Spin up a Free Demo</a> ❤️
</blockquote>
Photo Block combines many features from other image blocks into one, resulting in a fully featured alternative that includes responsive controls,easy cropping, global styles, caption overlays, and lightbox support. 
Whether creating a blog, recipe, portfolio, tutorial, or building a site, Photo Block provides you with complete visual control while maintaining speed, responsiveness, and accessibility.
Photo Block was designed for anyone who needs a better way to display images, such as photographers, designers, agencies, and bloggers who want to stand out with polished, on-brand visuals without needing to touch code. With Global Styles, you can maintain a consistent brand look and feel, ensuring all images adhere to a similar visual style.
<h3>Key Features</h3>
<ul>
<li>Easy and Flexible Uploading 
Upload directly, choose from the Media Library, or import via a URL. Supports external image sources, such as ScreenshotOne, for automatic screenshots. Every image uploads quickly and previews instantly.</li>
<li>Smart Cropping and Custom Ratios 
Define image proportions with built-in ratio presets or enter your own. The smart cropper respects hard crops and presets, such as a known aspect ratio, or you can perform a completely custom crop.</li>
<li>Responsive Image Settings 
Every dimension, including padding, width, height, margins, and borders, has responsive controls. Adjust your images to ensure they scale beautifully across desktop, tablet, and mobile devices.</li>
<li>Advanced Sizing, Aspect Ratio, and Object Fit 
Fine-tune image width, height, and object-fit for a consistent layout. Set an aspect ratio for a custom fit. This is ideal for creating hero images, grids, and feature sections with pixel-perfect alignment.</li>
<li>Multi-Line and Overlay Captions 
Add expressive, multi-line captions or display them as overlays with hover effects. Position captions at the top, bottom, or center, and mix typography blocks for creative layouts.</li>
<li>Built-In Lightbox 
Enable a responsive lightbox with just a few clicks by opening link settings. Viewers can expand and browse larger versions of your images without leaving the page.</li>
<li>CSS Gram Filters 
Quickly style your images with 26 built-in CSS Gram filters. Adjust warmth, contrast, or add vintage flair directly in the editor without having to use photo editing software.</li>
<li>Drop Shadow Support 
Add depth with customizable drop shadows. A subtle toggle turns flat images into elegant, layered visuals.</li>
<li>Global Style Presets 
Save your favorite image settings as Global Styles. Apply them anywhere with a single click and update them site-wide later for consistent branding and appearance.</li>
<li>Query Loop Integration 
Use Photo Block within the Query Loop block as a featured image source. Captions and settings pull automatically, making it perfect for archives and blog lists. The plugin works well inside a GenerateBlocks or Kadence loop, and also supports the Core Query block.</li>
</ul>
<h3>Why Choose Photo Block</h3>
Photo Block was built for creators who outgrow the default image block, but don’t want a bloated gallery plugin or block suite. With intuitive uploading and global styles, you can go from uploaded to published in less than 4 clicks.
This image block blends powerful design tools with a lightweight, intuitive interface that feels like part of WordPress itself.
<ul>
<li>Native to the block editor. No nags or shortcodes — everything happens inline.</li>
<li>Truly responsive. Adjust image presentation for every device size.</li>
<li>Reusable and Global styles. Choose a global style to keep images on brand and consistent.</li>
<li>No upsells or limits. Photo Block is 100% free and open source.</li>
<li>Accessible. Fully supports captions, alt text, and semantic markup.</li>
<li>Future-proof. The plugin is built with the latest block techniques and architecture and is continuously updated.</li>
</ul>
If you’ve been searching for a better Gutenberg image block, Photo Block delivers a professional image presentation toolkit without complexity or cost.
<h3>Use Cases</h3>
<ul>
<li>Photography portfolios: Crop and style high-resolution photos with lightbox support.</li>
<li>Blogs and articles: Add responsive, branded images with consistent captions.</li>
<li>Business websites: Maintain uniform image styling using global presets.</li>
<li>Online magazines: Ensure consistent styling using Global Styles across the entire site.</li>
<li>Site builders: Photo Block can assist with page or site building, acting as a logo source, hero image, and even decorative images.</li>
</ul>
Photo Block adapts to virtually any WordPress design scenario, offering both creative freedom and practical control.
<h3>Technical Highlights</h3>
<ul>
<li>Uploader: Media Library, drag-and-drop, remote URL uploads, and ScreenshotOne support.</li>
<li>Cropping: Smart cropper with presets or custom aspect ratios.</li>
<li>Responsive Controls: Device-specific padding, margin, and border adjustments.</li>
<li>Sizing Options: Adjustable width, max width, height, max height, and object-fit per device.</li>
<li>Caption System: Multi-line, block-based, and overlay caption styles.</li>
<li>Lightbox: Optional responsive lightbox with custom caption support.</li>
<li>Filters: CSS Gram effects (26 available presets).</li>
<li>Shadows: Toggle drop shadows for visual depth and 3D-looking images.</li>
<li>Global Styles: Save and reuse configurations site-wide.</li>
<li>Query Loop Ready: Works as a featured image block source.</li>
<li>Accessibility: Encourages alt text and uses semantic markup.</li>
</ul>
<blockquote>
❤️ <a href="https://app.instawp.io/launch?t=photo-block&d=v2" rel="nofollow ugc">Spin up a Free Demo</a> ❤️
</blockquote>
<h3>Development:</h3>
Development happens on GitHub. <a href="https://github.com/DLXPlugins/photo-block" rel="nofollow ugc">Check out the GitHub code repository for Photo Block</a>.
To assist or help this plugin financially, <a href="https://github.com/sponsors/DLXPlugins" rel="nofollow ugc">please consider a GitHub sponsorship</a>.
<h3>Libraries and Credits</h3>
<ol>
<li><a href="https://pqina.nl/filepond/" rel="nofollow ugc">Filepond</a><a> – React Image uploader.</a></li>
<li><a href="https://una.github.io/CSSgram/" rel="nofollow ugc">CSSgram</a> – CSS Image Effects.</li>
<li><a href="https://lucide.dev/icons" rel="nofollow ugc">Lucide</a> – React Icon Library.</li>
<li><a href="https://www.npmjs.com/package/react-image-crop" rel="nofollow ugc">React Image Crop</a> – React Image Cropper.</li>
<li><a href="https://react-hook-form.com/" rel="nofollow ugc">React Hook Form</a> – React Forms.</li>
<li><a href="https://fancyapps.com/" rel="nofollow ugc">Fancybox</a> – Lightbox Library.</li>
</ol>

Photo Block – A Modern Image Block With Lightbox and Caption Support


Ronald is an amazing developer as well as a great human. I love that he thought to create a photo block where the user (like me) could create a global style and save it. It's not buried somewhere in global patterns, no. All I have to do is hit the + sign, type "photo block," and choose the icon.



It's perfect for team photos or anytime you just want photo + text but don't want to mess around trying to "fix" the default photo/text blockI also love the cropping feature. It saves me time from having to edit an existing photo in Canva and reupload it.  I'm now changing all of the pages on my site to use this block and I can't wait to add it to my client sites, too!


The Custom Styles are Fire

Use this all-in-one image block plugin for responsive images, caption and lightbox support, and global styles.

Enable Responsive Image vs Photo Block – A Modern Image Block With Lightbox and Caption Support