How to create an email template with rotating images and rotating links


You would like to include hyperlinked images to your emails, that will be changing automatically.


If you use CodeTwo Exchange Rules Pro 1, CodeTwo Exchange Rules Family 2007 3.x, 2010 2.x, 2013 1.x, or CodeTwo Email Signatures for Email Clients, click here.

Newer versions of CodeTwo software (CodeTwo Exchange Rules Pro 2.x, CodeTwo Exchange Rules Family 2007 4.x, 2010 3.x, 2013 2.x) come with many improvements. The process of creating such hyperlinks is less time-consuming and much easier. The main point of this solution assumes to create two directories: one for links and one for images. Names of these files should be created with a pattern, to enable cooperation between them, as in the image below.

Fig. 1. Files saved in directories.

To create such a configuration, please:

  1. Prepare two folders on your disk: C2IMG and C2TXT.
  2. Put inside C2IMG images that you want to use as hyperlink content. Rename files with any pattern (e.g. IMG01.jpg, IMG02.jpg, IMG03.jpg...). You can use other pattern, however ensure that all files have the same extension.
  3. Put inside C2TXT files with target of hyperlinks (e.g., with same pattern as in point 2, with extension .html.
    For example: FILE01.html in folder C2TXT should contains:
  4. Open the CodeTwo Exchange Rules Pro / CodeTwo Exchange Rules Family and go to the rule that should contain your hyperlinks.
  5. Open the editor.
  6. Add the Rotating text placeholder from Dynamic content submenu, and fill FolderPath entry with full path to the C2TXT folder.
  7. Add the Rotating image placeholder from Dynamic content submenu, and fill FolderPath entry with full path to the C2IMG folder.
  8. Switch to the Source.
  9. Change the code to be similar with following one: 
    <a href="{Rotating text 1}">{Rotating image 1}</a>
  10. Hit Save.

In CodeTwo Exchange Rules Pro 1.x, CodeTwo Exchange Rules Family 2007 3.x, 2010 2.x and 2010 1.x and CodeTwo Email Signatures for Email Clients

You will need to use CodeTwo Exchange Rules PRO, CodeTwo Exchange Rules Family or CodeTwo Email Signatures for Email Clients in order to create a template of a signature or disclaimer including images that will rotate and link each time to different sites. The editor of the application offers two dynamic fields that will be used below: Rotating Image and Rotating Text.

What you basically want to achieve is for the template to look like that in email #1:

<A href=""><IMG border=0 src="D:\images\001.PNG"></A>

and to switch to another image in the subsequent email #2 i.e.:

<A href=""><IMG border=0 src="D:\images\002.PNG"></A>

Your first thought will be to go to the built-in editor to switch to HTML view and use the Rotating Image variable in place of the image path and Rotating Text variable instead of the website link:

<A href="{Rotating Text}"><IMG src="{Rotating Image}"></A>

You cannot be more wrong as the Source View of the editor will not accept placeholder to be used as parameters for HTML tags. So how to achieve the same result working in the Designer View of the editor. The good news is this is possible. This will only involve one small trick in which you slyly use the Rotating Text placeholder as a non-dynamic field that will supply the parts of the HTML you are not allow to enter in the Source View of the editor - in other words it will force the code into the HTML template.

  1. Prepare the images folder

    Prepare a folder in which you place the images that will rotate. In this example a folder on D partition named images is used, that contains files: 001.PNG and 002.PNG. Remember to give correct access rights to the images.

  2. Prepare the links to rotate

    Prepare a folder in which you place the txt files that will contain the links as in the example in Fig. 2. For simplicity the link files should correspond with names to the image files with which they will co-appear.

    Fig. 2. Prepare the txt files that will contain links to rotate.

  3. Prepare folders that will contain parts of the HTML code

    The most important thing in this step is to remember that you need a separate folder for each of the files you will create in this step. Also, the requirement is that the files are saved with .htm extension (NOT TXT).

    The idea here is to use the Rotating Text placeholder in a different role. Here, each {Rotating Text} placeholder will be used to pull a single part of the whole HTML that you want to insert it into the template (but cannot due to the limitations of the editor).

    To give you an example with a simple piece of code (red part marks the section of the code that will rotate, green is the static part of HTML)

    <A href="">Link</A>

    will need to become in the Designer view of the editor:

    {Rotating Text}{Rotating Text}{Rotating Text}Link{Rotating Text}

    {Rotating Text} #1 will refer to an HTM file containing <A href="

    {Rotating Text} #2 will refer to txt files containing

    1. and


    {Rotating Text} #3 will refer to an HTM file containing ">

    {Rotating Text} #4 will refer to an HTM file containing </A>

    Now, coming back to our large piece of code

    <A href=""><IMG border=0 src="D:\images\001.PNG"></A>

    it will become in the Designer 

    {Rotating Text}{Rotating Text}{Rotating Text}{Rotating Image}{Rotating Text}

    {Rotating Text} #1 will refer to an HTM file containing <A href="

    {Rotating Text} #2 will refer to txt files containing

    1. and


    {Rotating Text} #3 will refer to an HTM file containing ">

    {Rotating Image} #1 will refer to image files and will automatically apply <IMG border=0 src="">

    {Rotating Text} #4 will refer to an HTM file containing </A>

    Fig. 3. Graphical representation of the relationship between the Rotating Text and Image placeholders and folders and files.

    In the case of CodeTwo Email Signatures for Email Clients, you have to copy all files to all client computers. What is more, the paths to the files must stay the same. 

  4. Configure the placeholders in the editor's Designer

    Once you add the Rotating placeholders to the Designer, you need to configure them. To do that select the first placeholder and use the Properties right pane of the editor or right click the placeholder and choose Properties. In the Folder path provide the path to the folder where the file or files are located. Modify the Mask to make sure it finds the file you want to use for this placeholder (*.HTM for folders with parts of the HTML code;  *.txt for folders with link files; *.jpg or *.png etc. for folders carrying image files).

    Change the Working mode to modeSequential for placeholders that include images and links so that you can assign the correct picture to the correct link. In Random mode you will not be able to predict the order in which the images are displayed.

    Fig. 4. Bind the placeholders to the folders they will reference.

    After you configure all Rotating placeholders, the rotating template is ready.

    Try avoiding using *.* as the mask for files inside the folders. Sometimes there is a hidden thumbnail file inside a folder that will also be used by the placeholder if you set it to look for all files.

    If there is a problem matching the image (naming the image files and link files identically may not be sufficient to do that), you need to switch the Rotating Image Working Mode to Random, and send emails until they start to match one another. Then, you can switch to Sequential.

See also: