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

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

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

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

@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?

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.

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?

@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

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

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.

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

@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:

leward

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". Smiley Happy

rkirkland

This is wonderful! Thank you!

unknown

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

tag, or a

added to contain the content and the float, like so:

style="overflow: auto;">

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

Remember to add the closing 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.

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

This video has been deleted

(view in My Videos)

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

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

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

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!

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

jordan

@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??)

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.

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

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.

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

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 !

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!

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! 🙂

Worked for me, @G_Petruzella !

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

@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?

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.

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