[Rich Content Editor] Allow height/width on <source> tah=g

[matthew_buckett]

This idea has been developed and deployed to Canvas LMS

---

Problem statement:

It's possible to use the HTML <picture> tag containing multiple <source> tags to render different images depending on the end user device. This allows some presentational content to be hidden when the user is on a device with a small screen (an advantage over the <img> tag). However the width/height attributes are filtered from the <source> tags which means that the content in the page shuffles around as the image loads as the browser doesn't know until the image is loaded how much space to allow in the page. This leads to a poor experience for people viewing the page.

Proposed solution:

Allow width/height on <source> tags.

User role(s):

instructor,designer

[matthew_buckett]

There's good examples of the <picture> tag which uses the <source> tag on: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

[AllisonHowell]

This idea has been added to the Tools and functionality to help instructors or designers build engaging courses theme for further consideration.

[KristinL]

  Comments from Instructure

This feature is available in Beta. For more information, please read through the Canvas Deploy Notes (2024-01-17) 

How do I access the Canvas beta environment as an instructor?

[KristinL]

Comments from Instructure

For more information, please read through the Canvas Release Notes (2021-07-17)