How do I caption an image?

[Julia_L]

When I embed an image into a Canvas page, I would like to add a caption (not just alt text), sometimes with an attribution and/or link to the image's source. Is that possible?

[Gabriel33]

It is, but you will need to open and edit the HTML of the Rich Content Editor: How do I use the HTML view in the Rich Content Edi... - Instructure Community - 618225

If you already added an image using one of the standard RCE processes for adding images, then after opening the HTML view, you would surround the <img> tag with <figure> tags, and then add <figcaption> tags within the <figure> tags.

For example:

<figure>
<img src="files/21370380/preview" alt="Alt text here" data-api-endpoint="files/21370380" data-api-returntype="File" />
<figcaption>Fig 1 - Caption here</figcaption>
</figure>

--EDIT--

Interestingly, figure and figcaption are not in the HTML allowlist, but they still seem to work on my end. If someone has an idea why, please let me know. "Caption" is an allowed tag, so that could be an alternative if figcaption stops working.

[Julia_L]

When I try that, I don't get a caption under the picture, it's either next to it or above it, in the same font and font size as the rest of the text on the page, so it doesn't look like a caption at all. How can I get the caption under the image?

[Gabriel33]

About the position, did that happen using <figure> and <figcaption>, or using <caption>?
With <figure> and <figcaption>, I get the caption below the image.
With <caption>, indeed it goes below it, and it seems like a bug, as Canvas is removing the tags after saving, even though it is in the allowlist.

About the font, note that figcaption doesn't specify a different font automatically, as we can see in W3's example, W3Schools Tryit Editor (add a <p>some text here</p> below the figure and you'll see it has the same font as the caption).

You can change the font size yourself by adding a style, such as in:

<figcaption style="font-size: 0.8em;">Fig 1 - Caption here</figcaption>

But you can also note that the caption is a caption visually by noting it is left aligned to the image, not to other paragraphs:

[Julia_L]

I used <figure> and <figcaption> and the caption didn't go below the image. It didn't seem like it was "stuck" to the image, if that makes sense.

[Gabriel33]

Was the <figcaption> within the figure tags, or did you have </figure> (closing the figure) before <figcaption>?

The format should be:

<figure>
<img src="url" alt="alt text">
<figcaption>"caption text"</figcaption>
</figure>

where I removed the extra properties that Canvas adds.

[Julia_L]

I followed that format exactly and the caption was at the top left of the page while the image was at the top right, a line below the caption. I'm pretty unfamiliar with HTML and I'm sure I'm doing something wrong, I just don't know what!

[Gabriel33]

It's hard to troubleshoot without seeing the code, but given that the image is to the right, you likely chose to "right align" it.

I tried it myself, and it changes the code to:

<figure>
<img style="float: right;" src="url" alt="alt text">
<figcaption>"caption text"</figcaption>
</figure>

And indeed, the image goes to the right, but the caption stays in the left.

To fix it, I moved the style="float: right;" property to the figure, which covers both the image and the caption:

<figure style="float: right;">
<img src="url" alt="alt text">
<figcaption>"caption text"</figcaption>
</figure>