Picture with caption stack?

I would love to have a picture stack that includes a caption below. I cannot find such a stack, is there one? Seems to me that pictures with a caption are very common on blogs, and there would be demand for such a stack. Currently I use a regular picture stack, with a text stack below it for the caption. However, I don’t think that is good for SEO, since they are separate elements.

I have been testing the HTML solution for this, specifically figure and figcaption. These seem to work very well, but does require some CSS to style. And because the text and image are directly associated, presumably better for SEO.

So, it seems to me that a stack that utilizes figure and figcaption with ability to style would be great. Or is there a drawback that I am not aware of?

There is one built into F6… Components | Foundation 6 Stacks for RapidWeaver

Hi Joe. Yes, I use F6, and am aware of that caption stack. It is nice, but the text overlays the image. I want a clean image, with the caption underneath. Or does it have that option?

Also, I’m quite interested in the HTML “figcaption”, which associates the text with the image, similar to alt text. For a potential SEO benefit.

What I mean by figcaption, is something like this:

<figure>
    <img src="https://www.path-to-your-image.jpg"
         alt="your alt text">
    <figcaption>your informative text</figcaption>
</figure>

Possibly with some more help, like defining the size and some CSS.

If you look at the code for the Caption component, it does exactly what you are looking for. It uses the exact HTML that you are trying to have :-)

I put a crazy amount of work in making the code in F6 very modern and use as much semantic HTML for you so that you don’t even know that it’s happening. For example, your code does not even go far enough. You have an img tag. But if you use the F6 Picture stack, you will get the picture element which has a lot more features and benefits.

Making the caption not overlay the image is super easy as well. Just add a custom class to the Caption stack. Then with a position swatch, set the class that you added and make the Position setting set to Relative. Then you may want to use background and with swatches to style it how you want.

1 Like

Thanks for that explanation Joe. I will try out those settings.

Okay, I was able to move the caption below the image and style it using multiple swatches. However, the caption stack fills the container, taking the picture along with it, which I don’t want. In the picture stack I am using “Define Sizing” and deselected the “Fill Container” option, which gives me the result I want, but caption stack overrides it. Ideally the caption would follow the lead of the picture, not the other way around. There is no options in the caption stack, and I can’t figure out how to deal with it with swatches, including the width swatch. Is there a solution?

I will add a checkbox in the next update that will make this easier. It will remove the class that makes it positioned over the image. This will make it easier for you. It’s a valid request.

As for the width. I could help out more if you gave me a URL. If you post on my community, there are a ton of advanced F6 users to help out as well.

That would be great to add that checkbox. I prefer the traditional caption style right under the picture, without any built-in styling. Your caption stack is cool, but it is designed a certain way, and trying to undue that styling with more styling is awkward.

Thanks Joe, you are a gentleman and a scholar.