Skip to main content
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 or click the Image Icon on the lower tool bar.

  • The Insert/edit image modal will appear:

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

  2. Alternative 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, in the formatting window in the lower toolbar, select Images:

OR you can get to the same options by going to Format > 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 boxes at the image corners that appear when you click on the image.

  • Click and hold the 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.

  • When clicking on an image, you will also see an image editor toolbar appear (see above). Resizing the image is also possible from this menu in addition to other editing features like contrast, color adjustment, and rotation.


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


Did this answer your question?