Toro_Unit (Hiroshi Urabe)

Aki Hamano

<p>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.</p>
<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.

WeDOK

<p><strong>Have you ever had multiple galleries on one page, only to find all the images mixed together in the slideshow?</strong></p>
<p>Most lightbox plugins treat every image on the page as one big group. The only way to separate them is to add shortcodes, manually set attributes, or dig into plugin settings. It works—but it’s a pain.</p>
<p><strong>WePOP solves this automatically.</strong></p>
<p>Place WordPress Gallery blocks as you normally would. WePOP detects each gallery independently and creates separate slideshows for each one—no extra steps required. Switch grouping modes with a single click in the settings screen.</p>
<p>This plugin was built by a web professional with 23 years of hands-on site-building experience. Every feature exists because it was needed in real production work.</p>
<h3>The Problem WePOP Solves</h3>
<p>Imagine a restaurant site with three galleries on one page: food, interior, and staff photos. With most lightbox plugins, clicking any image opens a slideshow that mixes all three groups together.</p>
<p>Fixing that usually means:<br />
* Adding <code>rel</code> attributes to every image manually<br />
* Writing shortcodes around each gallery<br />
* Installing a separate gallery management plugin</p>
<p>With WePOP, you don’t do any of that. The Gallery block structure you already built is all it needs.</p>
<h3>What Makes WePOP Different</h3>
<p><strong>Gutenberg-native grouping — no manual work</strong><br />
WePOP reads your Gallery blocks as distinct groups. Each gallery gets its own slideshow automatically. One click in the settings switches between three modes:<br />
* <strong>Gallery Blocks Mode</strong> — each Gallery block is its own slideshow (recommended)<br />
* <strong>All Images Mode</strong> — all images on the page grouped together<br />
* <strong>No Grouping Mode</strong> — every image opens individually</p>
<p><strong>MP4 video popups — no YouTube required</strong><br />
Host your own product demos, property tours, or company introduction videos. WePOP opens MP4 files directly in an overlay—no uploading to YouTube or Vimeo, no embedding restrictions, no third-party branding. YouTube and Vimeo are also supported when you need them.</p>
<p><strong>Reacts only to media links</strong><br />
WePOP only activates on links that point to image or video files. Navigation links, buttons, and logos are completely ignored—no false triggers, no need to manually exclude things.</p>
<p><strong>Captions that don’t cover your photos</strong><br />
Alt text captions appear in a dedicated strip below the image, not overlaid on top. On portrait shots and tall images, your photo stays fully visible. In slideshow mode, captions slide in sync with each image.</p>
<p><strong>Per-image disable toggle</strong><br />
Need one specific image to open in a new tab instead of a popup? Flip the toggle in the image block sidebar. No code, no class names to remember.</p>
<p><strong>Keyboard and accessibility ready</strong><br />
Escape closes any popup. Arrow keys navigate galleries. All controls include proper labels for screen readers. Works well for corporate, government, and accessibility-conscious projects.</p>
<h3>Supported Media</h3>
<ul>
<li>Images: jpg, jpeg, png, gif, webp, svg</li>
<li>Video services: YouTube, Vimeo</li>
<li>Direct video files: MP4</li>
</ul>
<h3>Who It’s For</h3>
<ul>
<li><strong>Photographers and portfolio sites</strong> — multiple series on one page, each staying in its own slideshow</li>
<li><strong>Restaurants and hotels</strong> — food, interior, and room galleries that don’t mix</li>
<li><strong>Businesses</strong> — product or service videos hosted on your own server</li>
<li><strong>Web designers and agencies</strong> — a reliable, low-maintenance lightbox that works across client sites without conflicts</li>
</ul>
<h3>Built Without Baggage</h3>
<p>No jQuery. No front-end framework. WePOP runs on plain JavaScript, which means it doesn’t conflict with your theme or other plugins, and it won’t slow your site down. Core Web Vitals stay clean.</p>
<h3>Documentation & Support</h3>
<ul>
<li><a href="https://wedok.jp/tools/wepop/" rel="nofollow ugc">Official documentation (Japanese)</a></li>
</ul>
<h3>Popup Trigger Rules</h3>
<p>WePOP activates only on links that point directly to supported media files or video URLs. Regular links, navigation, and non-media elements are not affected.</p>
<p><strong>Supported media types:</strong><br />
* Image files: jpg, jpeg, png, gif, webp, svg<br />
* Video services: YouTube, Vimeo<br />
* Direct video files: MP4</p>
<p><strong>Where links are detected:</strong><br />
* <strong>Default</strong>: On posts and static pages, WePOP looks inside the main content area only (<code><main></code>, <code>.entry-content</code>, or <code>#content</code>). Header, footer, and sidebars are not included.<br />
* <strong>Extended</strong>: Enable <strong>Front page & blog home</strong> in settings to also load on the front page and blog index, and to detect links across the entire page on posts and pages.<br />
* <strong>Manual exclusion</strong>: Add the <code>wepop-disable</code> class to any link or wrapper element to skip it.</p>
<h3>Popup Mode Settings</h3>
<ul>
<li><strong>Gallery Blocks Mode</strong> — Images inside each Gallery block form their own independent slideshow. Images outside gallery blocks open individually. This is the recommended setting for most sites.</li>
<li><strong>All Images Mode</strong> — All qualifying images within the detection scope are grouped into one slideshow.</li>
<li><strong>No Grouping Mode</strong> — Every image opens in its own popup with no navigation.</li>
</ul>
<h3>Language Support</h3>
<p>Admin interface is available in: Japanese, English, Spanish, French, German, Chinese (Simplified), Italian, Korean, Portuguese (Brazil).</p>
<h3>Feedback</h3>
<p>If WePOP saves you time on a project, a quick rating on <a href="https://wordpress.org/plugins/wepop/" rel="ugc">WordPress.org</a> goes a long way. It helps other site owners find it and supports continued development. Thank you.</p>


WePOP

The lightbox that just works. Place your Gallery blocks—WePOP handles the rest. No shortcodes, no manual settings, no mixed-up slideshows.

Enable Responsive Image vs WePOP