Output class indicating whether an image has a caption

[JohnONolan]

I think I have a reasonable case for adding a class of .kg-card-hascaption conditionally to a parent card wrapper, when it has a caption.

Example:

In this example I'm trying to achieve different layouts for different image sizes. The first image is width-full - where the figcaption overlaid with position absolute. Easy.

The second image is width-wide - which I'm trying to style so that it has room for a caption somewhere around it.

After a solid hour or two, though, I don't think this is going to be doable without a class on the parent. I've cycled through absolute, flexbox, grid, and table display modes - and all of them get you close, but none of them can account for a layout which automatically adapts to whether or not a caption is present.

Short version: All the layout modes require setting fixed proportions to manually "make space" for the caption, with the exception of flexbox -- and flexbox has a bug which destroys image aspect ratio when an img is a flex-child.

So I think the only way to reasonably achieve this for the parent to specify whether it has a caption, which would open up far, far more options for how to display images with captions.

An additional benefit here would be that we'd actually double the number of available image styles/sizes, because every size can have a unique appearance with/without caption - which also opens up a lot more flexibility in terms of design.

TLDR: I think cards should output an additional class based on whether or not they contain a caption

/cc @peterzimon @kevinansfield

[JohnONolan]

Aside: Can we just take a moment to appreciate the colour palette of these labels

[kevinansfield]

Although the change is fairly straightforward it requires the html field for every post to be re-generated which is usually something we only do for major version bumps due to the potential impact for sites with many posts.

In the meantime it's possible to add the class using a small bit of client-side JS:

document.querySelectorAll('figure.kg-card').forEach(function (figure) {
  if (figure.querySelector('figcaption')) {
    figure.classList.add('kg-card-hascaption');
  }
});

Or maybe

document.querySelectorAll('figure.kg-card figcaption').forEach(function (figcaption) {
  figcaption.closest('figure').classList.add('kg-card-hascaption');
});

[JohnONolan]

@kevinansfield That's fine. How would I trigger manual re-generation? Just update a post?

[kevinansfield]

@JohnONolan the change is now in master so new/re-saved posts will start having the class after the next release.

I've added the full migration to our 3.0 tracking list so I'll close this now.