Display Thumbnail Infos

The present article demonstrates how it is possible to display these details on an image's thumbnail:

  • Date
  • Tags
  • Original filename
  • Custom label

Implementation of Apex Class

The code snippet below shows the implementation of the Apex Class used to display thumbnail details.

public class SharinPixSearchPage {
    private Map<String, Object> params;
    private sharinpix.Client clientInstance = sharinpix.Client.getInstance();

    public SharinPixSearchPage(ApexPages.StandardController stdCtrl) {
        params = new Map<String, Object>{ 
            'path' => 'search?v=2&search_bar=false', 
            'q' => '*',
            'thumbnail_tags' => true,
            'thumbnail_filename' => true,
            'thumbnail_date' => 'L',
            'custom_label' => 'CustomLabel__c'
        };
    }

    public String getParameters() {
        return JSON.serialize(params); 
    }

    public String getSearchUrl() { 
        return clientInstance.getAppHost() + '?token=' + clientInstance.token(params); 
    }
}
Parameter Value Description
thumbnail_tags
 Boolean Display tags applied on image in thumbnail.
thumbnail_filename Boolean Display image's original filename in thumbnail.
thumbnail_date String Display the date on which the image was uploaded in a specified format. For example: 'd MMM YY' yields 4 Nov 18.
More information about date formats can be found here.
custom_label String This parameter allows the display of a custom label. The value of the custom label should be stored in a Salesforce field on the sObject SharinPixImage__c. The Salesforce field API name should then be used as the value for the parameter custom_label, for example: custom_label: 'CustomLabel__c', where CustomLabel__c refers to the API name of the Salesforce field storing the value for the custom label.

Implementation of Visualforce Page

The code snippet below shows the implementation of the Visualforce Page used in this demo.

<apex:page docType="html-5.0" cache="false"
  showHeader="false"
  sidebar="false"
  standardStylesheets="false"
  standardController="Account"
  extensions="SharinPixSearchPage"
  applyHtmlTag="false"
  applyBodyTag="false">
  <iframe src="{!searchUrl}" height="400px" width="100%" style="border: 0" ></iframe>
</apex:page>

How it appears

The screenshot below shows how the filename and date are displayed on the thumbnail of an image. 

Tip:

SharinPix also provides download parameters that can be used to personalize the download filenames. For more information about these parameters and how to configure them in a custom search, refer to the following article:

Multiple Image download (ZIP) - How to personalize the download filenames