Dynamic caption for any media using alt-tags

[ErEs]

I did some custom code to generate captions on all kind of images dynamically from their alt-tag on a website:

I also use a counter for galleries. Now i need to implement the same caption also for videos.
Since videos are treated differently and do not have an alt-tag, i used laythemes own "edit caption" option for the video in my gallery.

So far so good. I will share the code down below.
The only thing im struggling with is the position of the video caption.

What i want to achieve: Video caption on the left. Counter on the right.

But unfortunately both video caption and counter are controlled by the same class since they are both children of it. This makes it difficult to have different positions. Of course i tried to deal with flexbox and a space-between layout. This does indeed work if i additionally put width: 100% on my

.lay-carousel-sink-parent

but then this also results in captions being ultra-wide if there is no counter (like for single images).

Any ideas on how to solve this quickly?

CSS:

.lay-carousel-sink-parent{
    position: absolute;
    bottom: 0;
    z-index:99;
    display: inline-block;
    margin-bottom: 0.5vw;
    right:.8rem;    
}

.lay-carousel-sink.numbers-right.captions-left.sink-with-numbers-and-captions.show-sink {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
}


.numbers{
    border-radius: .3125rem;
  padding-left: .4em;
  padding-right: .4em;
  padding-block-start: 0.35em;
  padding-block-end: 0.35em;
  min-height: 1.4375rem;
  -webkit-backdrop-filter: blur(.875rem);
  backdrop-filter: blur(.875rem);
  background-color: rgba(0, 0, 0, 0.09);
}

/*Reset*/
.captions-and-numbers-not-same-position.sink-below .sink-with-numbers-and-captions.lay-carousel-sink .numbers{
    position: unset !important;
}

Javascript (HTML at bottom):

<script>
document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM fully loaded and parsed");

  const images = document.querySelectorAll("img");
  console.log(`Found ${images.length} image(s) on the page`);

  images.forEach((img, index) => {
    console.log(`\nImage ${index + 1}:`);
    console.log("Source:", img.src);
    const altText = img.getAttribute("alt");
    console.log("ALT attribute:", altText);

    // Check if alt exists and prevent duplicate captions
    if (altText && !img.nextElementSibling?.classList?.contains('alt-caption')) {
      const caption = document.createElement("div");
      caption.className = "alt-caption _BU_Button";
      caption.textContent = altText;
      img.insertAdjacentElement("afterend", caption);
      console.log("Caption inserted");
    } else {
      if (!altText) {
        console.warn("No ALT text found — skipping");
      } else {
        console.warn("Caption already exists — skipping");
      }
    }
  });

  console.log("All done inserting captions");
});
</script>

[arminunruh]

.lay-carousel-sink-parent

needs to be 100% width.
maybe u made it not 100% width by using custom css for .lay-carousel-sink-parent ?

u could use this css instead of yours:

.lay-carousel-sink-parent {
    position: absolute;
    bottom: 0;
    z-index: 99;
    display: inline-block;
    margin-bottom: 0.5vw;
    padding-right: .8rem;
    padding-left: .8rem;
    box-sizing: border-box;
    width: 100%;
}

when a sink of carousel has captions and numbers it has the class:
sink-with-numbers-and-captions

if it has only numbers it has the class:
sink-only-numbers

i can see the issue you have is because you use a background color for your numbers / captions.

this css will make a sink with only a number not span the background over the whole carousel:

.sink-only-numbers.lay-carousel-sink .numbers{
    width: auto!important;
    display: inline-block!!important;
    width: auto!important;
    position: absolute!important;
    right: 0!important;
    bottom: 0!important;
    top: auto!important;
}