CommTrak Image Library

This article is an introduction to managing the CommTrak Image Library, which can be used as a source for images (e.g. a logo or product photograph) in the CommTrak HTML editor.

This article explains the basics of adding an image into an HTML template. Advanced topics such as formatting HTML elements are beyond the scope of this article..

The HTML Template Editor is used for creating and modifying the HTML templates that are used in, for example:

  • Email Templates (e.g. Customer, Jobs, Workflow)
  • Email Signatures
  • Basic Quote Templates

Images used in HTML templates that will be viewed outside the context of CommTrak, must be located in a publicly-available area of the Internet. There are two options available for storing such images:

  1. Your organisation's, or a third-party, publicly accessible, image server
  2. The CommTrak Image Library

Images must be publicly accessible, otherwise recipients will not be able to see the image in an email or hosted document that you send to them.

The following screenshot shows a section of an email that includes an image that is not publicly accessible:

Broken links are typically caused in the following scenarios:

  • An image referenced in an HTML template has been deleted from its original storage location (such as the image library or other file server).
  • The image in the HTML template references a file on the local storage of the person who created the template. The template previews correctly in CommTrak, but when sent to recipients, the image cannot be accessed.

Publicly Accessible Server

Images can be stored on any publicly-accessible server to which you have access. For example:

  • Your organisation may host its own publicly-accessible image server.
  • Your organisation may subscribe to a third-party service such as Cloudinary, ImageKit, or other image hosting service.

When using your own, or a third-party image hosting service, you must ensure the following:

  • The hosted images are always available
  • Your service includes the bandwidth to serve the images as required

CommTrak Image Library

The CommTrak image library is available in the toolbar of any CommTrak HTML editor into which images can be inserted.

To insert an image, position the editing cursor at the location where you wish to insert the image, and press the Image icon in the toolbar. The Image Properties pop-up window will be displayed:

To select an image, press the Browser Server button (visible in the previous image).

Another pop-up window is displayed, providing the following features:

  • Select an existing image
  • Upload an image to the library

Select an Existing Image

If the image you require already exists in the image browser:

  1. Press the Copy Link option adjacent to the required image, and close the pop-window
  2. Paste the text into the URL field of the Image Properties window

The image is displayed in the preview window, and the width, height, etc., can be specified if required. Press the OK button to insert the image into the template at the previously-selected cursor position.

Add a New Image to the Library

It is recommended that template images are organised into folders.

Create a Folder

  1. Press the + (plus) icon adjacent to the folder selection field
  2. Provide a folder name
  3. Press Create Folder

Select a Folder

Select an existing folder name from the dropdown list:

Upload an Image to the Library

Prior to uploading an image to the library, we recommend resizing it to the size at which it will be displayed, and saving it in a format that's optimized for fast and clear web viewing. This ensures your images will not only look good but will also load quickly when viewed.

The Mailchimp website has a comprehensive article that explains best practices for preparing images for display on the web, and the information also applies to displaying images in emails: https://mailchimp.com/resources/how-to-optimize-images-for-web/

  1. Select a folder into which the new image will be uploaded
  2. Press the Browse button, and select the file that you wish to upload.
  3. Press the Add button to upload the image into the library

The image is now available for insertion into the HTML template.

Deleting an Image

Deleting an image will 'break' links in any HTML templates in which the image is currently being used. We recommend updating HTML templates prior to deletion of images from the library.

Press the trash can icon adjacent to the image that you want to delete.

The image is removed immediately, without any further prompting.