While it's easy to add dynamic content around an image, by default, hyperlinks are not included in the image container and stay the same for each rule. However, by following the steps below, you can add hyperlinks to an image container and change the link destination for each rule.
- Confirm that the image you wish to add dynamic content to currently has a hyperlink.
- Double-click on the image to which you wish to add dynamic content.
- Navigate to the Dynamic tab in the Dynamic Element Rules dialogue box. The default rule will be there for your review but note that it only includes the image, not the URL.
- Select the + icon to add a new rule.
- Define your first dynamic rule. You can use multiple criteria in one rule.
- To add an image to the rule, select Browse to find a previously uploaded image in eGallery, or Upload to add a new image to eGallery.
Upload all the images you'll need for this campaign to eGallery now, so you can quickly go back to eGallery later to copy the image URLs when you need them.
- When the image is added and your rule is defined, select OK.
- You will now see two rules for this image in the Dynamic tab: the default rule and the custom rule you added.
- Select OK to close the Dynamic Element Rules dialogue box.
Selecting OK will save your campaign. Any changes you made prior to selecting OK will be saved and cannot be undone.
You only need to set up one rule at this point, even if you want multiple rules in the long run. You'll add the remaining rules later.
- Scroll to the bottom of your template and select HTML to change your view to the HTML view.
- Search for the term "container" in the HTML code.
Searching for the term "container" highlights every dynamic content container in the code. To locate the specific container you want to add the image links to, you might want to search for the default image URL or the default hyperlink you inserted, rather than "container."
- Locate the <a href> tag that includes your default URL.
Add the following code before the <a href…> tag:
<div style="display: inline;">
Add the following code after the </a> tag:
- Locate the code snippet id="~Container_XXXX~" (XXX is a unique number for each dynamic content container, generated by the system).
- Cut and paste the code snippet id="~Container_XXXX~" into the newly added <div style=”display: inline;”> tag right after the </div> tag.
- Scroll to the bottom of your template and select Normal to exit the HTML view.
- Save your campaign.
- Locate the image within the campaign to change the image dynamic content hyperlinks.
- Right-click on the image and select Dynamic Content > Edit.
Do not attempt to double-click on the image to use the dynamic tab, as in Step 2 above, as it will not work.
- Edit the default rule by selecting the Edit icon at the top right.
- In the rule pop-up, select the HTML view.
- Copy all the code in this window into your clipboard or notepad.
- Close the rule pop-up by selecting Cancel.
- Select the Edit icon to edit the custom rule in the Dynamic tab of the Dynamic Element Rules dialogue box.
- Switch the editor back to the HTML view.
- Paste the HTML code (that you copied in Step 23) before the already existing code.
Add temporary line breaks, as shown in the screenshot above, to make it easier to differentiate between the pasted code and the existing link.
- Select and cut the image link that already existed in the container.
- Highlight the image link in the code you pasted in Step 27 and replace it with the one that you cut in Step 28.
Make sure to paste the image URL into the correct location after <img scr=”> and not into the <a href> tag.
If you added extra line breaks as suggested in the tip above, delete them now.
- Update the link in the <a href> tag with the URL to which the image should link.
- Select OK. You have now successfully changed the hyperlink for the first dynamic content rule image.
- To add more dynamic content rules, click the + icon on the first dynamic content rule (not the default rule) to clone it.
- Define the dynamic rule for the clone, as you did in Step 5 for the first custom rule.
- Switch the editor back to the HTML view.
- Update the image URL in the <img> tag to the image to be used for this rule.
- Update the URL in the <a href> tag to the URL to which the image should link.
- Select OK.
- Repeat Steps 32 – 37 to add more rules.