<figure>
<img class=" image--" src="http://via.placeholder.com/640x360" alt="placeholder image" width="640px" height="360px" loading="lazy" />
<figcaption>placeholder image</figcaption>
</figure>
<figure>
{{> @image }}
<figcaption>{{alt}}</figcaption>
</figure>
{
"src": "http://via.placeholder.com/640x360",
"alt": "placeholder image",
"width": "640px",
"height": "360px"
}
figure {
margin: 2em auto;
max-width: 60vw;
counter-increment: figure_count;
& img {
width: 100%;
object-fit: contain;
}
& figcaption {
color: var(--color-charcoal);
}
& figcaption::before {
content: 'Figure ' counter(figure_count) ': ';
}
}
Either all the figures use captions or none of them should. The way that counters work, they will continually to increase whether there is a caption or not.