All Collections
Customizing Your Website with the Novi CMS
Getting Started
Add or Edit Headshot or Logo on a Profile in Novi
Add or Edit Headshot or Logo on a Profile in Novi

Learn how admins can upload (and edit) an image to a Novi record.

Melanie Dupont avatar
Written by Melanie Dupont
Updated over a week ago

Adding headshot photos to profiles or a logo to a company profile is an easy way to spice up your listings! This can apply to members in the directory, or even for your own "staff" or "contacts" page.

Watch the video or check out the step by step instructions below.

To add a headshot or logo image to a profile in Novi:

  • Go to the Details tab on the record.

  • Scroll down to the Profile Information section for individual record or the Marketing section for Company records.

  • Click the Upload File (or Replace File) button.ย 

  • Select the file and click Open.

To adjust a logo or headshot:

When uploading a company logo or headshot to a record in Novi, the initial placement of the image is not always ideal. Users can manipulate the image using the Zoom and Drag options described below. This feature is available on the backend (for admins) and the frontend (for members).

Edit Options: Zoom & Drag

When a company logo or profile image (headshot) is uploaded to a record in Novi, there are two options available:

  1. Zoom: A zoom bar to resize the image

  2. Drag: The ability to click and drag the image within the frame

If the image needs to be manipulated, use the zoom and drag features to adjust the fit.

  • Once the image is framed properly, click the Set Crop button (beneath the picture). This will save the image, including any adjustments you made. It will not change the original jpg/png file.

  • If the picture looks good, click the Save button (top right).

  • If the picture still needs to be adjusted, click the Edit Crop button.

Example

This is the original upload placement:

The image has been adjusted (zoomed out):


โ€‹After clicking the Set Crop button, this is the final image placement:


โ€‹Don't forget to click the Save button when you're done!


For more information, check out the Best Practices for Optimizing Images for Web article.
โ€‹

Did this answer your question?