{Rich Content Editor] RCE Additional Image Options

[erik_gustafson]

It would be nice if the New Rich Content Editor could have new image options to add elements to images or objects in general, such as:

• Borders
  • With color selection
• Padding
• Margins
• Image Alignment
  • In line with text center, left, or right alignment.

Right now, you have to go into the HTML to edit these things, which is a pain. Most faculty are not adept at using HTML code. This would give them the ability to quickly and easily add these elements. 

[mwolfenstein]

Image formatting in Canvas through the RCE is currently extremely limited. There are fundamental HTML tags and attributes that are supported in the HTML editor that would be relatively easy to incorporate into the RCE and could significantly improve both the availability of these tools to non-HTML savvy users, and the workflow for users who are already familiar with HTML.

The Figure and and Fig Caption Tags

Captioning images is a key practice in information design. However, adding captions through the RCE is a clunky process that produces uneven results and doesn't actually associate the caption text with the image through mark-up. By adding support in the RCE for the <figure> and <fig caption> tags, it would make it possible for non-HTML savvy users to easily add clean, accessible captions to images. A caption field could be included as an optional field in the Attributes area when adding an image and in the Image Options tray below Alt Text.

The Style Attribute for Images

In addition to supporting the Figure and Fig Caption tags, there are some fundamental aspects of the Style attribute that would significantly benefit non-HTML savvy users when managing how images appear on Canvas pages:

• Border - Being able to add a solid set pixel width border that draws a dark color from the CSS would satisfy this need. Advanced users could always modify borders in HTML view.
• Padding - Having an option to add a set width padding between the image and the border would be an essential complement to border, especially for images that are dark at the edges. As with border, advanced users could modify padding in the HTML view.
• Margin - When adding images in-line with text, having control over margin is essential for creating breathing room in the design. Margin could be managed like image size with preset options or the ability to customize it.

Collectively, RCE support for these fundamental HTML elements would significantly improve the ability for Canvas users to do page design with images.

[mwolfenstein]

@Stef_retired one thing I didn't sufficiently emphasize in my idea before it was merged is that the Figure and Fig Caption HTML tags are actually an essential best practice for accessibility. That was actually the reason I started with them as a point of departure rather than just emphasizing the style attributes. In addition, adding the code to format images is actually pretty easy, but adding the code to make an image that's been uploaded to Canvas into a Figure is laborious even for those of us who are comfortable with HTML. I hope that if this idea is picked up for development it starts with integration of those tags. In this respect, even defaulting Canvas HTML to formatting images as figures would be a huge improvement for accessibility without any of the changes to the GUI.

[erik_gustafson]

@mwolfenstein 

This is exactly what I was thinking for the idea! I am our accessibility contact for the Online programs, and tackling accessible images in Canvas is not super easy because the functionality in the RCE is limited. 

Canvas actually just fixed the decorative image checkbox that wasn't working for a while. If we were to get the additional image formatting options you highlighted, I think it would get us in the right direction toward enhancing accessibility for images. 

[mwolfenstein]

@erik_gustafson 

Awesome! We're definitely on the same page. Hopefully this idea gets some views and votes. It doesn't strike me as being a big project for the Canvas team compared to many ideas, and it would definitely lead to some universal design oriented quality of life improvements for users.

[johnmartin]

Yes! Images need to be much simpler!!

[StardustLuna]

I also agree with the suggested padding and border options. I would consider myself pretty adept at html, but it's a pain to hunt through a wall of code that you didn't write to find where you need to place an additional style tag. 

Especially being that I'm going through a professional development course on creating engaging courses and they heavily suggest writing out your own content as opposed to just giving links to students. Having these options will help those who aren't familiar with html create more professional looking pages. 

[erik_gustafson]

I just got another question today about how to add a caption to an image. 

It looks like this is getting some traction though! We really need to get this feature upvoted somehow.