# Adding captions to images?

**URL:** <https://discourse.gohugo.io/t/adding-captions-to-images/40102>\
**Category:** support\
**Created:** [August 21, 2022, 10:38pm UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102 "2022-08-21T22:38:28Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 22, 2022, 5:30pm UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102/21 "2022-08-22T17:30:41Z")

</div>

You’re stretching my a11y knowledge. I’d try it both ways…

- Add the `aria-labelledby` attribute to the `picture` element, or
- Add the `aria-labelledby` attribute to the `img` element within the `picture` element

… and then use an a11y validator to see which one passes.

---

<div class="post-metadata">

**Author:** ![tut](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tut](https://discourse.gohugo.io/u/tut)\
**Post date:** [August 22, 2022, 5:57pm UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102/22 "2022-08-22T17:57:01Z")

</div>

I use WAVE accessibility tool and it reports no issues before or after the caption is added. I will test further with other tools. Thanks for this.

---

<div class="post-metadata">

**Author:** ![Mehdi\_Saada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mehdi_saada/32/16885_2.png) [@Mehdi\_Saada](https://discourse.gohugo.io/u/Mehdi_Saada)\
**Post date:** [August 22, 2022, 7:59pm UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102/23 "2022-08-22T19:59:59Z")

</div>

Okay you can’t cut a paragraph with a div element, fair enough.  
But I changed the display attribute of the figure tag to “inline” or “flex”, in either case it changes nothing to the validator’s complains ([The W3C Markup Validation Service](https://validator.w3.org/#validate_by_uri+with_options)).  
Why is it treated differently from `<img>`, this is stupid !

Figure is MADE to be used for captions, I am not switching for some weird, awkward and unnecessary syntax when it’s w3c’s fault to not have standards in line with its own html semantics.

It works, changing display should suffice, hence I’ll keep it that way.

---

<div class="post-metadata">

**Author:** ![cshoredaniel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/cshoredaniel/32/19684_2.png) [@cshoredaniel](https://discourse.gohugo.io/u/cshoredaniel)\
**Post date:** [August 24, 2022, 5:28am UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102/24 "2022-08-24T05:28:21Z")

</div>

> [@jmooring](#):
>
> > [@chrillek](#):
> >
> > I have a image render hook producing a `figure`, and this `figure` is not wrapped in a `p`
> 
> I’d love to see a test repo that demonstrates this.

I’ve run into this before too, unfortunately I didn’t realize this was unexpected behaviour and do not have a repo to show you. I never identified when it would add the `<p>` and when not, so I just created the render hook to generate valid HTML when wrapped in a `<p>`.

If I run into it again, I will set up a demonstration repo.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [August 24, 2022, 9:33am UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102/25 "2022-08-24T09:33:25Z")

</div>

I’d like to modify my statement (after I ran my site through the W3C validator): The HTML contains a closing `p` tag right after the `figure`, but there was never an _opening_ one (before the `figure` or at all).

So, you’re right (of course): Using figure in a `render_image_hook` produces invalid HTML. Firefox apparently simply adds an opening `p` tag just before the closing one, so that there seems to be an empty paragraph. Duh.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 26, 2022, 9:34am UTC](https://discourse.gohugo.io/t/adding-captions-to-images/40102/26 "2022-08-26T09:34:15Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.gohugo.io/t/adding-captions-to-images/40102.md?page=1)