Add dynamic image from external server in Visualforce email templates Lightning Experience

In my previous article I showed how to add images by using static resources. Here I have an alternative solution for adding dynamic image for your Visualforce email template in Lightning Experience. In this case I will use external server.

Choose the cheapest hosting provider. Buy your domain.

I bought a domain name on my hosting. I don’t need a beautiful name. The more generic it is, the better it is. Ex.: my-files.com, 123456file.com. Whatever you want.

Instal WordPress

For simplicity I will use WordPress. It has some plugins with a password protection for your website and also I can instal a plugin that will show me my folders from the server and I can easily upload images there just by drag and drop.

Instal plugins to protect your data

For password protection I use this plugin.
Why do we use password protection? Basically, there is no so sesetive information on this website. It is just to prevent Google from indexing it and from users to see some folders with our different logos/pictures/product photos.
For file manager I use this plugin.
This file manager allows us to see the folders of our website. We will use one of /wp-content/uploads/ folder for our pictures/. Here you can create your folders and name them like you want. After you will upload your images there.
For uploads protection I am using this plugin.
It is necessary to protect your uploads because people still can type: yourdomain.com/wp-content/uploads/ and find your uploads. With this plugin people won’t see anything.

Alright, now we have 3 levels of security and we are ready to upload our pictures.

How to build Visualforce email templates with image insertion in Lightning Experience?

The process of creating the system is simple with this article. The only difference is that in the previous article we were using static resources and here we will use external server that we created on WordPress.

1. Build your Visualforce email template.

If you need more info of how to create a template of email using visualforce, please, check related article.

There is a part of the code marked as: “Your LOGO”. Here will insert the logo.

2. Create a new field for your logo in Lead object:

Set Up –> Object manager –> Lead — > Fields & Relationships –> New . Field type: Picklist
Create a field “Logo”. We will use it for our email templates.

This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.42.58-1.png
This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.54.00.png
This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.54.37.png
This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.55.24.png

3. Copy the link of uploaded images from your external server:

4. Insert your link into in Logo field in Lead.

Add dynamic image from external server in Visualforce email templates Lightning Experience

Installation is ready. Now your image will be shown in your Visualforce email.

If you want to make it dynamic, send me a request and I will send you an instruction of how to make a dynamic image insertion based on certain conditions.

Leave a Reply

Your email address will not be published. Required fields are marked *