Slideshow Block: consider displaying captions below the images

[jeherve]

When adding captions to images within a Slideshow block, the captions are displayed above the image:

While this may look good in some cases, it can also hide important parts of an image (the bottom of the image may display important information to the understanding of the image), or can go against the framing chosen by the photographer.

Maybe we could consider displaying those captions below the images instead?

---

Suggested here:
https://jetpack.com/2021/01/12/jetpack-9-3-happy-new-year-from-jetpack/#comment-216325

---

Of note, this also applies to captions for core galleries; it may be worth suggesting this to Core as well after our discussion here.

For reference:

[folletto]

In general for something like this I'd always trail Core's decisions, as the block should feel as if Gutenberg native, and thus match the user expectations.

As for the position, it's a difficult choice. Outside it breaks the overall layout, inside it covers the image. So I don't think there's in general a "better" solution.

[antermoia]

As the photographer who left the comment that Jeremy referenced, I'd like to add a few thoughts:

• first, and most importantly, over 50% of my visits are from mobile (small screen) devices. Thumbnails grids are irrelevant on these devices, and depending on the size of the caption, the overlay may very well cover the ENTIRE image on mobile devices, but this isn't limited to mobile devices
• I have a copyright notice at the bottom of my image; many photographers put some kind of signature or watermark there. The text on the image overlaps and interacts with the caption
• illustrations and screenshots may have text at the bottom that the caption obscures
• layout is not a concern if the caption was limited to two lines for example, and then truncated

I circumvent all these problems by using a single-column gallery with large or original images in the Classic Editor. The photos are big and beautiful on desktop devices, the display is mobile friendly, the captions are legible, no part of the image is obscured, and it's extremely fast and easy to put these together. Example:

https://www.alex-kunz.com/del-dios-highlands-dawn/

I'm just one guy of course but the Gutenberg gallery block's captions are one of the MAIN reasons why I prefer the Classic Editor.

The screenshots below illustrate these problems. These aren't some "Test 1-2-3" captions, these are real-world examples that photographers and editors use. They're not titles - they're long-form text with short sentences, relevant to the image, and important for search engines.

Screenshot 1: gallery captions cover most of the thumbnail. This is on a 27" iMac:

Screenshot 2: same gallery but on my iPhone - captions obscure some thumbnails entirely, other captions are truncated. This just doesn't make any sense, I'm sorry...

Thanks for taking these thoughts into consideration.

[jeherve]

In general for something like this I'd always trail Core's decisions

That was my initial thought as well. It seems there are discussions happening on this topic already:

• Display issue on mobile for Gallery block WordPress/gutenberg#15952
• Consider providing a "white background" variation for Gallery captions WordPress/gutenberg#24896

[antermoia]

So it turns out that this has been discussed since 2018. That's not very encouraging.

WordPress/gutenberg#8030

[jeherve]

WordPress/gutenberg#8030

Ah yes, good find!

[jeherve]

This was also suggested here:
https://wordpress.org/support/topic/jetpack-slideshow-caption-control/

[braddalton]

Any progress on the caption control? Looking to reposition the caption into a seperate column to the right of the image.

[shelb-elliott]

Hi all, Newspack team here - we've had Carolina Public Press request this same feature in Slack, so I wanted to offer that information for consideration.

[geoffguillain]

Hey @jeherve, 👋

We are encountering this issue quite often. I have not found any good workaround with WP core functions.
The slideshow size is calculated by the size of the image inside it.
Since the captions are meant to be positioned over the slideshow, no custom CSS will allow to display captions below the images as they will be cropped.

The resizing is happening here:

jetpack/projects/plugins/jetpack/extensions/blocks/slideshow/swiper-callbacks.js

Lines 38 to 60 in c8c55ff

	function swiperResize( swiper ) {
	if ( ! swiper || ! swiper.el ) {
	return;
	}
	const img = swiper.el.querySelector( '.swiper-slide[data-swiper-slide-index="0"] img' );
	if ( ! img ) {
	return;
	}
	const aspectRatio = img.clientWidth / img.clientHeight;
	const sanityAspectRatio = Math.max( Math.min( aspectRatio, SIXTEEN_BY_NINE ), 1 );
	const sanityHeight =
	typeof window !== 'undefined'
	? window.innerHeight * MAX_HEIGHT_PERCENT_OF_WINDOW_HEIGHT
	: SANITY_MAX_HEIGHT;
	const swiperHeight = Math.min( swiper.width / sanityAspectRatio, sanityHeight );
	const wrapperHeight = `${ Math.floor( swiperHeight ) }px`;
	const buttonTop = `${ Math.floor( swiperHeight / 2 ) }px`;
	swiper.el.classList.add( 'wp-swiper-initialized' );
	swiper.wrapperEl.style.height = wrapperHeight;
	swiper.el.querySelector( '.wp-block-jetpack-slideshow_button-prev' ).style.top = buttonTop;
	swiper.el.querySelector( '.wp-block-jetpack-slideshow_button-next' ).style.top = buttonTop;
	}

More precisely:
const img = swiper.el.querySelector( '.swiper-slide[data-swiper-slide-index="0"] img' ); targeting the child image and not the full container.
swiper.wrapperEl.style.height = wrapperHeight; assigning its height to the slideshow wrapper

This Javascript function seems to be used for more than just the gallery slideshow.

Do you think there is an opportunity to refactor the code to use the container size instead of the child image?
It would allow more room for CSS customization.

If there is anything I do to help move this issue forward, let me know.