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:
Source - Add your image from Novi files here. Click the icon to the right, and upload or select an existing file to insert.
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