Adding Responsive Images to Articles

Tags kcs

Issue

  • The image in my article looks weird when I view it on a smaller screen
  • How do I get images in articles to resize based on the screen size?
  • How to I make the image in my articles responsive?

Environment

  • Client Portal

Resolution

To get your images to automatically adjust to fit the screen size a reader is looking at the article on, you need to:

  • Remove any Width and Height info from the Image Properties window
  • Add the responsive image HTML to the image in the source code of the article

Step 1. Remove any Width and Height info from the Image Properties window

  1. Go to your article and click Edit Article.
  2. In the article Body, double click the image.
  3. Remove any info from the Width and Height fields.
  4. Click OK.

Step 2. Add the responsive image HTML to the image in the source code of the article

  1. Go to your article and click Edit Article.
  2. Click <> Source.
  3. Find the line of code for your image.
    • Using CTRL+F and searching for "img" can help you locate it quickly.
  4. After img, type class="responsive"
  5. Click Save as Draft to test your update.
  6. Once you've confirmed the image now automatically resizes, Approve This Revision.

Here's an example of what the code will look like with the responsive HTML:

<p><img alt="" class="responsive" src="https://yourclientportalname.teamdynamix.com/TDPortal/Images/Viewer?fileName=123" style="border-width: 1px; border-style: solid;" /></p>
Print Article
Loading...