Ideas on linking the caption?

Great plugin, thank you! (This should be standard in WordPress! Thanks for filling that hole.)

I’m using a custom plugin which creates a customized, fully accessible version of Bootstrap Carousel, utilizing a standard WordPress gallery. Your plugin works as expected.

I’d like to be able to put the <a> tag on the caption rather than the image or, if that’s not possible, wrap it around both the image and the caption. Any ideas on how I might accomplish that?

Ideally, it would happen at the PHP level within my custom plugin, where the gallery code is generated. But I’d settle for a javascript solution!

Does your plugin add specific metadata to the image which I could retrieve and utilize while generating the gallery’s code? (That would be my preferred approach.)

If I used the javascript option in your plugin, is there an event that I could listen for and alter?

Any ideas or suggestions of how I might accomplish this? Any thoughts appreciated!

Here is an example of the code for one slide, before using your additional fields:

<div role="group" aria-roledescription="slide" aria-labelledby="slide-1" id="slide-1" class="carousel-item">
    <h6 class="visually-hidden" id="slide-number-1">Slide 1</h6>
    <img fetchpriority="high" decoding="async" width="1440" height="450" src="https://www.insitewebsite.com/starter/wp-content/uploads/2025/03/Philadelphia-Skyline-1960s-RDC-hero-images.jpg" class="wp-image-200 d-block w-100" alt="Philadelphia Skyline 1960s" srcset="https://www.insitewebsite.com/starter/wp-content/uploads/2025/03/Philadelphia-Skyline-1960s-RDC-hero-images.jpg 1440w, https://www.insitewebsite.com/starter/wp-content/uploads/2025/03/Philadelphia-Skyline-1960s-RDC-hero-images-544x170.jpg 544w, https://www.insitewebsite.com/starter/wp-content/uploads/2025/03/Philadelphia-Skyline-1960s-RDC-hero-images-1024x320.jpg 1024w, https://www.insitewebsite.com/starter/wp-content/uploads/2025/03/Philadelphia-Skyline-1960s-RDC-hero-images-768x240.jpg 768w" sizes="(max-width: 1440px) 100vw, 1440px">
    <div class="carousel-caption d-md-block">
        <p class="caption-text">Philadelphia Skyline 1960s</p>
    </div>
</div>