Knowledge Base

How to add a placeholder based image

Problem:

You wish to add an image to a signature or disclaimer that would be different for each of the senders. The address of such an image should be made out of a static web address and information gathered from Active Directory.

Solution:

The main idea here is to upload desired image files to a web server, so the images become available for everyone with internet access. You should consider putting them into a specific directory (e.g. http://example.com/images) following a specific naming pattern. For example, the name of the image file may consist of the sender's first and last name - for Howard Wilford it would be howard.wilford.jpg. You can also use any other variables that are available in Active Directory. This is important because we are going to use information pulled from AD to prepare valid references to your images on the fly.

Important

The following method works only for online (web) images. To learn about the advantages and disadvantages of this approach, please consult this article.

If you are using CodeTwo Email Signatures for Office 365, an alternative solution would be to take advantage of conditional placeholders. With this feature, you can e.g. insert different images to an email signature depending on who the sender is. This allows you to use embedded images as well. Learn more about conditional placeholders

If you are going to include photos of your users, consider using the {Photo} placeholder instead. Learn more in the editor's manual for:

Once you upload all images, please follow the steps below:

  1. Open Administration Panel (if you use software from the CodeTwo Exchange Rules family) or Manage Signatures App (if you use CodeTwo Email Signatures for Office 365).
  2. Select a signature rule and edit it. The signature template editor (Editor) opens.
  3. On the editor's ribbon, click Picture.
  4. Choose Online picture and provide URL to the web directory where you have stored the images. Do not include any placeholders at this moment.
    Adding web image
    Fig. 1. Adding picture.
  5. Click OK. On the ribbon, click the Source button to enter the HTML source code view.
  6. Find the IMG tag responsible for displaying your image (static part of the address). At the very end of the address, using the Placeholder → Message sender menu, add the necessary placeholders. Be advised that you have to provide the correct image file extension as well.
    Add-dynamic-image-addess
    Fig. 2. Adding placeholders to image address.
  7. Double check if the image address is correct. Let us assume that we have a user named Howard Wilford. The path that is defined in Editor should look as follows:
    <IMG src="http://example.com/images/{First name}.{Last name}.jpg">
    Once the message is processed, it will change to:
    <IMG src="http://example.com/images/Howard.Wilford.jpg">
  8. To test your signature, you can use the Preview feature available in Editor.