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 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 CommTrak must be located in a publicly accessible area of the Internet. There are two options for storing such images:

  1. Your organisation's own, 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 them 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 image links are typically caused by the following:

  • An image referenced in an HTML template has been deleted from its original storage location (such as the image library or another 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 another image hosting service.

When using your own or a third-party image hosting service, make sure that:

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

CommTrak Image Library

The CommTrak Image Library is available in the toolbar of any CommTrak HTML editor that supports image insertion.

To insert an image, position the cursor at the location where you want to insert the image, then press the Image icon in the toolbar. The Image Properties pop-up window will appear:

To select an image, press the Browse Server button (visible in the screenshot above).

[[VERIFY: confirm whether the button label is "Browse Server" or "Browser Server" and update accordingly.]]

A second pop-up window opens, giving you the following options:

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

Select an Existing Image

If the image you need already exists in the image library:

Step 1: Press the Copy Link option next to the required image, then close the pop-up window.

Step 2: Paste the copied link into the URL field of the Image Properties window.

The image appears in the preview window. You can specify the width, height, and other properties if needed. Press OK to insert the image into the template at the cursor position you selected earlier.

Add a New Image to the Library

We recommend organising your template images into folders.

Create a Folder

Step 1: Press the + (plus) icon next to the folder selection field.

Step 2: Enter a folder name.

Step 3: Press Create Folder.

Select a Folder

Select an existing folder from the dropdown list:

Upload an Image to the Library

Before uploading an image to the library, we recommend resizing it to the dimensions at which it will be displayed, and saving it in a format optimised for fast, clear web viewing. This ensures your images look good and load quickly for recipients.

The Mailchimp website has a comprehensive article on best practices for preparing images for the web — the guidance also applies to images used in emails: https://mailchimp.com/resources/how-to-optimize-images-for-web/

Step 1: Select the folder into which you want to upload the image.

Step 2: Press the Browse button and select the file you want to upload.

Step 3: Press the Add button to upload the image to the library.

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

Deleting an Image

Deleting an image will break links in any HTML templates that currently use it. We recommend updating any affected HTML templates before deleting images from the library.

Press the trash can icon next to the image you want to delete.

The image is removed immediately, without any further confirmation prompt.