Skip to main content

Email Marketing help

Hi, how can we help?

Search

eInsight - Code Editor - adding hyperlinks to images

Note
The Code Editor was formerly referred to as the "HTML Editor."

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.

  1. Confirm that the image you wish to add dynamic content to currently has a hyperlink.
  2. Double-click on the image to which you wish to add dynamic content. 

Campaign_Manage_HTMLEditor_Image_Select.png

  1. 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.

Campaign_Manage_HTMLEditor_DynamicTab.png

  1. Select the + icon to add a new rule.

Campaign_Manage_HTMLEditor_DynamicTab_RuleAdd.png

  1. Define your first dynamic rule. You can use multiple criteria in one rule.
  2. 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.

Campaign_Manage_HTMLEditor_Image_Upload.png

Tips
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.
  1. When the image is added and your rule is defined, select OK.
  2. You will now see two rules for this image in the Dynamic tab: the default rule and the custom rule you added.

Campaign_Manage_HTMLEditor_DynamicTab_Rules_Two.png

  1. Select OK to close the Dynamic Element Rules dialogue box.
Alert
Selecting OK will save your campaign. Any changes you made prior to selecting OK will be saved and cannot be undone.
Tips
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.
  1. Scroll to the bottom of your template and select HTML to change your view to the HTML view.

Campaign_Manage_HTMLEditor_HTMLView.png

  1. Search for the term "container" in the HTML code.

Campaign_Manage_HTMLEditor_HTMLView_Container.png

Note
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."
  1. Locate the <a href> tag that includes your default URL.

Campaign_Manage_HTMLEditor_HTMLView_A_Href.png

  1. Add the following code before the <a href…> tag:

    <div style="display: inline;">

  1. Add the following code after the </a> tag:

    </div>

Campaign_Manage_HTMLEditor_HTMLView_DisplayInline.png

  1. Locate the code snippet id="~Container_XXXX~" (XXX is a unique number for each dynamic content container, generated by the system).

Campaign_Manage_HTMLEditor_HTMLView_ContainerID.png

  1. Cut and paste the code snippet id="~Container_XXXX~" into the newly added <div style=”display: inline;”> tag right after the </div> tag.

Campaign_Manage_HTMLEditor_HTMLView_ContainerID_Insert.png

  1. Scroll to the bottom of your template and select Normal to exit the HTML view.

Campaign_Manage_HTMLEditor_NormalView.png

  1. Save your campaign.
  2. Locate the image within the campaign to change the image dynamic content hyperlinks.
  3. Right-click on the image and select Dynamic Content > Edit.

Campaign_Manage_HTMLEditor_Image_Edit.png

Note
Do not attempt to double-click on the image to use the dynamic tab, as in Step 2 above, as it will not work.
  1. Edit the default rule by selecting the Edit icon at the top right.
  2. In the rule pop-up, select the HTML view.

Campaign_Manage_HTMLEditor_HTMLView_CopyCode.png

  1. Copy all the code in this window into your clipboard or notepad.
  2. Close the rule pop-up by selecting Cancel.
  3. Select the Edit icon to edit the custom rule in the Dynamic tab of the Dynamic Element Rules dialogue box.

Campaign_Manage_HTMLEditor_DynamicTab_Rule_Edit.png

  1. Switch the editor back to the HTML view.
  2. Paste the HTML code (that you copied in Step 23) before the already existing code.

Campaign_Manage_HTMLEditor_DynamicTab_Rule_PasteCode.png

Tips
Add temporary line breaks, as shown in the screenshot above, to make it easier to differentiate between the pasted code and the existing link.
  1. Select and cut the image link that already existed in the container.
  2. Highlight the image link in the code you pasted in Step 27 and replace it with the one that you cut in Step 28.

Campaign_Manage_HTMLEditor_HTMLView_PasteImageLink.png

Note
Make sure to paste the image URL into the correct location after <img scr=”> and not into the <a href> tag.
Note
If you added extra line breaks as suggested in the tip above, delete them now.
  1. Update the link in the <a href> tag with the URL to which the image should link.
  2. Select OK. You have now successfully changed the hyperlink for the first dynamic content rule image.
  3. To add more dynamic content rules, click the + icon on the first dynamic content rule (not the default rule) to clone it.

Campaign_Manage_HTMLEditor_DynamicTab_Rule_Clone.png

  1. Define the dynamic rule for the clone, as you did in Step 5 for the first custom rule.
  2. Switch the editor back to the HTML view.
  3. Update the image URL in the <img> tag to the image to be used for this rule.
  4. Update the URL in the <a href> tag to the URL to which the image should link.

Campaign_Manage_HTMLEditor_HTMLView_A_Href_NewURL.png

  1. Select OK. 
  2. Repeat Steps 32 – 37 to add more rules.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a Request

0 comments

Please sign in to leave a comment.