Captions for Figures

[pjs41]

Is there a feature for adding a caption to an image or figure, e.g., Figure 1.3. Distribution of Mr. Pibb machines in Pennsylvania?

[kmeeusen · Accepted solution]

Hi Pierce:

There are two easy ways to do this in Canvas.

• You can switch to the HTML Editor and expand the Alt text for an image, or
• Upload your image into a two-row, single column table. Place image in top cell, and caption info in bottom cell. This is my preferred method.

I hope this helps.

[Stef_retired]

pjs41, I'd like to direct you to a few somewhat related resources here in the Community that will help you manipulate images: Creating an inviting course home page​ and Table and Videos​ (the latter conversation embeds videos, not photos, in the table's cells, but the process is the same, and frankly, working with images is far easier than working with videos in a table). You might also enjoy  @clong ​'s cool resource on Home Sweet Homepages without Tables​ and  @G_Petruzella ​'s Columns Without Tables: code-snippet​. If you're not able to view these resources, many of which reside in the Instructional Designers​ space, joining that group is just a few clicks away.

[ddumonde]

Sorry to bump an old thread, but I came here looking for a similar answer. Unfortunately both of the answers listed here are not best practices for accessibility, so I want to be sure that's noted.

Alt text is limited to about 100 characters, less than a Tweet, and unlikely to fully describe a complex image. The Poet Training Tool is a great resource for learning how to properly describe complex images.

Using a table for the purpose of layout is generally discouraged for accessibility reasons. Tables primarily should be used for tabular information, generally rows and columns of text and numbers, and only when following accessibility standards such as including a caption and identifying row and column headers. Tables generally should not be used for layout or positioning, as in placing an image and a caption together, without taking into consideration how screen readers interact with tables, such as reading order. See Webaim's article Creating Accessible Tables offers a good explanation.

Right now I'm opting for a paragraph of text immediately above or below the image, where the paragraph begins with something like "Caption: ..."

[sueharlan]

Thanks for the Benetech link, David, I will add it to my accessibility resources. 

[taliaday]

Add this bit of html when you add the image. 

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

[joulesmc2]

I like this except that when floating images, the CSS code does not work 🤔 This is what I tried. It probably would have been too much anyways. I wonder if using Image Credits at the bottom of the page may be acceptable. I am going to check out the Instructional Designers area for more. 

<figure style="float: right;"><img style="float: right;" src="https://maricopa.instructure.com/courses/1165791/files/73653533/preview" alt="The icon representatives of a database, a 3D cylinder, and a spreadsheet, a rectangle with a heading area and then cells for data underneath." />
<figcaption>Icons representing Databases, the 3D Cylinder, and Spreadsheets, the rectangle with a heading area and cells underneath. From DifferenceBetween.net, <a href="http://www.differencebetween.net/technology/difference-between-spreadsheet-and-database/&quot;" target="_blank" rel="noopener">"Difference Between Spreadsheet and Database." </a></figcaption>
</figure>

[rebeccaee]

Hi,

I know this is an old post.  But I found a more elegant solution using the figure tag.  I explained it in a blog post: https://rebeccaee.com/blog/canvas-tips.

Let me know if you have questions.

[PaulSijpkes]

Thanks Rebecca, this is how images aught to be handled in 2022.  It would be a useful feature if the mce editor added in figure and figcaption tags automagically in Canvas and if it supported Markdown. 

[nalexandrowicz]

Again... old post but it was there when I needed it. I wanted to have a figure with caption that is a specific width. Both would be together and right justified on the page. I also wanted to format the caption text a bit. I asked ChatGPT what to write and got a pretty good solution though back and forth conversation. You could copy below, substitute in your image text, and formatting preferences:

<div style="float: right;">
<figure><img id="941136" src="/courses/81733/files/28856/preview" alt="myimage.png" width="350" height="250" />
<figcaption style="width: 200px; text-align: justify; line-height: 1.2;"><span style="font-size: 8pt;">This caption example is set to a smaller width than the figure, 200 instead of 350, set to be justified, has 1.2 line spacing, and smaller text at 8point font. I'm hoping it might:</span>
<ul>
<li><span style="font-size: 8pt;">Look nice</span></li>
<li><span style="font-size: 8pt;">Work well with a screen reader</span></li>
<li><span style="font-size: 8pt;">Something else here.</span></li>
</ul>
<p><span style="font-size: 8pt;">Thank ChatGPT for this lesson.</span></p>
</figcaption>
</figure>
</div>
<p>Put all your text here and it'll appear on the left of the page. Your figure and caption will appear on the right.</p>

This worked OK with Google's screen reader. It read the image alt text then the caption. It was followed by the main paragraph. This is a bit backward - most would prefer to read the text then the image and caption. I think the key thing is that <div> </div> element. It groups image and caption together. If you move it, move everything between those div's

Good luck!

[DanielAntoniuk]

This example adjusts figure box and image to browser size proportionally and places the caption below the image without the use of tables

<figure style="float: right; margin-left: 2px; width: 25%; height: auto; text-align: right;"><img style="border: 2px solid #cccccc;" src="https://unlv.instructure.com/courses/151131/files/22847299/preview" alt="Black and white photo of Thomas Kuhn wearing glasses, suit, and tie." data-api-endpoint="https://unlv.instructure.com/api/v1/courses/151131/files/22847299" data-api-returntype="File" />
<figcaption><span style="font-size: 8pt;">Thomas Kuhn - Wikipedia.org</span></figcaption>
</figure>