All Collections
Customizing Your Website with the Novi CMS
Getting Started
Add an Image to a Page
Add an Image to a Page
Learn how to add an image to a page, apply basic styling to wrap text around the image, and add code to make the image responsive.
Pete Zimek, CAE avatar
Written by Pete Zimek, CAE
Updated over a week ago

Adding an image to a page on your Novi AMS website should be pretty straightforward. Before uploading your image, you'll want to get familiar with these tips and tricks for formatting images.

Insert An Image

  • From the frontend, toggle the Page Editor to Active.

  • Click in the main body of the static page to access the Content Editor.

  • Under Insert, select Image.

  • The Insert/edit image modal will appear:

  1. Source - Add your image from Novi files here. Click the file icon to the right, and upload or select an existing file to insert.

  2. Image description - Add a short text description as the alternate text for the image. We highly recommend adding text here to improve search engine optimization and website accessibility. Note: This is not the same as adding a caption to the image.

  • Click OK to insert the image.

Format An Image

Once the image is inserted, you can format so that text will wrap around it, or round off the corners to make an oval or circle.

  • Click on the image to select it for formatting.

  • From the Content Editor, under Format, select Formats > Images:

Image on Right - Places the image aligned right with the text wrapping on the left

Image on Left - Places the image aligned left with text wrapping on the right

Circle Image - Rounds the corners of the image to an oval or circle. Note: Square images will round to a circle. Rectangular images will round to an oval.

Resize an Image

Resize your images easily by clicking on the white boxes at the image corners that appear when you click on the image.

  • Click and hold the white corner box and drag the image to the size you need.

  • The dimensions of the image will also appear when you begin dragging to resize, if you would like to set to a specific size.

Responsive Images

If your image is wider than about 800 pixels, it could display wider than normal for your mobile website visitors. If that happens, you may want to consider adding a little code to that image.

To do that, go to Tools > Source Code in the Editor toolbar

Find the image in the code and add class="img-responsive" between the file name and the alt style.

For example: <img src="https://assets.noviams.com/novi-file-uploads/filename.png " class="img-responsive" alt="" style="margin: 20px auto;" />

Related Articles

This video will walk you through adding an image to a page and styling it so that text will wrap around it. You'll even learn how to round off the corners to make an oval or circle.

Did this answer your question?