Images in a Slides template can either remain the same in every generated document or be automatically replaced with images stored in Ezus.
This article explains how to use dynamic image variables and choose the appropriate image behavior depending on the type of image you want to display.
Static images vs. dynamic images
Before adding an image to your template, determine whether it should be static or dynamic.
Static images remain the same every time the document is generated. Use them for elements such as:
Background images
Decorative elements
Fixed branding assets
Images that should not depend on the project
Dynamic images come from information stored in Ezus and change according to the project used to generate the document.
They can retrieve images associated with information such as:
Accommodations
Activities
Products
Destinations
Travellers
Clients
For example:
$$client.logo$$
retrieves the logo associated with the client, while:
$$days.1.images.1$$
retrieves the first image associated with Day 1.
💡 Use a dynamic image variable whenever the image should automatically adapt to the project being generated.
Add a dynamic image variable
To add a dynamic image:
Create an image container in your Slides template.
Make sure the container is square.
Open the Variable Drawer.
Find the image variable corresponding to the information you want to display.
Insert the variable into the image container.
Choose the appropriate image behavior: standard,
crop, orcenter.Generate the document and check the result.
⚠️ Dynamic images should use a square image container. An image may look correct while editing the template but render incorrectly in the generated document if its container is not square.
Choose the right image behavior
You can use the standard image variable or add crop or center depending on how you want the image to appear.
Use crop for photographs and visual layouts
For photographs, we recommend using:
[crop]
For example:
$$client.logo.[crop]$$
The image fills the available image area and is cropped when necessary to fit the shape.
This is particularly useful for:
Accommodation photos
Destination photos
Activity photos
Other visual content where filling the complete image area is more important than displaying every part of the original image
💡 crop is generally the best option for photographs, especially when the source images have different proportions.
Use center when the complete image should remain visible
Use:
[center]
when cropping could remove important parts of the image.
For example:
$$client.logo.[center]$$
The complete image remains visible and is centered within the available area.
This is particularly useful for:
Logos
Graphics containing text
Images where the edges contain important information
Use the standard image variable for general use
In general, you can also use the standard image variable without adding an image modifier.
For example:
$$client.logo$$
or:
$$days.1.images.1$$
This uses the standard image behavior configured for the image.
Use case | Recommended syntax |
General use |
|
Photograph / fill the available area |
|
Logo / keep the complete image visible |
|
Test the generated image
Always generate the document after adding or changing an image variable.
Check that:
The expected image is displayed.
The image fits the intended area.
Important content has not been cropped.
The result remains appropriate with images of different proportions.
If the result is not suitable, try switching between the standard variable, crop, and center depending on the type of image.
💡 Test the template with several projects when possible. Images uploaded to Ezus can have different dimensions and proportions, so testing only one image may not reveal how the layout behaves in other projects.
⚠️ Slides image modifiers such as [crop] and [center] do not work in the same way in HTML templates. In HTML, image size, cropping, alignment, proportions and positioning must be controlled with CSS.