Enable Responsive Image
Aki HamanoEnable 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.
Resources
Image for screenshot
- License: Public Domain
- Source: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20
This plugin rewrites the HTML markup for the image block rendered on the front end. Wrap the img element with a picture element, and add source elements with srcset and media attributes inside the picture element based on the settings of the added image.
Try rearranging the order of the images. For example, if both images have a Media Query Type of max-width, the one with the smaller value should be ordered on top.
On the editor side, images do not switch by default. Click the “Enable responsive image preview” button on the block toolbar.
You can find a list of the available filters in the Github readme.
Very useful for professional site builds
By onetrev on July 26, 2024
Working well, just what was needed. Thanks for making this! While I understand this functionality not being the core image block, it's essential for any kind of professional site build so thank you very much for making it!
The Plugin I Have Been Waiting For!!
By stevieboy23 on February 7, 2024
At last! I have waited a long time for this functionality to come to Gutenberg... As far as I know, this is the only plugin out there that will allow you to set different images for different screen sizes - all inside the block editor!! No more outside-the-editor workarounds needed to achieve this - Brilliant!!!
By-the-way, this developer has created a whole "swiss army knife" range of additional plugins for Gutenberg: Flexible Spacer Block, Flexible Table Block and more.
Well done, thank you, and keep up the great work, Very Best Wishes!!!!
1.2.0
- Tested to WordPress 6.6
1.1.1
- Remove unnecessary changelog
1.1.0
- Tested to WordPress 6.5
- Enhancement: Polish block sidebar
1.0.0
- Initial release
- Upload the
enable-responsive-image
folder to the/wp-content/plugins/
directory. - Activate the plugin through the \’Plugins\’ menu in WordPress.
Reviews
5 out of 5 stars
- Version: 1.2.0
- Last updated: 3 months ago
- Active installations: 300
- WordPress version: 6.4
- Tested up to: 6.6.2
- PHP version: 7.4