[ARCHIVED] How do I wrap text around a picture in Canvas?

[rmartinez5]

How do I wrap text around a picture in Canvas?

[Chris_Hofer · Accepted solution]

Hi  @rmartinez5 ...

Earlier this evening I helped to answer a similar question from another user.  I searched the Community and found the following document which might help to answer your question: How to wrap text around an image using the Rich Content Editor.  This document is located in the https://community.canvaslms.com/groups/designers group here in the Canvas Community.  If you aren't following this group, please use the group link that I have provided, and then click on the following two buttons at the top right corner of the screen: "Follow" and "Actions" (further click on "Join group).

I hope these resources will be of help to you, Ricardo.  Please let Community members know if you have any other questions about this...thanks!

[Chris_Hofer · Accepted solution]

Hello there, @J_Levin and @TercoraReynolds ...

Sorry for the issues with the links not working in my original response.  That's a result of the Canvas Community switching platforms last Summer, and so not all links have been re-directing to the current Community site like they should have.  Here are some updated link for you:

• Searching the Community: Click on your avatar image in the upper right corner of any page here in the Community.  Then, select "Community FAQ".  On the screen that appears, scroll down until you see an option for "Search" where you will find five items to read about searching.
• How to wrap text around an image using the Rich Content Editor - Canvas Community
• Instructional Designer - Canvas Community

I believe this was the post I was referring to back on January 10, 2020: Flip and position an image? - Canvas Community.  In that posting, I referenced the following link: Solved: How do I flip a picture that I upload to Canvas? - Canvas Community. which may be of help to you, too.

[Chris_Hofer · Accepted solution]

Hi  @rmartinez5 ...

Earlier this evening I helped to answer a similar question from another user.  I searched the Community and found the following document which might help to answer your question: How to wrap text around an image using the Rich Content Editor.  This document is located in the https://community.canvaslms.com/groups/designers group here in the Canvas Community.  If you aren't following this group, please use the group link that I have provided, and then click on the following two buttons at the top right corner of the screen: "Follow" and "Actions" (further click on "Join group).

I hope these resources will be of help to you, Ricardo.  Please let Community members know if you have any other questions about this...thanks!

[J_Levin]

I don't know how to use HTML and the link you provided didn't work. What, exactly, do I put before the image, and what, exactly, do I put after it? How do I get the image itself in there?

Thanks!

[Chris_Hofer · Accepted solution]

Hi there, @J_Levin ...

I don't know that you'd need to use or modify much (if any) HTML at all...to be honest.  Positioning an image (left, center, or right align) on a Canvas page can be done using the Rich Content Editor (RCE) tools.

Let's assume that you have one or more paragraphs of text, and you want an image next to this text that displays in the upper right corner of these paragraphs, and (depending on the length of the paragraphs and the size of the image) the text will wrap around the image.

1. Type the paragraphs on your Canvas page using any formatting that is needed (bold, underlining, etc.)
2. Make sure your image is uploaded to your course so that it can be displayed on your page.  Place your cursor at the very beginning (before the first word) of the first paragraph on your page.  You can then follow this Guide to upload your image: How do I upload and embed an image in the Rich Con... - Canvas Community.
3. Once your image is displayed on your page (still editing the page), click on the image to highlight it.  A blue box should display around the image.
4. With the image still highlighted, use the RCE tools to select the menu Format >> Align >> Right.  This will bump your image over to the far right side of the screen, and hopefully, your paragraph(s) of text will have wrapped around it.  (Side note, these same alignment tools may also be displayed as icons on the RCE toolbar just below the text-based menu).

I hope this will help a bit.  Sing out if you have any other questions about this...thanks!

[AlysonLie]

Hi Chris, 

Thank you for this. I tried it and it worked but really didn't know what I was doing. It's easy to get lost in the code. 

Can you indicate specifically what part of the code in your link we are to copy/paste and where/how we customize it for our purposes? 

Also, since students are almost exclusively using their phones, it seems that text wrapping gets all wonky sometimes. On a laptop or a tablet it's pretty and a technique I've always used in the past when it was a simple click to float left or right.

I wonder if there's a video tutorial that can guide us in the process. 

Onward,
Alyson

[Chris_Hofer]

Hi @AlysonLie ...

Can you indicate specifically what part of the code in your link we are to copy/paste and where/how we customize it for our purposes? 

---

I am not sure what you mean by "part of the code in your link".  Which link are you referring to?

---

Also, since students are almost exclusively using their phones, it seems that text wrapping gets all wonky sometimes. On a laptop or a tablet it's pretty and a technique I've always used in the past when it was a simple click to float left or right.

---

Yeah...that might happen.  It's always a good idea to try and design your course pages so they look good on a variety of devices such as desktops/laptops and mobile devices (iPhone, iPad, Android, etc.)

The Google Chrome browser has a handy tool that allows you to see what your page would look like on other devices:

How to View Mobile Websites on Your Computer in Chrome (howtogeek.com)

---

I wonder if there's a video tutorial that can guide us in the process.

---

Yup!  I found a couple videos on YouTube that might be of help:

Hope this info will be helpful to you!

[AlysonLie]

Hi,

What part of the code in the example at this link (other than lorem ispum) is relevant to word wrap? 

Also, I'm not sure where exactly it goes in the page source code.

I'll take a look at those videos. 

Thank you! 

Alyson

[Chris_Hofer]

@AlysonLie ...

Oh...I see.  The link that you provided...

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

...is a blog post from Stefanie Sanders, not me.  Stefanie has retired, so you won't see postings and/or responses from her in the Community any longer.

If you don't want to mess with HTML, I'd suggest looking through the videos I shared.  In Stefanie's blog, for the second code snippet she provided, it looks like that code would appear near the top of the page.  If you look at the first video I shared with you, follow along with that person to insert an image into your page and align it the way you want.  Then, you could switch over to the HTML side of the page if you wanted so that you can see what the code looks like.  If you're happy with how things look using the tools that are available in the RCE, you shouldn't really need to mess with the HTML too much (or at all), to be honest.

Hope this helps!

[AlysonLie]

Thank you! 

All this fuss and bother happens because I'm a design guru wanna be with not enough know-how and enough dumb courage to run into snags when I can't just snap my finger. 

Onward! 
A. 

[TercoraReynolds]

I would like to know as well. 

[Chris_Hofer · Accepted solution]

Hello there, @J_Levin and @TercoraReynolds ...

Sorry for the issues with the links not working in my original response.  That's a result of the Canvas Community switching platforms last Summer, and so not all links have been re-directing to the current Community site like they should have.  Here are some updated link for you:

• Searching the Community: Click on your avatar image in the upper right corner of any page here in the Community.  Then, select "Community FAQ".  On the screen that appears, scroll down until you see an option for "Search" where you will find five items to read about searching.
• How to wrap text around an image using the Rich Content Editor - Canvas Community
• Instructional Designer - Canvas Community

I believe this was the post I was referring to back on January 10, 2020: Flip and position an image? - Canvas Community.  In that posting, I referenced the following link: Solved: How do I flip a picture that I upload to Canvas? - Canvas Community. which may be of help to you, too.

[LMiller247]

Hi there,

These responses all talk about how to add an image, but none of these talk about how to wrap text around the photo. Perhaps there just isn't a way? Please google if you're unsure of what I mean...

Thanks!

Laura, still searching for the answer in 2022

[Chris_Hofer]

@LMiller247 ...

Can you tell us more about how you envision your text around a photo/image?  The steps and the links that I provided should still apply today.  In my examples, I first added the text to the page, then I inserted an image.  I right-aligned the image to the page...so that it appears the text is wrapping around the image (or at least part of the image).  Are you wanting text to completely surround all four sides of your image?  Something else?  Looking forward to hearing back from you.