Image Library Overview
The image library gives you a place to upload, tag and search all of your message images. You are able to reference and display those images in your messages using absolute image path URLs.
The image library supports file types of JPEG, GIF or PNG. SVG file types are not supported at this time.
When uploaded into an image library, your images will be stored at their original dimensions. The image dimensions are reflected in the image path URL.
For example the following image path shows the image dimension as 600x132 pixels:
You have the option to change the image size that will be displayed by changing the dimensions in the image path. Note that changes to the image size will be performed on the server as opposed to the browser when using HTML or CSS image dimensions.
Uploading an Image
- Navigate to Content › Images
- Click the Upload button.
- Upload the images.
- Use the Add Files button to select one or more images from your computer.
- You also have the option to drag and drop files from your computer into the window.
- Add tags to your images for advanced searching options.
- When finished, click Finish Upload.
- You can sort images by name, file type or last modified. You can also view images in a grid or list and search by name, file type, tags and last modified date.
Inserting an Image in a Message
You can insert images from the image library into a message using either the wysiwyg editor or the HTML editor.
Insert with the wysiwyg editor
If the wysiwyg editor is enabled for your account on the Account & Password page, you can insert images from the image library directly in your message using the Insert Image button.
- Create or edit a message.
- Place the cursor where you would like to add an image and click the Insert Image button on the wysiwyg editor.
- Hover over the arrow of the selected image and select Insert.
- The image will be inserted into the message.
Insert with HTML editor
If the HTML editor is enabled for your account on the Account & Password page, you can insert images from the image library directly in your message using the Insert Image button.
- Create or edit a message.
- Click the Image Library button in the bottom left of the message editor.
- Obtain the URL of the image by locating the image in the image library, hovering over the info arrow and clicking Copy URL.
- Copy the image HTML from the window.
- Paste the image HTML where you would like the image to appear in the message.
Finding and Replacing Image Paths
If you are coding an email in a 3rd party HTML editor, such as Dreamweaver, you have the option of replacing relative image paths when uploading images in Cordial, or absolute paths after images have already been uploaded.
Find and replace relative image paths when uploading images
Regardless of the insertion method (wysiwyg or HTML editor), you are able to find and replace image paths when uploading images using the message editor.
This is useful if you've coded an email using relative image paths on your local computer and wish to have all relative paths automatically replaced with absolute paths when uploading.
- Paste in the HTML code with the relative paths into the message editor.
- Click the Insert Image button and then the Upload Image button.
- Select the option to "Automatically find and replace image paths in the template for all uploaded images".
Selecting this option will replace all relative image paths in the message with the absolute paths of the images of the same name in the library.
Will be replaced with:
Note that the relative image paths must be at the root level of the HTML document and not in a nested folder.
Find and replace absolute image paths in a 3rd party HTML editor
You also have the option to replace absolute image paths with the new absolute image paths from the image library.
This is useful if you have images hosted on another server and wish to move all images to your Cordial image library.
- Upload images into your Cordial image library.
- Copy the image path of one of the images in the library excluding the image name.
- Change the image dimensions in the path to be 0x0.
Note: The image path (url) in the Cordial image library includes the image dimensions (for ex: https://d1ok0qgebci2d3.cloudfront.net/163/600x132/logo.png). By changing the dimensions in the image path, you can alter the size of the displayed image. The image is resized and resampled at the server level. If you change the dimensions to 0x0, the image will display at it's native size.
- Find and replace the absolute paths to the old server with the new absolute path to the image library.
For example, replace:
All image paths in the HTML code will now be referencing their location in the image library.
In the next article learn about HTML content.