A few months ago I wrote about displaying images in visual flow. Images can also be displayed on detail screens and list views through the use of formula fields. This is a totally cool way to bring a little life onto the screen and is fun to implement, to boot!
Example of image formula field on detail page:
Example of image formula field in related list:
First of All, Where can Images Be Stored?
Images can be stored in the same three places as with Visual Flow:
- In Documents
- In Static Resources
- On Salesforce Servers
See Displaying Images in Visual Flow for additional information on these options.
The Basic Image Formula
The basic formula to display an image is always the same:
IMAGE( “This is where the URL information goes“, “Alt text“, Height in pixels, Width in pixels )
Or a more precise example: IMAGE( “/servlet/servlet.FileDownload?file=015F0000005tpB0”, “Wind Picture”, 45, 55)
Changing the Formula to Accommodate Where the Image is Stored
For accessing images stored in different places, the only difference in your formula will be the URL information, and, if stored as a Document, whether it is externally or internally available.
For Images Stored in Documents
Images stored in Documents must be individually available. In other words, even though a zipped folder of images can be uploaded to Documents, you will not be able to access the images in the folder.
Documents are also marked as Internally or Externally available and this can make a difference in the URL information.
For Internally or Externally Available Documents – /servlet/servlet.FileDownload
IMAGE( “/servlet/servlet.FileDownload?file=015F0000005tpB0″, “AltText”, Height, Width )
This is really your go-to formula when the image you want to display lives in Documents. Not only will it work for either Internally or Externally marked documents, it also requires only the Id of the document.
For Externally Available Documents – /servlet/servlet/ImageServer
IMAGE( “/servlet/servlet.ImageServer?id=015F0000005tpB0&oid=00DF000000066CS”, “AltText”, Height, Width )
Using ImageServer to access your images in Documents is a bit more complicated as you’ll also have to provide the organization Id (“oid”). Note also that the FileDownload parameter is a “file” and the ImageServer parameter is an “id”.
(To access the org Id go to Setup > Company Profile > Company Information and look for the “Organization ID” field.)
For Images Stored in Static Resources
Images stored in Static Resources can be individually available, however, they can also be grouped into a folder which is zipped and uploaded to Static Resources. This can be really handy for grouping images together that are used for similar purposes. And unlike Documents, Static Resources do not have an additional internally or externally available status.
In this example the URL information is a reference to resource (“/resource/”) followed by the resource name (“GC_Images/”) followed by the file path (“GC_Images/Trees/”) followed by the full name of the image (“Tree03.jpg”).
It is important to note that if I had stored the image as a singular resource (not within a file folder tree) the URL would be simplified. In the above example the URL would become much simpler once the file path (“GC_Images/Trees/”) is eliminated:
IMAGE( “resource/GC_Images/Tree03.jpg”, “Inactive”, 25, 104)
How to Create Grouped Static Resource Images
This took me a while to figure out because I couldn’t find any explanations online that were dumbed-down enough for me to grasp. Then once I figured it out I discovered how easy it was…so it was no wonder I couldn’t find an explanation!
First of all, on your computer, organize your images in folders. You can place those folders inside of another folder if you want like I’ve done here, where all my images are in the folders that you see, and all these folders life in the “GC_Images” folder.
Next Zip your folder (for Windows, right click on main folder and select Send to > Compressed (zipped) folder).
Now go to Setup > Develop > Static Resources
Create a new Static Resource, if you haven’t done so already, or edit an existing one if you’re updating the images in your folders, and upload your zipped folder.
One warning when updating and existing resource: Be sure that any image names you have referenced are still present in the file structure. You can replace images, just be sure they’re named exactly the same as the image that is being referenced in your formula.
That’s all there is to it!
Sizing Your Images
Sizing your images can be a little tricky, and you may need to adjust the height and width several times before you get just the look you want. To cut down on the amount of time spent getting everything to look just right I do the following:
- I start by deciding what is the primary size factor I want to hone in on. If I’m going to be displaying two images side-by-side the height will be the most important factor. Vice versa, if the images are going to be one-atop-the-other, then width will be primary.
- I then fiddle with the image until I’ve got just the height or width I like. You can do this by naming the attributes in your IMAGE formula and leaving off the size attribute you’re not worried about.
- For example, if I’m honing in on height: IMAGE( “/servlet/servlet.FileDownload?file=015F0000005tpB0″, alt=”AltText”, height=”64″ )
- Once I have the perfect height I make a note of it then turn to Excel to help me figure out what the ideal width would be. I enter the actual height and width of the image, and the desired height, and have Excel calculate the width.
- To get the actual height and width in Windows, right click on your image and select Properties then select the Details tab.
- For all the remaining image I want to match to that height I’ll enter their actual height and width, and Excel will calculate the new width.
- Lastly, if the image is being stored in Documents I make a note of these items in the description of the image for future reference.
‘Hope this helps!
- Salesforce Documentation – Use Images in Formula Fields
- Salesforce Documentation – Useful Formula Fields
- Salesforce Formula Cheat Sheet