Rich Content Editor: Needs ability to wrap text around images with border and potential for caption

[gmm193]

 Although the former part of my idea was raised in 2015 (Rich Content Editor: Add default padding/margin for floated images), the latter was not and the discussion was archived. Therefore, I bring it up again now that there are more users in the hopes that it will be voted for to a higher degree.

Quick Summary: The default of 0 for borders around images makes text wrapping look unprofessional. Additionally, if you want to have a caption or other text that stays with your image, the text can end up in all different places depending on the browser. Although one solution might be putting items in tables, I have been told that is not allowed for accessibility purposes.  Thus, I wrote CANVAS and they were helpful enough to give me some HTML code to allow me to do these things that actually works (shared below), but this is impractical for your average user. Given that FREE blogging sites (including WordPress as example) allow you to do basic photo/text editing (including border space, alignment with text, and captions) to make layout be consistent and professional without resorting to tables, I encourage CANVAS to build this functionality in for faculty.  When you consider the numbers of faculty being encouraged to create  courses, you can  begin to imagine how useful these layout features would be.

Example from Wordpress FREE blogging site:

Here is the HTML code from CANVAS, but keep in mind that:

1. from src=..."File" is particular to an image file for my course so you need your own info there

2. by keeping the text within the <p and p>, it keeps it with your photo

3. you can change the float to right if you desire

<p style="overflow: auto;"><img style="padding: 0 15px; float: left;" src="/courses/1783839/files/77808577/preview" alt="Bryophyte Moss" width="289" height="217" data-api-endpoint="https://psu.instructure.com/api/v1/courses/1783839/files/77808577" data-api-returntype="File" /><em>Moss. By Rippey574 (talk) 21:52, 12 April 2008 (UTC) - self-made, CC BY 3.0, <a>https://en.wikipedia.org/w/index.php?curid=16900441</a></em></p>

[diana_donovan]

This sample HTML for wrapping text around clip art is helpful.

• If I use this html, I get space between the left-aligned wrapped image and my text, but I don't get a border:
  <p style="overflow: auto;"><img style="padding: 0px 10px 0px 0px; float: left;" [etc.]>
• But if I use this html coding to add a border around the wrapped image, I lose the space between my left-aligned, bordered image and my text:
  <p style="overflow: auto;"><img style="padding: 0px 10px 0px 0px; border:1px solid black; float: left;" [etc.]>

Is there a solution to this?

-Diana

[James]

 @diana_donovan  ,

Sounds like you need to use margin instead of padding (or possibly both). Padding is between the content and the border, margin is between the border and other content. Introduction to the CSS box model - CSS | MDN 

[diana_donovan]

Thank you! That is what I needed!

As you can tell, my html skills are minimal.

I've tried using the part of Canvas' suggested code for this situation that says:
       <p style="overflow: auto;">

I understand that this code helps an illustration rescale as needed. But it also does other odd things.

--Diana

[ingridg_morgan]

I think this is very resourceful. I am a new Canvas user. I am learning so much but looking forward to applying to my class.

[Renee_Carney]

The Radar idea stage has been removed from the Feature Idea Process.  You can read more about why in the blog post Adaptation: Feature Idea Process Changes.

This change will only impact the stage sort of this idea and will not change how it is voted on or how it is considered during prioritization activities.  This change will streamline the list of ideas 'open for voting', making it easier for you to see the true top voted ideas in one sort, here.

[dmoore5]

Let's make this easier please so users can bypass using manual HTML/CSS codes. Thank you. 🙂

[dca243]

I was going to post that just click on the HTML editor link and edit everything yourself. I do this for most assignments, announcements, etc. where I want something other than text to appear. Well even some text, because I can use HTML elements to differentiate content a little better than the default Rich Text Editor.

I use <img src=" ... " alt="description which helps accessibility" width="30px" style="float left; margin-right: 20px" />

This allows an image to float left (or right) within the paragraph. Also, the margin-right pushes other content away from the picture to help with visual appeal and clarity. You can also use the height="..." attribute to help ensure scale of your picture if needed.

[LMDomine]

This would be incredibly useful - it would save time and make pages look professional.

[ChristinaEstes]

Allow text wrapping for images.

[cyhumbert]

Could CANVAS add the standard image options to be able to:

• place an image behind text
• inline with text
• wrap text. etc.?

We currently can only add an image inline with text, and modify the size of the image. This is SO restrictive. I'm trying to add BIG arrows to highlight information, but when I do so, all text gets pushed down and up the page. Being able to add the images BEHIND the text would allow for the ability to really improve things.

[mmerrill]

When adding an image via the RCE, please allow the image options to include the option to add a caption to an image that is embedded in a page. Perhaps with the <figcaption> tag?

[KristinL]

Thank you for sharing this idea with the Instructure Community!

The Product Team reviewed all feature proposals recently, and unfortunately, this thread was identified as one that they would not be able to include in their current or future plans. While we appreciate your proposal, we also want to be transparent about the likelihood of something like this making it to production.

Thank you for collaborating, and we hope that you submit another idea in the future!