Add dynamic image for PDF attachment in Visualforce email templates Lightning Experience

PDF image insertion in Salesforce Lightning Experience is a different system. When PDF is generated, there is a security control. So, the solution with external server for images described in this article will not work. Instead you should use the solution with static resources described in this article. Let’s check it step-by-step.

Create your Visualforce email template. Here is my example:

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

So, you have 2 parts of your letter:

  • HTML part of the letter
    • HTML LOGO
  • PDF ATTACHMENT
    • PDF LOGO
HTML LOGOPDF LOGO
style=”width:100%; max-width:180px;” max-width=”150″
External server with images can be used
Check my article:
Add dynamic image from external server in Visualforce email templates Lightning Experience
External server with images can NOT be used
Static resources for image insertion CAN be used.
Check my article: Add dynamic image in Visualforce email templates Lightning Experience
Static resources for image insertion CAN be used.
Continue reading the article to check how does it work.

2. Upload your logos in Static Resources:

Set Up –> Static Resources — > New.
Don’t forget to make it public:
Cache Control: Public

This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.42.58.png
This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.45.20.png
This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.46.32.png
Add dynamic image for PDF attachment in Visualforce email templates Lightning Experience

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

4. Copy the link of your static resource:

Open on uploaded file in static resources –> View file
The file will open in a separate window. Copy link URL.

This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.47.10-copy-1024x566.png

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

This image has an empty alt attribute; its file name is Screen-Shot-2020-02-17-at-13.56.12.png

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

Important nuance for installations!

Your static resources URL on Sanbox and on Organisation environment is different. So, most likely if you test your email templates with the links of logos on Sandbox will work but will not work in Organisation environment. You will have to create directly on Organisation environment (Lightning Experience) :

  • Logo field
  • Static resources with logos
  • Copy the links from ORGANISATION ENVIRONMENT (Lightning Experience) to your logo field

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 *