Captions are always hit-and-miss in lightbox

  • I’ve haven’t been able to get the captions to appear in the lightbox, except in random photos. I’ve looked at other threads in the forum here, and I’ve checked all of the options in the plugin settings to try to get the captions from alt text and other sources, but it’s not working. If you look at the second gallery on the linked page, you’ll see captions for two photos. They happen to be square photos I copied from my Instagram. I’m wondering if it’s about the photo sizes, the photo aspect ratios, or what. I’m using Kadence Blocks to create Advanced Galleries, but I have turned off their lightbox (which doesn’t have a swipe option) and I had this problem before I used that plugin as well. It seems like lower resolution photos/smaller sizes allow the caption to show, but I think it’s only if there is blank space below the photo. My captions are showing in my media library. Maybe I should copy them to the alt text field in there, but I’d like to see if you have some fix for this first. Thanks.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    Well – the problem is, the way how the gallery outputs the captions – it’s just nested div elements without any indication where the caption is:

    
<a href="...">
  <div class="kb-gal-image-radius">
    <div class="kb-gallery-image-contain kadence-blocks-gallery-intrinsic kb-gallery-image-ratio-square">
      <img ...>
      <noscript>
        <img />
      </noscript>
    </div>
  </div>
  <div class="kadence-blocks-gallery-item__caption">--- Caption here ---</div>
</a>

    There is no figure element with a figcaption at all and no caption reference at all (aria-describedby). This way the frontend script of my plugin has no chance to find the caption.

    No – just having the word “caption” somewhere as CSS class name in some element somehwere inside the link is not enough. The frontend script will not walk the whole element tree to find something which might look like a caption – this would be way too slow!

    For the two images with working captions it’s just a coincidence that this works but the structure has the same problems there.

    So there are two alternatives:

    1) Put the captions to the alternative text as well and enable using that in Photoswipe.

    2) OR: ask the guys who maintain the Kadence Blocks to modify their code so the link contains an aria-describedby attribute which indicates the element with the caption like this:

    
<figure>
<a href="..."  aria-describedby="CAPTION-ID">
  <div class="kb-gal-image-radius">
    <div class="kb-gallery-image-contain kadence-blocks-gallery-intrinsic kb-gallery-image-ratio-square">
      <img ...>
      <noscript>
        <img />
      </noscript>
    </div>
  </div>
  <figcaption id="CAPTION-ID" class="kadence-blocks-gallery-item__caption">--- Caption here ---</figcaption>
</a>
</figure>
    • This reply was modified 4 years, 7 months ago by Arno Welzel.
Viewing 1 replies (of 1 total)
  • The topic ‘Captions are always hit-and-miss in lightbox’ is closed to new replies.

Tags