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>

[Renee_Carney]

Thank 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.

[gmm193]

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

[kmeeusen]

Hi  @gmm193 ​

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

[d_ellis]

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:

[ahardesty]

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!

[jason_paddock]

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.

[ccarriga]

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. 

[cbarger]

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.

[jounjianauque62]

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.....

[ejp10]

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.

[bgibson]

The basics of being able to easily add image justification, padding, and a border are useful when creating a good looking page. A few years ago WordPress.com removed the functionality of being able to easily add an image border.  Some users went nuts... I went nuts;-)  The explanation was that they were attempting to adhere to CSS3 standards.  *I see that functionality is back in, for the WP.com sites, but if you have a WP instance installed on your servers, you would need to add a plugin to regain that simple functionality.  *One of those program improvements that looked like a step backwards to me.

We use Ingeniux as our current institutional web site CMS, and I've recently had to start training users on "the basics"... so, I decided to use a Canvas site to create a page with the various basic functions.  I typed some text, added some images from the various user screens, and recorded (Snagit) some usage screen capture videos (mp4s).  At some point, I added a couple of images and realized that I didn't have the option to left or right justify the text around the image.  That is pretty basic for me.  In order to create a good looking page, I normally zigzag my images as I follow the body text down through the article.  So, I was stuck with images with one line of text flowing from the middle border of the image.  Normally, I would hate this, but in this particular instance it emphasized what I was saying.  But, the majority of times, I am going to want to easily justify, add some padding and put a simple 1 px border around staff photos.  *Ingeniux, by the way, has a nice little image editor which does all of the above easily.

[denise_kreiger]

Moving forward, I hope Canvas adds a feature enhancement to be able to format an image and wrap text, etc., on a page without having to go into HTML code. Other LMSs I've used have this feature/tool as part of the RCE. IDs might be able to do the HTML code, but I don't think the average instructor will be going into HTML to make changes. As a result, pages may not be aesthetically designed or interesting to the students.

Thank you for your consideration!

Denise

[bgibson]

Having played with WordPress alot, and seeing that Canvas wasn't quite mature in this area, I used an iframe to embed a WP site.  I could take advantage of the site navigation in WP, and the image manipulation and even add a column plugin to put multiple columns of text within a page, which I think makes it look more professional.  Many WP themes are "responsive," so when you start moving to smaller display screens both Canvas and WP begin to "dumb down" and display the content well.  *Still, there was the problem of wanting the WP site to be secure, without Canvas users having to login to the WP content.

[kmcgee]

Hello Canvas Community,

Thank you so much for sharing this comment about using the RTE in Canvas. I can certainly understand and see how having a simple way to add padding to an image would make your content look more professional. We will look into how this may work with our upcoming product plans and keep you updated as we have more information.

Thank you,

The Canvas Product Team

[gmm193]

Thanks Kate! I would like to clarify that in addition to padding, this post was also about being able to position images in line with text (i.e. have text wrapping) and to potentially be able to add a caption without resorting to a table (not accessible for all users) or putting some text in the rich text editor and just hoping it hangs out with the image, sort of.  Right now, we are stuck with html coding, which is ok for a minority of users but not for a majority of users who have no interest in coding. All of these abilities that people voted for will be very useful to the many professors who create online tutorials for both in person and online courses.

[steeletm]

Yes - I edit the html by adding margin-right: 10px; and margin-left: 10px right after the float tag.

[dperpich]

Our Librarians are working hard to teach instructors and students to properly attribute the sources of their images.  It’s best practice to do that in a caption instead of burying the attribution in the alt tag.

Captions are so vital to conveying context in print and on the web -- attribution or otherwise.  The fact that this is impossible for mere mortals is super frustrating for instructional designers and faculty alike who are struggling to build media-rich content in Canvas.

Not allowing an easy UX for wrapping text appears to be in the service of the Most Responsive/Representative Design.

I don't have a clue what not allowing for an easy UX for adding a caption is in service to.

[jounjianauque62]

OK, I'm a little slow and not IT professional so PLEASE walk me through this!!

This is what I understood from your post: 

You took a WP page and possibly saved it as a image (gif, etc.)? (I dont know what an iframe is...)

Does this solution work with screen readers or otherwise pass ADA requirements?

What do you mean by Canvas users having to login to access the content? 

[jason_paddock]

An iFrame would basically embed a whole live webpage into another. It's basically the same tool that services use where you copy their code to input it into your web page. It could potentially work for ADA requirements, but you'd definitely want to test.

[bgibson]

It's not a case of slowness, but experience.  The WP page you saw, was the actual page (with all it's working navigation) embedded in a Canvas course page.  It's not a static image.  (When it dawns on you what I am saying, your eyes should look upward, with a little bit of a frown on your forehead, and you should say, "Ooooh, that's powerful";-)  This means that any WP navigation links that are shown, can be clicked on, and should work, within your Canvas page.    *There are some pages and extra functionality that might not work in an iframe, within a Canvas page, because it is not being served "securely".  A secure page's URL will start with "https" and a non-secure page's URL will start with "http".

You can go here to see the basics of an iframe explained, and even try it out:  HTML iframe tag

As a test, you might also type the following iframe code into the HTML view of a Canvas page and see what happens:

Choose the URL to almost any web page (the White House) and replace the URL that is shown above between the quotes.  That page will appear within your Canvas page.  If you need, ask the Canvas Help Desk to walk you through how to embed an iframe into a Canvas page.  After you get it embedded, you can play with the "width=" and "height=" options for the iframe and that will cause the iframe to resize.