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

Document created by Stefanie Sanders Administrator on Apr 16, 2015Last modified by Stefanie Sanders Administrator on May 5, 2015
Version 2Show Document
  • View in full screen mode

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:

 

image-wrap-finished.png

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

13 people found this helpful

Attachments

    Outcomes