How to wrap text around an image using the Rich Content Editor

Stef_retired · ‎04-16-2015

Here's some HTML code that will allow you to use the Rich Content Editor to wrap text around an image on a Canvas page.

Using a Flicker link (this image will appear to the right of the text):

<p><img style="padding: 0 15px; float: right;" src="https://farm8.static.flickr.com/7141/6526425801_5910bfc4a1.jpg" alt="Books" width="164" height="218" />This is an example of how you can use code to wrap text around an image. This uses the "float: right" attribute. Lorem ipsum dolor sit amet, ...

Using an image file of your own (this image will appear to the left of the text):

<p><img style="padding: 0 15px; float: left;" src="/courses/309008/files/48398934/preview" alt="P1010123.JPG" width="204" height="154" data-api-endpoint="https://fsw.instructure.com/api/v1/files/48398934" data-api-returntype="File" />This uses the "float: left" attribute. Lorem ipsum dolor sit amet, in eu amet, quis at dapibus, phasellus porta...

This is how the images will appear in context on the finished page:

[Note: Need help with HTML? Read snugent's awesome blog, Rich Content Editor HTML Cheatsheet]

Chris_Hofer · ‎04-16-2015

This is great! Doing this makes content on your page look really nice, and it eliminates a lot of white space that could be filled with relevant content. Thanks for sharing!

kroeninm · ‎04-16-2015

Stefanie,

I'd be curious, do experience "squishing" of images this way? Typically when I use the float right, I notice on mobile devices, the image doesn't resize vertically but does resize horizontally so I usually convert the fixed pixels into a percentage. ie. width=30% instead of 200.

Thanks!

- Melanie

G_Petruzella · ‎04-16-2015

Same here, @kroeninm An advantage of using the % value is that you don't have to worry about preserving proportionality or overwhelming different screen sizes; the only thing to be mindful of is that images sized with a % tend to get tiny when viewed in the mobile app... 😕

Stef_retired · ‎04-16-2015

@kroeninm and @G_Petruzella , thanks for the feedback!

I've just accessed my test page on an iPad through the Safari browser and the Canvas iOS app, and I am not seeing either vertical or horizontal "squishing"; to my eye, at least, the images have maintained their proportions.

In the Safari browser on an iPad:

In the Canvas iOS app:

I wonder why?

Stef_retired · ‎04-16-2015

You're welcome, @Chris_Hofer . I always keep this code handy so that I can use the wrap text functionality everywhere--not only in pages, but in announcements and assignment descriptions.

G_Petruzella · ‎04-16-2015

stefaniesanders, you've inspired me - wouldn't it be cool for this Group to crowdsource a "Designer's Code Toolkit", a sort of Top-10 list of most useful html snippets for functional course design?

Stef_retired · ‎04-16-2015

@G_Petruzella , that's a great idea! I added the tag code-snippets to the document. I hope members of the group will use that tag on their toolkit contributions, so that anyone could search on that tag to find a crowdsourced list of codes.

kroeninm · ‎04-17-2015

Odd you're right stefaniesanders, now I am not seeing it anymore on iPad or the iPhone (I primarily use the iPhone)...must be something else I'm doing in coordination with the image alignment...I'll repost if I can find the right actions that cause the image "squishing". Thanks!!!

- Melanie

leward · ‎04-18-2015

This is very helpful information; I have provided similar information to our instructors. I'd like to point out that you can left or right align images by selecting the alignment icons in the rich content editor. Unfortunately, there is no padding/whitespace between images and text by default. I would like to see Instructure add default padding of 10 or 15px so users wouldn't have to edit the code.

Stef_retired · ‎04-18-2015

@leward , I see that you've posted a feature idea for this very functionality, so I've added the link to it here for those who are browsing the document:

Rich Content Editor: Add default padding/margin for floated images

leward · ‎04-18-2015

Yep...it's been on my mind for a long time, so after I read your post I though "it's a about time I got to this".

rkirkland · ‎04-20-2015

This is wonderful! Thank you!

delester · ‎04-21-2015

If you use this float technique, you will eventually run into a problem. If the image is taller than the text it is floated next to, the image may wind up overlapping something below it.

The solution is to add "overflow: auto;" to the style of the containing box (the blue box in the above example). This could be the <p> tag, or a <div> added to contain the content and the float, like so:

<p><img style="padding: 0 15px; float: left; overflow: auto;" src="/courses/309008/files/48398934/preview" alt="P1010123.JPG" width="204" height="154" data-api-endpoint="https://fsw.instructure.com/api/v1/files/48398934" data-api-returntype="File" />This uses the "float: left" attribute. Lorem ipsum dolor sit amet, in eu amet, quis at dapibus, phasellus porta...

</div>

Remember to add the closing </div> tag at the end.

I recommend using this even if the problem isn't apparent in your browser. The height of a block of text depends on the width of the browser window and the size of the text, so someone with a large monitor viewing a page at maximum width or reducing the size of the browser text will see longer lines of text but fewer of them, making the paragraph shorter, and possibly creating this issue for some users.

Chris_Hofer · ‎05-05-2015

Not too long ago, Deactivated user posted a video on how to

This video is currently being processed. Please try again in a few minutes.

(view in My Videos)

. The same technique could be done in Canvas, too.

Stef_retired · ‎05-05-2015

@Chris_Hofer , are you saying that we can use that technique in Canvas, or that we should be able to? Believe it or not, when we first piloted Canvas back in 2011, we could right-click on an image and a box would pop up (similar to what Deactivated user described for Jive image wrap) to edit its properties (float left, float right, wrap, and so forth)--but in a subsequent iteration of the LMS (or of Tiny MCE), that capability disappeared.

Chris_Hofer · ‎05-05-2015

stefaniesanders... Oh, sorry...I should clarify. You would need to use the "Align right" button in the RCE tools to float the image to the right. There is no right-click action I can do on the picture itself to bring up a similar tool that Jive has built-in.

john_morris · ‎05-05-2015

stefaniesanders, too bad that feature went away... I wouldn't have to come back to this page and copy the HTML code each time I need to float a picture! I would certainly use more pictures if it were easier to use!

Stef_retired · ‎05-05-2015

@john_morris , I keep the code on a sticky note on my desktop. :smileysilly:

jordan · ‎05-06-2015

@john_morris and stefaniesanders did you see the comment a from @Chris_Hofer just above? Wouldn't that be a simpler alternative to messing around with code?

Click image
Click the align-right option
Done! (right??)

G_Petruzella · ‎05-07-2015

Deactivated user , that's what I do about 95% of the time. It's just those cases where I want to tweak it and use overflow, or margin-left, or something like that, where I tend to go straight to the HTML.

Stef_retired · ‎05-07-2015

Deactivated user, my experience with that method is that it does indeed right-align the image, but it doesn't wrap the text.

G_Petruzella · ‎05-07-2015

Oh wow, stefaniesanders, that's weird. I've always observed text-wrapping when I right- or left-align an image from the RTE. I'm trying to think of reasons that might differ...I've tried a couple of hare-brained ideas:

Maybe "hard-return" between text and image prevents wrapping? Nope, wraps normally.
Maybe inserting image first, then text afterward, prevents wrapping? Nope, wraps normally.

<sherlock>I'd be curious to see the underlying html for an instance where you've used the RTE to align an image and it fails to wrap. If you should want to share that here, maybe we could get to the bottom of this.</sherlock> 🙂

Stef_retired · ‎05-07-2015

Thanks for putting on your Sherlock hat, @G_Petruzella ! The goal is to be able to wrap text around an image that is floated to the left or right without ever having to switch views to the HTML Editor, right? This is interesting! I find that if I insert the image first and leave it floated to the left, and then insert the text, the text appears at the bottom--no text wrap. However, if I then click on the image and float it to the right, the text automagically wraps! And even better, if I then click on the image again and float it back to the left, the text stays wrapped!

So the steps to wrapping image around a left-aligned image, when the image appears at the top of the page, and using only the RCE, are:

Insert the image
Insert the text
Click on the right-align button in the RCE
Click on the left-align button in the RCE

The same thing holds true when you want to float an image in the middle of the page. Initially inserting the image in the middle of text plunks the image in the middle with text appearing above and below the image. One then has to click on the left-align and right-align buttons in the RCE to align the image as desired.

So that method does indeed work--but the result is not particularly pretty, because on the finished page the text butts up right against the image, and as you point out, that's when you have to visit the HTML Editor to add margins and padding. I just ran across this feature idea -- -- and maybe implementation of this would make floating images with text wrap easier and the result more attractive for HTML and non-HTML users alike.

Thanks, @G_Petruzella and Deactivated user and @Chris_Hofer !

Chris_Hofer · ‎05-07-2015

Interesting about how you had to right-align and then left-align to get the text to wrap around an image on the left side of the page. I didn't know about this. Thanks stefaniesanders!

G_Petruzella · ‎05-07-2015

stefaniesanders, I think we can eliminate one more step from the workflow - it should be possible to immediately use the left-align button, without first having to right-align it. I think I've confirmed that, but give it a try and see if we can get that bullet list down to 3! 🙂

Chris_Hofer · ‎05-07-2015

Worked for me, @G_Petruzella !

Inserted an image.
Inserted a few paragraphs of text immediately after the image.
Clicked the left-align icon.

Stef_retired · ‎05-07-2015

@G_Petruzella and @Chris_Hofer , I could indeed eliminate that first step--but only if I didn't resize the image first. It didn't occur to me that that would make a difference, but it turns out that it does.

If I had an image that was exactly the size I needed it to be, I was able to eliminate the first step and follow the exact steps Chris outlines above. However, if I had to resize the image first, I could only find one place to insert my cursor, and that was at the bottom right edge of the image. When I pasted the text there, the image appeared directly above the text--and when I clicked on the image and clicked the left-align icon, the text stayed where it was, unwrapped. That required me to follow the remaining steps (right-align, then left-align again) as outlined above.

So I tried placing the image (without resizing it), then inserting the text, then clicking on the image to left-align--and voila! The text wrapped. I was then able to resize the image and the text remained wrapped.

Now I know why I never could see this in action; I almost always have to use the resizing handles, I always do that first, and it would have never occurred to me to toggle the align buttons to make the text wrap around the image.

What do you think?

Chris_Hofer · ‎05-07-2015

Hmmm...this is strange. I am using Firefox 35.0.1, and I inserted an image onto a page. Then, I tried re-sizing the image. Next, I pasted in my paragraphs of text at the bottom right corner of the image. For some reason, the first line of the first paragraph centers to the image. But, when I highlight the image and click the left-align button, the paragraphs left-align how I want them.

Stef_retired · ‎05-07-2015

Hmmm....can we agree that the experience is inconsistent, not all that intuitive, and that text-wrapped images still need padding and margin?

Chris_Hofer · ‎05-07-2015

Yup! I only tried in Firefox (didn't try in IE or Chrome). It's interesting, too, that I found although there was a little bit of padding between the image and text when left-aligned, there was even less padding around the image after I saved the page. The text was almost right up against the image. So in those cases, padding is definitely beneficial!

jordan · ‎05-07-2015

First of all, Chris I'm glad to see you are using Bacon Ipsum - it's my fave! Quite an interesting observation about FF

For my personal curiosity I really appreciate stefaniesanders, @Chris_Hofer , and @G_Petruzella chiming in and doing some sleuthing on this topic. I think Stefanie summarized the value of her OP very well when she spoke about Padding! While the RCE will technically allow you to float an image to the right or left, as instructional designers, we want the content to look clean and professional like the Screenshot in Stefanie's OP.

Hereafter, I can see myself choosing one of the following paths when adding images via the RCE:

Images/Icons with text to create navigation links (example)
- If I have some icon and want to have a few words of descriptive text next to the icon and use this to link to another part of my course, I will use the RCE to float the image to the left and place my text next to the image. I would press space a couple times due do the lack of padding.
Images to compliment larger amount of textual content
- If I have a ton of text when using the RCE and I want to break it up with an image or several relevant images, I will use the method Stefanie so clearly laid out here for us!

Thanks again, for the continued discussion!

Stef_retired · ‎05-07-2015

Thanks, Deactivated user, great summation! And @Chris_Hofer , Bacon Ipsum just got added to my ever-growing list of cool tool bookmarks.

Chris_Hofer · ‎05-07-2015

Thanks for the feedback, Deactivated user and stefaniesanders.

Chris_Hofer · ‎05-07-2015

So I just tried the same steps in IE and Chrome. The only difference (at least on my PC) was that after I inserted the image and added three paragraphs of text, the text pasted below the image (instead of next to...like it did with Firefox), as stefaniesanders had said in an earlier post. I was still able to select the image after the text was pasted in and then click left-align. Both times, the text wrapped as expected...but again, when saving, there was hardly any space between the image and the words. Re-sizing the image worked the same way.

michael_armstro · ‎07-07-2015

I was able to successfully follow the tips for wrapping text around my picture on the first attempt. It took a few tries as I am very limited in my html skills. Honestly, I was surprised when I got it to work after a few tries.

In trying to replicate this on another page with another image I can't seem to repeat my success. I'm trying to do this with images I've uploaded to Canvas.

<p><img style="padding: 0 15px; float: right;" src="https://farm8.static.flickr.com/7141/6526425801_5910bfc4a1.jpg"

How do you obtain the http information for the image you've uploaded to Canvas?

Then also where you do get the information needed to fill in your own image on this line of html?

alt="P1010123.JPG" width="204" height="154" data-api-endpoint="https://fsw.instructure.com/api/v1/files/48398934" data-api-returntype="File"

Maybe I'm beyond help. I don't know how I was able to do this relatively easily the first time around.

Thanks

G_Petruzella · ‎07-07-2015

Hey Deactivated user, see if the below is helpful:

tl;dr: I'd frankly use the regular, "Insert Content into the Page" way of embedding images. For an html newbie, there are more moving parts to keep track of, if you're intending to insert an image from the html view. But if you're interested in exploring, more power to you! Keep reading...

It looks like the standard tag + attributes format for an embedded image in Canvas is generically:

The attributes style, alt, width, & height can all be up to you. src and data-api-endpoint are the ones that "point at" the image in question. In the example below, notice that src and data-api-endpoint are actually pointing at the same resource, just with a couple notable differences. Extracting the two attributes from the below, for comparison:

src="/courses/1647099/files/69737877/preview"
data-api-endpoint="https://mcla.instructure.com/api/v1/courses/1647099/files/69737877"

Here, src is using a relative URL, and adds /preview at the end; data-api-endpoint uses an absolute URL, and does not append /preview.

In your course Files area, hover (to view) or right-click (to copy) the URL of any given image: for example, right-clicking and copying the URL of the image in my example above, from within Files, gives me:

https://mcla.instructure.com/files/69737877/download?download_frd=1

Notice that this URL needs editing before it matches the format of the URLs above - get rid of all the 'download' stuff, and inserting the references to the course. The unique image ID is the number that follows /files/ . The unique course ID is the number that follows /courses/ (in the data-api-endpoint attribute).

michael_armstro · ‎07-07-2015

@G_Petruzella Do you mean embed image in the RCE? If so, I was wanting to wrap text and I couldn't figure out how to do that in the RCE. Am I overlooking something? I will read the rest of your information and see what I can learn. Thanks!

michael_armstro · ‎07-07-2015

Gerol Petruzella Do you mean embed image in the RCE? If so, I was wanting to wrap text and I couldn't figure out how to do that in the RCE. Am I overlooking something? I will read the rest of your information and see what I can learn. Thanks!

michael_armstro · ‎07-07-2015

Sorry stefaniesanders I saw my post mistake of replying to the original document too late. I'm learning.

michael_armstro · ‎07-07-2015

Sorry again. Apparently too much multitasking. I meant in the rich text editor not RCE.

G_Petruzella · ‎07-07-2015

No worries! I may have been answering a different question than what you were asking... in terms of wrapping text, here's my preferred method:

"Insert Content into the Page" to get the image there;
then click and right- or left-justify using the align buttons on the toolbar to wrap text around it;
only go the html if I'm tweaking something like whitespace or height/width.

michael_armstro · ‎07-07-2015

Okay great! That seemed to work just fine. When trying it before I wasn't clicking on the image, therefore it would move text too.

Thanks!

G_Petruzella · ‎07-07-2015

Aha, the clicking. Yes, that would make the difference! 😄 Glad I could help clarify that.

jordan · ‎07-07-2015

Gerol, you never cease to amaze me! Thanks for helping Michael out! Kommunity Kudos for your awesomeness!

Now if you're up for a challenge... Next time, I encourage you to include a short screencast (+narrative) with your post. Being able to see someone do something often resonates and really helps people connect the dots 😉

G_Petruzella · ‎07-07-2015

Aw shucks Deactivated user. <blush> Yes, you're right - the next level's challenge for me is definitely doing the screencast thing. I will definitely be getting in that habit.

bsnelearning · ‎12-19-2015

Hi Stefanie

I am interested in your original screenshot as it appears to show Canvas in a different font a bit like Century Gothic? IS this the case and if so how did you go about doing this :O)

Super article as always

Gideon

@gideonwilliams

Stef_retired · ‎12-20-2015

@bsnelearning , thanks, and what an astute observation! I'd never noticed that the font in the image differs from that used by other Canvas instances. I didn't make any adjustments in the page HTML to change the font, and since I'm not an admin in that school's instance, I had a look at the school's custom global CSS using the Developer Tools in Firefox.

...and sure enough, there it is: Century Gothic.

For comparison, I used the identical code in a different Canvas instance that doesn't use custom CSS, and here's how it looks:

As you can see, this is a very different font, which I believe is the default font for Canvas out of the box.

bsnelearning · ‎12-29-2015

Many thanks and sorry for the lateness of the reply. Did not know that you could alter the font in this way. Many thanks for the visual nod too :smileycool:

eshumway · ‎02-22-2016

Thanks for sharing stefaniesanders!

Deactivated user thought you might want to see this.

finneyvm · ‎07-21-2016

Excuse my ignorance, but can you explain exactly what to do with that code? I entered the html listed above for wrapping text around an image I uploaded, by opening the HTML editor on the page I wanted to do wrapping on. I tried pasting that text before and after the existing text, but that doesn't work. Do we replace all the existing text that's there?

Also, someone forwarded me a link to this page when I couldn't find an answer myself in the Canvas guides. I went to the canvas guides at community canvasims and typed in "how to wrap text around an image" and there were no results. Is that not the best place to search?