Turns a series of images into a responsive gallery of expandable images, for desktop and mobile.
* This plugin is somewhat experimental. Changes in appearance and behaviour should be expected and your feedback is welcome.
- Automatically creates a collage of images with consistent heights and discreet decorations (shadows, light animations on hover) that adapts to available width.
- Scales images automatically based on screen size while preserving aspect ratio.
- Provides a rudimentary "zoom-in" mechanism for both desktop and touch devices.
- Very wide images may not look great and may require strategic placement to avoid gaps in the gallery (for instance, avoid placing a 1:1 image between two extremely long ones).
This plugin supports the Marketplace Toolbar for Summernote! You can install this user script with a browser extension to insert the necessary HTML in your entities without memorizing or referencing this page.
Simply insert multiple images in a row in the editor, then go to HTML view to wrap them in a single container (preferably
div for semantics, but
p also works) and give it the "autogallery" class, like so:
You can change the default gallery view image height of 20vh (20% of the window’s height) by adding the style attribute to your container as follows:
div class="autogallery" style="--autogallery-height: 20vh;" and changing 20vh to the dynamic or static value of your choice.
The image expansion hint at the bottom of the gallery is currently provided in English and French based on the user’s site preferences. You can add your own translations to your campaign CSS by copying and editing the code below. Simply change
lang="en" to match your language code and edit the text between quotation marks. Likewise, you can change the hint text for English (en or en-us) to whatever you prefer :)
--autogallery-hint-d: "Click and hold to enlarge an image";
--autogallery-hint-m: "Tap to enlarge an image";
Feel free to suggest your translations be added to the theme out-of-the-box via Discord!
I would be grateful for your feedback on Discord regarding the following points:
- Should the gallery view on mobile be limited to one image per row and use full width and variable height for a more symmetric portrait-mode experience?
- Does tapping to enlarge an image work correctly on your mobile devices?
- Is there demand for captions that would 1) be hidden from the gallery but appear under zoomed-in images and 2) require substantial entry editing in HTML view (i.e. manually adding a span after each image)?
Latest version: RC3 View ContentReleased 2 months ago
- Small change to the hover animation to ensure a particularly wide image doesn’t go out of bounds.
- Fixed a bug with the focused image size.
- Added support for the Plugin HTML Inserter.