WordPress Caption Support

[pjfdirect]

I have had good luck with GLightbox on a WordPress 6.2 Gallery Block with these settings:

var galleryLightbox = GLightbox({
	selector: '.wp-block-image a',
	openEffect: 'fade',
	closeEffect: 'fade',
	loop: true
});

I cannot, howvwer seem to get hold of the captions of my images, for display in the lightbox. Here is an example of the WordPress DOM:

<figure class="wp-block-gallery">
	<figure class="wp-block-image"><a href="image1.jpg"><img src="image1.jpg" alt=""></a>
		<figcaption class="wp-element-caption">
			I am image 1 caption text.
		</figcaption>
	</figure>
	<figure class="wp-block-image"><a href="image2.jpg"><img src="image2.jpg" alt=""></a>
		<figcaption class="wp-element-caption">
			I am image 2 caption text.
		</figcaption>
	</figure>
</figure>

Can GLightbox be initialised so that it will find the captions (descriptions) in the existing WordPress Gallery Block DOM? Many will now have this DOM and it would be more performant to use it instead of trying to rewrite the markup.

[gingerchew]

I'm not familiar with Wordpress blocks, but are you able to put the text that is ending up in the <figcaption> into a data-* attribute at the same time?

There isn't a way for GLightbox to look for a description like that.

[pjfdirect]

Thanks very much for the reply. Because the page loads before the lightbox is used, I guess I could modify the captions with JS. So in theory I could get the value of the inner HTML and insert it into a data-attribute. But if I'm already modifying the tags, is there perhaps a GLightbox class name that I could add to every figcaption that would allow GLightbox to accept each one as the caption tag? If not, then do please explain what I should call the data attribute and I will try to copy the text into there. I would prefer to use a class however, to avoid duplication of content.

[gingerchew]

You'd have to double check the docs, but i'm pretty sure it's data-description. Make sure you escape everything properly as well. I don't think there is a class that is designed to do that for you.

[pjfdirect]

Close enough! I used this from the homepage examples and it has worked, thanks.
data-glightbox="title: My title; description: this is the slide description"