Embed Static Images into Your Document

8857 1 3 June 25, 2024

Introduction

S-Docs allows you to easily embed static images into your templates. For information on merging dynamic images into your templates, click here.

Note: If images stored outside of Salesforce are used in your S-Docs template directly, you must create a remote site setting for the image's URL domain (using Setup > Remote Site Settings) to avoid broken image icons in the PDF.

Note 2: If you are working with images stored in Salesforce, we recommend pointing image references in your sandbox templates directly to image URLs in your production org. If you do this, you won't need to update any of your images once you move your sandbox templates into your production org.

Embed Static Images Using Code

To embed static images, like a company logo, in your documents, you can use an image tag similar to the following in your S-Docs template source.

<img src="http://publicsite/imagename.png" />

This may be the simplest approach if you are emailing HTML content or wish to embed an image pixel for email tracking. However, keep in mind that if this image is not stored in your Salesforce org or if the host server is not under your control, the linked image may change and therefore is not guaranteed to work.

Embed Background Images/Watermark

A background image or watermark can be added to your document by including the following CSS styling with your image URL.

<style type="text/css">body{ background-image: url("https://background.image.url"); background-attachment:fixed; background-position: center; background-repeat:no-repeat; } </style>

Note: The background image/watermark will be the same for every page of the document. For different images on different pages, you can use the DOCX document format.

Embed Static Images That Are Stored As Salesforce Documents

Note: Salesforce will begin requiring Enhanced Domains for Sandboxes and non-production orgs in Winter '23, and all orgs in Winter '24, which causes image URLs to change. This change will impact certain images in existing templates and the functionality of the template editor Insert Image button for certain template formats. Please review this article for more information.

You can also embed images that are stored as Salesforce documents.

[1] Use the Add Image button on the template editor toolbar to open a menu for adding images into S-Docs.
[2] Click Browse Server to search and add the desired image from your Salesforce documents folder.

If you intend to send a document externally that requires access to the image at view-time (e.g. an email template), be sure that the Salesforce document record, which contains the image, is set for public visibility and copy the image's full URL: 1. Check the Externally Available Image box to make the image visible on the public internet. 2. Right click the image itself and copy its full URL. In Google Chrome, you would right click the image and click Copy image address. In Firefox, you would right click the image and click Copy image location. In Internet Explorer, you would right click the image and click Properties, and then copy the URL from the "Address (URL)" field in the following pop-up window.

Embedding Static Images (2)

You can now add this image into your template by clicking the Add Image button icon in the template editor and pasting the URL you copied into the URL field of the "Image Properties" window.

Embed Static Resources As Images

You can also embed static resources as images within your S-Docs templates using the following code:

<img src="/resource/STATIC_RESOURCE_API_NAME/PATH_TO_IMAGE" />

For example, your static resource reference might look like this:

<img src="/resource/Pckg__Images/FolderInZipFile/image.png" />

Embed Static Images In DOC Templates

For DOC templates, in order to ensure that your images are scaled correctly in the final generated document, it is important to check Embed Images in the Page Settings tab of the template editor.

Additionally, the image source should be in this format (using the style attribute):

<img src="..." style="height: ...px; width: ...px;" />

Rather than this format:

<img src="..." height="..." width="..." />.

Note the difference in the height and width. If you use the second example, the images will show up as tiny squares in the generated document.

Finally, the user must click Enable Editing in Microsoft Word for images to download in the generated document.

Troubleshooting

For images that you need to have externally available, note that, in some older versions of S-Docs, the Browse Server button used the local path rather than the full path, preventing images from being available externally (even if Externally Available Image is checked).
If you want your image to be visible externally (such as including it in an email sent to your customers), you must append the base URL to the beginning of the local path in the source code; e.g. if the Browse Server button uses this path: /servlet/servlet.ImageServer?id=01536000001T3ZE&id=00D36000000v29C&lastMod=147065920900), you must add https://na30.salesforce.com to the beginning to make the image externally available.

You can also forgo using the Browse Server button and use the full path from Classic view rather than the local path (e.g. use: https://na30.salesforce.com/servlet/servlet.ImageServer?id=01536000001T3ZE&oid=00D36000000v29C&lastMod=147065920900 rather than: /servlet/servlet.ImageServer?id=01536000001T3ZE&id=00D36000000v29C&lastMod=147065920900) when referencing the image in your S-Docs template. This is why we copied the image's full URL and pasted it into the "URL" field of the "Image Properties" window in the steps above.

Tags: Images, Template Editor