With Salesforce CRM Content, you can organize, share, search, and manage content within your organization and across key areas of the Salesforce application. This content can include all file types–from traditional business documents, such as Microsoft® PowerPoint® presentations–to Google Docs™ Web pages and audio, video, and image files.

In this blog post, you can learn about the benefits of storing and managing images in Salesforce CRM Content, and about how to use the power of Salesforce CRM Content and Visualforce to build dynamic pages.

Why Manage Images in Salesforce CRM Content?

The overall idea and functional requirements would be to build a Visualforce page that includes images that change relatively often (e.g., a page that shares global news stories). Because the images will change regularly, storing them as Static Resources in Salesforce and referencing them by URL in your Visualforce markup might not be such a great idea, as it might mean that the content management for the images and the page maintenance itself will require quite a bit of effort and changing code.

To simplify and streamline these tasks, you can use Salesforce CRM Content to manage the images. The versioning feature in Salesforce CRM Content makes it easy to upload new versions of a document, or in this case, a new image that represents the latest version of a document. All that you need to do in your page is reference the latest version of the document. After doing that, swapping out images is as easy as uploading a new document version.

How can you reference the images that you’ve stored in Salesforce CRM Content in your Visualforce markup? That’s where the Salesforce CRM Content thumbnail rendition servlet comes into play. The thumbnail rendition servlet is used for various common processes in Salesforce (e.g., rendering thumbnails and previews of files that are shared in Chatter posts), but it also has great, lesser-known applications, including the one that appears in this blog post.

Note: This application approach requires that Salesforce CRM Content licenses be assigned to all Salesforce users who access the Visualforce page.

Implementing your Visualforce Page and Apex Controller

Implementing the Salesforce CRM Content thumbnail rendition servlet is pretty straightforward.

Page Controller

In the Visualforce page controller, select the ID of the latest version of your document, using its document name or its contentDocId, which appears here.

Now that you have selected the ID of your latest document version, you can now build the Salesforce CRM Content thumbnail rendition servlet URL and assign it to a public controller variable.

Visualforce Page

In the Visualforce page markup, you can now use the <apex:image> component to reference the Salesforce CRM Content image. To do this, just add the controller variable that holds the thumbnail rendition servlet URL as the value for the url parameter.

And you’re done! That’s really all there is to it. Swapping out images on this Visualforce page is going to be as easy as uploading a new document version to Salesforce CRM Content. No code changes in the Visualforce markup or the controller code are required!

Additional Salesforce CRM Content Considerations

When you consider using the Salesforce CRM Content approach for your Visualforce pages, it’s important to remember a few things.

  • The Salesforce CRM Content thumbnail rendition servlet supports three different rendition sizes.
    • 120 pixels × 90 pixels
    • 240 pixels × 180 pixels
    • 720 pixels × 480 pixels

The desired rendition size can be passed as a parameter in the URL:
/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=’ + cvs[0].id;
For the three supported rendition sizes, the valid values for the rendition parameter are THUMB120BY90, THUMB240BY180, and THUMB720BY480.

  • The thumbnail rendition servlet URL is not versioned. Also, while Salesforce doesn’t have any immediate plans to change it, the thumbnail rendition servlet URL is subject to change without notice.
  • When building high-volume public pages using Force.com Sites, it’s best to upload images as static resources and reference them as static resources on the page to take advantage of Force.com Site Caching and the Salesforce Content Delivery Network (CDN).  

About the Author and CCE Technical Enablement

Markus Spohn is an Architect Evangelist within the Technical Enablement team of the salesforce.com Customer-Centric Engineering group. The team’s mission is to help customers understand how to implement technically sound salesforce.com solutions. Check out all of the resources that this team maintains on the Architect Core Resources page of Developer Force.

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS