Responsive Image Gallery en

Installations 18 Likes 7

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.

Features

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.

Limitations

On desktop, it is not possible to expand the images with a single click without JavaScript, so I had to resort to "click and hold", which is obviously less user-friendly. Hover was considered, but is prone to glitches due to the responsive layout.
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).

Usage

This plugin supports the Editor Toolkit! 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.

Localization

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 :)

html[lang="en"] {
    --autogallery-hint-d: "Click and hold to enlarge an image";
    --autogallery-hint-m: "Tap to enlarge an image";
}

Feel free to submit your translations for inclusion in the plugin via Discord!

Feedback

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)?

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

Latest version RC3 View content

Released 3 years 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.

Plugin CSS for RC3


/* Hint strings */
html {
	--autogallery-hint-d: "Click and hold to enlarge an image";
	--autogallery-hint-m: "Tap to enlarge an image";
}
html[lang="fr"] {
	--autogallery-hint-d: "Cliquer et tenir enfoncé pour agrandir une image";
	--autogallery-hint-m: "Appuyer pour agrandir une image";
}
/* Plugin HTML Inserter support */
:root { --summernote-insert-autogallery: enabled; }
/* Gallery layout */
.autogallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 10px 0;
	--autogallery-height: 20vh;
}
.autogallery:after {
	flex: 0 0 100%;
	text-align: center;
	font-style: italic;
}
@media(min-width:768px) {
	.autogallery:after {
		content: var(--autogallery-hint-d);
	}
}
@media(max-width:767px) {
	.autogallery:after {
		content: var(--autogallery-hint-m);
	}
}
.autogallery img {
	height: var(--autogallery-height) !important;
	width: auto !important;
	margin: 0 5px 15px 5px;
	box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.35);
	cursor: nesw-resize;
}
/* Image expansion */
@media(min-width:768px) {
    /* Desktop: hover effect and zoom on active (hold) */
  .autogallery img:hover {
		opacity: 0.75;
		transform: scale(.98, .98);
	}
	.autogallery img:active {
	    position: fixed;
	    z-index: 820; /* over sidebar */
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    height: unset !important;
	    max-height: 60vh;
	    max-width: 80vw;
	    background:white;
	    padding: 8px;
	    border:1px solid #ccc;
	    box-shadow: 1px 1px 4px #000, 1px 1px 200px rgba(0, 0, 0, 0.3);
		opacity: 1;
    }
}
@media(max-width:767px) {
    /* Mobile: zoom on hover (tap) */
    .autogallery img:hover {
	    position: fixed;
	    z-index: 820; /* over sidebar */
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    height: unset !important;
	    max-height: 80vh;
	    max-width: 80vw;
	    background:white;
	    padding: 3px;
	    border:1px solid #ccc;
	    box-shadow: 1px 1px 4px #000, 1px 1px 200px rgba(0, 0, 0, 0.3);
    }
}