Style an Inline Image

From Drab to Fab Style an Inline Image

About the DesignPLUS Image tool

Have you ever been frustrated because you can’t add whitespace around images in Canvas? The good news is that the DesignPLUS Image tool automatically adds space around images and offers many additional features. There’s one catch: it doesn’t handle image uploads into your Canvas course. First, you’ll need to copy and paste the image into the page or upload the image to the Canvas Files tool.  Once the image is available Canvas, DesignPLUS Image tool can help you to:

  • Insert the image into the editor
  • Add ALT text or mark the image as decorative
  • Add an image caption
  • Change the size of the image
  • Wrap text to the left or right of the image
  • Make the image clickable, opening the full-size image in a pop-up when clicked.
  • Apply a decorative border to the image

 

 Practice what you've learned

Time to practice your skills.  If you need help, open the DesignPLUS Task Instructions page in a new browser tab.  

  1. Change the theme for this page to the one you selected.
  2. Add the Module Item Completion Progress Indicator to the bottom of this page.

 

 Exercise: Add and style an image

Although there are many ways to add an image to a page, in this exercise, we'll use the DesignPLUS Image tool select an image from the Files tool before styling it.

  1. Click Edit to modify this page and then return here.
  2. Place your cursor to the left of the first word ("Lorem") in the sample text beneath these instructions.
  3. From the Sidebar main menu, select the Add New Elements (  ) tab.
  4. Search for or locate the Image tool and select it. A placeholder image will be added to the page and the active tab in the main menu will switch to Edit Current Element (  ) so you can customize the element.
  5. In the Edit Current Element (  ) page, confirm that Image is the active tool. If not, select it.
  6. Open the Content panel if it is not already open.
  7. In the Content panel, open the Change Image panel. You will see a horizontal menu of icons for selecting the image source from three possible sources in Canvas. Select Course Images, the middle icon.
    The File Sources button bar with buttons for My Files, Course Files, and Institutional Files
    •  = User Images (stored in your personal Files).
    •  = Course Images (stored in course Files).
    •  = Primary Images (stored in DesignPLUS configuration course).
      (Note: if selecting image from Primary Images library, image must be copied to course for users to see it)
  8. Use the Folders/Filters dropdown to select the Sample Images folder.
  9. Click on the thumbnail of one of the sample images to select it. The selected image will replace the image placeholder.
  10. While still in the Content panel, add Alt Text. You can also add an optional Caption.
  11. Open the Style panel. Set the Width of the image to 300 pixels. The height will auto-adjust to maintain the original aspect ratio.
  12. Experiment with the Image Alignment icons to see the effect of each. Select the Float Left option when you are done.
    Image Alignment menu with Float Left selected
  13. By default, there is no border around your image. To add a border, drop shadow, or change the shape of your image, open the Border Options menu. Experiment with the various options and choose the one you would like to use. Tip: Use the same shape and border treatment for most of the images in your course to maintain a consistent, professional appearance.
  14. If you added a image caption in the Content panel, experiment with the Caption Styles and choose the one you want to use:
    Caption Styles options with Default selected
  15. To allow students to view a full-size version of the image, check Set image as popup when selected. With this option enabled, clicking the image will open the original image in a pop-up window.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta condimentum ex, ut volutpat ipsum pretium facilisis. Etiam vestibulum ligula sem, ac sollicitudin metus commodo sed. Maecenas bibendum felis sit amet lorem bibendum, et aliquam libero elementum. Sed consectetur augue quis finibus dapibus. Sed in tristique tellus. Phasellus aliquet cursus quam, nec porta sapien gravida sed. Ut sed turpis vulputate, commodo ante sit amet, consectetur urna. Curabitur congue condimentum interdum. Morbi euismod est quis nulla commodo, ac mollis lacus imperdiet.

Bravissimo! You've completed all of the exercises in this module, which means your ready to start applying what you learned to your own courses. Click Next for some tips and next steps.