How do I Insert Pictures on Content Management Pages so they Display Correctly on all Sized Devices?

  Overview

In this article you will learn how to insert pictures onto content management pages so they are responsive (display correctly on all sized devices).

  Before You Start

If you do not have RecDesk Content Maagement and you'd like to manage the content on additional pages on your Community site, contact your RecDesk Customer Success Manager.

  From the Dashboard, click Portal Actions, then Content Management (CMS).

Uploading Documents to Content Management Pages

1. Log in to your Community Portal and go to the page with the documents widget on it. See How do I Log In to Add and Update Content?
2. Edit the page content or individual Announcement Post and make sure that the Rich Text Editor is selected
3. Click on the Insert Image button (this will display the Insert Image dialog)
4. To select an image from your local hard drive, click on the Upload button
5. Once you have selected the appropriate image file, it will be uploaded and displayed in the upper right-hand pane of the dialog. If the Width is greater than 300px, it is important that you follow these steps in this exact order to ensure that your picture renders properly on smaller devices:
   1. Change the width down by 1 digit (ie change 641 to 640)
   2. Uncheck Constrain Proportions
   3. Remove the Height
   4. Click the Insert button
6. After inserting the image, click on the HTML button at the bottom of the editor
7. Then search for the word "width" and change the width="640" to width="100%". See ** in Tips here. If there’s also a style=”xxx”clause on the tag, delete that too. For example, it should be changed from:
    
   <img src="/RecDeskPortal/Portals/95/RoundedCornerTesting.jpg" width="640" style="width: 640px;" alt="" border="0" />
    
   to:
    
   <img src="/RecDeskPortal/Portals/95/RoundedCornerTesting.jpg" width="100%" alt="" border="0" />
    

  Tips:

** You can change the width to any percentage of 100% or lower.