There are 2 types of image you can insert into the canvas:
Static Images – these are images that will render the same for everyone, there is no personalisation.
Dynamic Images – these are images that will vary based upon data that is returned from the data source you are using. For example using the Twitter data source you can insert the profile picture belonging to the author of the tweet.
Adding Static Images
Using the red plus button select the image icon. From the dialog choose ‘Static Image’.
You can load images either from your computer by upload file, or specify the URL of the image. Both options will have the image downloaded onto our servers to ensure fast rendering of the live image.
You then have the option of adding tags to the image before clicking ‘Insert’ to add the image to the canvas where you can make edits such as resizing, rotating or even changing the transparency of the image.
Adding Dynamic Images
Dynamic images allow you to display different images based upon data from fields in your data source such as a Twitter profile picture for Twitter, Instagram Images or weather icons for a weather forecast.
Using the red plus button select the image icon. From the dialog choose ‘Dynamic Image’.
Step 1 - Enter the URL of the image
The first step is to enter the URL of where the image is located, and use merge fields from your data source for the dynamic elements. To access the list of fields use the jigsaw piece.
Most data fields can be inserted from the ‘Pre-defined’ fields – custom fields are where you have added a transformation to the field. For more information on this see our Merge Tags guide.
For our ready-made data sources such as Twitter the whole image URL is contained in the ‘image’ tag. Read the guide for each data source to see which fields contain image URLs.
For your own custom data sources such as perhaps your product list you might only have a partial part of the URL in your data source. In this instance you may need to add the URL like this using the product ID field to build the image URL:
https://www.yourwebsite.com/product/images/{{product_id}}.jpg
Step 2 - Add a preview image
Next, we choose an image to act as a when editing on the canvas. This allows you to get a realistic idea of how your final live image will look when editing. It is best to choose an image the same size and shape as the dynamic images.
For example, if you are creating a Twitter image use an actual Twitter profile picture as the preview image. Adding Preview images is like adding a static image by loading a file from your computer or entering a URL. Alternatively you can select ‘Placeholder’ to insert a generic grey image.
Step 3 - Choose a fallback image
Finally, we need to choose a fallback image. If your data source doesn’t provide a valid URL when we render the image we can put a different image in its place. This is useful in scenarios such as building product live image but where the image is missing, you could specify an image stating ‘Image coming soon’. If you don’t want any image to show in this instance choose ‘Fallback Image’ and nothing will appear when no valid images are returned.
Previewing Dynamic Images
Switch to preview mode at the top of the canvas to see your dynamic image pulled through based upon the details entered in the preview panel. If no image is returned the fallback option will be shown.
Resizing Dynamic Images
Once a Dynamic Image is added to the canvas you can make edits.
Any images added are resized to fit within the canvas if they are too large. Resizing your preview image on the canvas will define the size of the dynamic image.
By default Reignite will resize any dynamic images to fit within the box of the image, while retaining the aspect ratio of the image. If the preview image is a different aspect ratio to the dynamic image then this means either there will be space above or to either side of the image when rendered.
This is why it is useful to choose a preview image that is the same dimensions or aspect ratio as your dynamic images.
An alternative to resizing the image if its too large is to crop the image so it fits the box. Again, Reignite resizes the image to fit the box but will do so so either the height or width has an overhang, and then crops out the overhang. To change to this right click on your image in the canvas and select ‘Crop to Fit’ at the bottom of the menu.
Editing Dynamic Images
To change any details such as the URL of the dynamic image or the preview or fallback images simply double click on the image in edit mode to bring up the edit dialog (You can't edit dynamic images while previewing your image).