cancel
Showing results for 
Search instead for 
Did you mean: 

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

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

(3)
 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:

185143_CaptionExample_GMM.JPGCaptionExample_GMM.JPG

 

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>

27 Comments
Community Team
Community Team

185072_pastedImage_3.pngThank you for your Feature Idea submission. We wanted to call your attention to   which was submitted in a different voting period, but archived due to lack of votes or inadequate response. You may want to reference this idea for insight.

Since archived ideas can be re-submitted, your idea will be open for vote in the next voting cycle.

In the meantime, help your idea gain traction by posting a link to this idea in the comments of the other, archived idea (which will notify author and anyone who is following the idea) and share your idea to colleagues and peers as well.

Surveyor

Thanks Renee. I mentioned that there was a discussion that was archived in my description but I can be more specific if it helps. My idea has more layers to it then the original idea as well.

Best,

- Glenna

Sent from my iPhone

Community Coach
Community Coach

Hi gmm193@psu.edu

I agree that this would be great functionality for many faculty who do not want to use the HTML editor for whatever reason. Even for those who use HTML, this would be a time saver.

Thank you for sharing that code snippet. Instructure created a Canvas course shell for interested folks where we can share HTML tips, tricks and code snippets with each other. It is intended for both experienced and inexperienced coders - even non-coders. We now have more than 400 participants in this course.

If you might be interested in joining us, you can find this course at https://resources.instructure.com/enroll/8R9H7B.

That link includes a join code, but you may be asked to create a free account at Resources.Instructure.

Hope to see you there.

KLM

Community Member

A way to add space / margins / padding around image elements would be ideal for non-CSS-literate (read, most) users. I've seen several lecturers add images, left or right align them with the RTE, and then have the wrapping text bump up against the image:

ImageMargin.png

Surveyor II

Agreed. It does look very unprofessional when there is no padding around an image and the text runs right into it. It would be great to have more options in Canvas when inserting an image so someone doesn't have to know HTML coding. Great suggestion!

Community Member

Yes, this is really needed. Starting to be a staple feature of most commonly used online editors. It's frustrating for new users, especially those that feel technology-challenged, that their content doesn't look good. It's almost worse to have to show HTML fixes, as it makes the whole platform seem unnecessarily clunky and confusing.

Surveyor

Fully agree that this feature would be useful.  In general the WYSIWYG editor is pretty limited and I find that I have to do a lot of coding to fix things because the editor is too limited. 

Community Member

So much YES! I can deal with the close margins/padding with regular text wrapping, but when you use bulleted lists next to an image the bullets end up on top of the image, which pretty much looks terrible. Even if it couldn't be a standard set, being able to edit it easily would be wonderful. Especially for majority of the users who have no idea how to read or write HTML/CSS.

This would be a very useful, and very frequently used, request.

Can I vote 100 times today???  I spent an hour yesterday looking in the style guide for a way to do this exact thing!! Like you I had to resort to code and some various, unremembered combination of moving things around to get it to look half-way decent (this started by trying to use the table idea).  I am a new Canvas user and I SWORE to myself that I must just be missing something--user error--you can even do this in MS Word--it HAS to be here in Canvas too, right?.......and then I found this!!  I am curious why anyone would vote it down.  I mean, if it is just a tool added to the Rich Content Editor then how could it be anything but helpful (or ignored)?  Just wondering.....

Community Member

A lot of faculty want this feature, particularly if they have a profile page with a photo. I would rather WYSIWYG tools enable this with accessible code.