The Image Gallery feature gives Admins the ability to add and then manage (update, replace, delete) groups of images in their templates and messages. Being able to group (into a single story) several images that share a commonality simplifies creating, for example, a grid of sponsor logos or a gallery of photos from an event.
NOTE: The Image Gallery story is available in Template Designer 2 (TD2) and Message Designer 2 (MD2) only.
Image notes
As you add images via the Image Gallery story, keep in mind that:
- You can add as many images as you want to an individual Image Gallery story. However, best practices indicate that if you include a lot of images, you should preview your message to see how it displays. If the "visual" isn't ideal, consider decreasing the number of images, possibly moving some to an additional content type.
- Adding multiple images to a message does not sufficiently increase the message size to cause deliverability issues.
- In most instances, the integrity of an image will not be impacted by changing the layout/number of rows in the story.
- Typically, small-dimension images do not render well when displayed at larger dimensions, despite the aspect ratio being retained. For example, an image that is 300px by 200px could be blurry or degraded when displayed at 600px by 400px.
- If a message has been sent and then any of the message's images are changed (in either the message or the template), the sent version of the message will be automatically updated and reflect the change.
NOTE: If an image is inserted in a message or template and then deleted from Asset Manager, all instances of the image (in messages, templates, and sent messages that are in recipients' inboxes) will display a "broken image" icon wherever it has been inserted.
IMPORTANT: Higher Logic recommends that you:
- review your messages for broken images prior to sending and
- refrain from deleting images from Asset Manager after sending.
Image files - types, sizes, & dimensions
Image files are added in the Image Gallery story via Asset Manager. Consequently, Asset Manager file considerations apply to your Image Gallery images.
- File types/formats: .bmp, .png, .jpg, .jpeg, .gif; all other file types trigger a validation error
- File size (maximum): 10 MB
- Image dimensions (maximums): 800 pixels (high) x 700 pixels (wide)
To learn more about adding and managing images, see Asset Manager.
Add images
Images can be added to templates and messages via the Image Gallery story.
To add an Image Gallery story to a template or message:
- In TD2, drag the Image Gallery story element into the template.
In MD2, click the Add Content button and then select the Image Gallery story.
- On the Content tab, complete the fields as described in the table below.
NOTE: The Targeting tab enables you to choose select groups (as Target Groups) as the only recipients of this story when the message is sent.
| Options | Descriptions |
|---|---|
| Name - Specify a name for this story. This is used when your message uses a Table of Contents. | |
| Include Story in Online Version - Check the box to have this story appear in the message's online version. | |
| A/B Test this story - Click this button if you want to use this story in an A/B Test. | |
Size of images - Choose a layout for your images. The image size and maximum number of images per row display for each option and are calculated based on the width of your template, and will change if the template width is changed. The story in the design canvas auto-updates to demo your selection. Note that if the native image file size is:
|
|
| Image alignment - Set how the images display when there are fewer images than the "maximum per row" setting (see examples in Display examples, below). Default settings ensure proper spacing and padding between images.
NOTE: This applies to the entire story. |
- Click (+) Add image to expand the image properties section and continue with image selection and configuration, as described in the following table.
| Options | Descriptions |
|---|---|
| Up/Down arrows - Click to reposition this image within the story when there are multiple images.
NOTE: Up and down correspond to left and right, respectively, in the story. |
|
| Trash can icon - Click this to delete this image and its placeholder from the story, as described in Display examples, below. | |
| Select image - Click this to open Asset Manager and select an image. (Continue with the steps of this process, below.) | |
| Alt text - Alternative text is a "supporting feature" of web-based images and a basic tenet of good accessible web design. Add alternative text for the image here. | |
| Add hyperlink - Click to add a hyperlink to your image. (See Hyperlinks in Messages for hyperlink options and descriptions.) |
- In Asset Manager, navigate to and select an image.
TIP: Click the image's pencil icon to edit the image in the Advanced Image Editor.
A thumbnail preview of the selected image displays.
You can click:
- the file name to re-open Asset Manager and select a different image.
- the x to remove the image (and optionally, select a different image).
- Edit Image to edit the image in the Advanced Image Editor.
- When you have completed the Content tab, save your template/message.
Replace and remove images
You can easily replace and remove images in an Image Gallery story. If you replace or remove an image in a message or template:
- the version of the message in your account (i.e., in the Messages list) contains the new (i.e., "replacement") image and
- the version of the original message that contacts received are automatically updated to display the new (i.e., "replacement") image.
NOTE: If you delete an image from Asset Manager and do not replace it in the message/template, all instances of the image (in messages, templates, and sent messages that are in recipients' inboxes) display a "broken image" icon wherever the image had been inserted.
Replace an image
Example: one of your sponsors changes their logo and sends you a new image file; you want to replace the existing logo with their new one
- The easiest way to replace an image is to click the file name to open Asset Manager and select a different image.
- You can also click the x to remove an image and then replace it immediately or in future (its "placeholder" remains).
Remove an image
Example: one of your sponsors withdraws their support; you want to remove their logo from your messages or template
- You can click the x to remove an existing image (and replace it if/when you want).
NOTE: If you remove an image this way, its "placeholder" remains. The placeholder displays in the designer canvas but not in the message; however, in the sent message, the system allows for the image (i.e., "saves its place") and applies spacing and padding as if an image was there.
- Click the trash can icon to delete the image.
NOTE: This removes the image and its "place" in the story.
TIP: Refer to the "delete vs. remove" section in Display examples, below, to see the difference.
Display examples
These few examples are provided in order to demonstrate the affect of different settings and options.
Alignment - "justified" vs. "left" (with fewer than the maximum allowed images)
Example 1: a 3-image row with 2 images, "justified"
Example 2: a 3-image row with 2 images, "left"
Images - "delete" vs. "remove" (with fewer than the maximum allowed images)
Example 1: image "removed" by clicking x under the thumbnail preview; the image's "place" is preserved and allowed for (this is apparent in the Designer story but not in any sent version)
Example 2: image "deleted" by clicking the trash can icon; the image no longer displays and its "place" is not preserved