[Bug report / Feature improvement] Allow image captions to be always on for image galleries

[nabeards]

Operating system

macOS Sequoia 15.2

Publii version

0.46.2 (0.46.2)

Issue type

Free plugin

Bug description

For image galleries on mobile, there is no way to see the caption under each image since it required "rollover" to appear (which of course doesn't work on mobile). Please make a setting to for captions to always appear in image galleries, and allow us to just have it exist below each image with a proper margin.

Steps to reproduce

No response

Relevant log output

No response

[bjazmoore]

This might be something the theme developer needs to support, not Publii core. I know I would not want image captions on always for the galleries I have created.

[candidexmedia]

Also: Publii recently introduced a new way to manage galleries via plugins: https://getpublii.com/blog/publii-gallery-plugins.html

I wonder if @nabeards you've tried both plugins to see if they both behaved the same way?

Edit: Just tested both of them (demo of Core, demo of Simple), and they do behave the same on mobile...

Perhaps @nabeards, you could play around with the CSS styling of the <figcaption>, with media queries for smaller screens.

You could target the .gallery__item figcaption selector, and change its color, opacity, position, etc. and also modify the :hover state on mobile.

[nabeards]

I'd prefer one of the plugins to handle this properly. Attempting to customize CSS for a core plugin will be fraught with challenges, as I have already tried. Some captions are multi-line, the captions are set to move on hover, etc. And @bjazmoore this isn't a theme issue now that galleries are a core plugin.

[michaelfluegge]

Hi, @nabeards , try this CSS under Tools & Plugins / Custom CSS:

.gallery__item a::after {
background: none !important;} /removes gray-ish on mouse over/

.gallery__item figcaption {
bottom: 0rem; /moves caption below the image/
position: relative;
opacity: 1; /makes caption visible/
-webkit-transform: translate(-50%, 0rem);
transform: translate(-50%, 0rem);
}

Maybe it needs some tweaking regarding styling, but it does it's job on desktop and mobile (at least on MacOS and iOS).

[michaelfluegge]

PS: I use the Core Lightbox Gallery