Module: alfresco/renderers/Thumbnail

alfresco/renderers/Thumbnail

Renders a thumbnail rendition of a node. This widget was originally written to support the Alfresco Share Document Library but has been expanded to be the base module for all thumbnail widgets. It attempts to make it possible to render thumbnails renditions or action them even when all that is available is the nodeRef of the node.

As well as providing basic actions for navigating a Document Library (e.g. clicking a folder requests to display the content of that folder and clicking on a document links to the details page that renders the document) it is also possible to configure custom actions along with the ability to request a preview of the node be displayed. PLEASE NOTE: If previews are to be shown then the NodePreviewService should be included on the page.

A thumbnail can also be configured to perform selection/de-selection action when clicked through the configuration of the selectOnClick and onlySelectOnClick attributes.

It is possible to configure thumbnails so that images are cropped to fit or stretched to fit so that no white space is shown within the thumbnail. When images are not cropped or stretched the position of the image can be controlled by configuring the horizontal and [vertical]{@link module:alfresco/renderers/Thumbnail#verticallAlignment} to control where the whitespace around the image appears.

Author:
  • Dave Draper
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Examples

Example configuration for use in Document Library:

{
   name: "alfresco/renderers/Thumbnail"
}

Example setting a fixed width for the imgpreview rendition:

{
   name: "alfresco/renderers/Thumbnail",
   config: {
      renditionName: "imgpreview",
      width: "200px"
   }
}

Example requesting a preview when only nodeRef available:

{
   name: "alfresco/renderers/Thumbnail",
   config: {
      assumeRendition: true,
      showDocumentPreview: true
   }
}

Example thumbnail that only performs selection/deselection actions when clicked:

{
   name: "alfresco/renderers/Thumbnail",
   config: {
      selectOnClick: true,
      onlySelectOnClick: true
   }
}

Example configuring full dimensions with a cropped image:

{
   name: "alfresco/renderers/Thumbnail",
   config: {
      dimensions: {
         w: "150px",
         h: "150px",
         margins: "5px"
      },
      cropToFit: true
   }
}

Extends

Mixes In

Members

assumeRendition :boolean

Some APIs provide very little information other than the nodeRef, however if we really believe that the thumbnails are only going to be of something that has a rendition then we can just "go for it" (all bets are really off though as to what we get back though so this should only set to true when you're confident that a valid thumbnail rendition will be available.
Type:
  • boolean
Default Value:
  • false
Source:

cropToFit :boolean

If this is configured to be true then the image will be cropped within the thumbnail. It does mean that aspect ratio of the image will be maintained but that not all of the image will be visible.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/Thumbnail.css"}]
Source:

customClasses :string

Additional CSS classes to apply to the main DOM node defined in the template
Type:
  • string
Source:

dimensions :Dimensions

This should be set to an object containing the starting dimensions of the thumbnail as well as optional information on padding and whether the aspect ratio of the image should be maintained.
Type:
Since:
  • 1.0.40
Default Value:
  • null
Source:

dndUploadHighlightImage :string

Overrides the mixed in default to use the smaller image.
Type:
  • string
Since:
  • 1.0.41
Default Value:
  • "elipse-cross.png"
Source:

dndUploadHighlightText :string

Overrides the mixed in default to hide the upload message.
Type:
  • string
Since:
  • 1.0.41
Source:

folderImage :string

The name of the folder image to use. Valid options are: "folder-32.png", "folder-48.png", "folder-64.png" and "folder-256.png".
Type:
  • string
Default Value:
  • "folder-64.png"
Source:

folderImageAspectMappings :object

This is a mapping of aspects to folder images. It was added to support custom folder images for Smart Folders but can be reconfigured as necessary. If no configuration is provided then a default set of mappings will be assigned.
Type:
  • object
Since:
  • 1.0.66
Default Value:
  • null
Source:

folderImageSize :string

This is a suffix to append to folder images matched according to the folderImageAspectMappings. Folder image sizes are typically "32", "48", "64" and "256". For backwards compatibility reasons, this will only be used when a folder is matched to an entry in the folderImageAspectMappings.
Type:
  • string
Since:
  • 1.0.66
Default Value:
  • "64"
Source:

hasShadow :boolean

Indicates whether or not the thumbnail image should be given a shadow effect.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

horizontalAlignment :string

Indicates how the thumbnail image should be aligned horizontally, the options are "LEFT", "MIDDLE" and "RIGHT".
Type:
  • string
Since:
  • 1.0.40
Default Value:
  • "MIDDLE"
Source:

i18nRequirements :object[]

An array of the i18n files to use with this widget.
Type:
  • object[]
Default Value:
  • [{i18nFile: "./i18n/Thumbnail.properties"}]
Source:

imageIdProperty :string

The property to use for the image id.
Type:
  • string
Default Value:
  • "jsNode.nodeRef.nodeRef"
Source:

imageNodeHeight :number

This will be set to the height of the image node.
Type:
  • number
Since:
  • 1.0.40
Default Value:
  • null
Source:

imageNodeWidth :number

This will be set to the width of the image node.
Type:
  • number
Since:
  • 1.0.40
Default Value:
  • null
Source:

imageTitleProperty :string

The property to use for the image title.
Type:
  • string
Default Value:
  • "displayName"
Source:

itemKey :string

Overrides the mixed in default to set a value suitable for use with standard Alfresco Repository APIs (the default remains the same for backwards compatibility).
Type:
  • string
Default Value:
  • "node.nodeRef"
Source:

lastThumbnailModificationProperty :string

This property is used to determine whether or not a new version of the thumbnail needs to be generated or if the cached version can be used.
Type:
  • string
Default Value:
  • "jsNode.properties.cm:lastThumbnailModification"
Source:

<readonly> naturalImageHeight :number

This will be set to the natural height of the displayed image.
Type:
  • number
Since:
  • 1.0.40
Default Value:
  • null
Source:

<readonly> naturalImageWidth :number

This will be set to the natural width of the displayed image.
Type:
  • number
Since:
  • 1.0.40
Default Value:
  • null
Source:

onlySelectOnClick :boolean

If this is configured to be true then this will ensure that click actions only perform a selection action. However, this also requires that the selectOnClick attribute also be configured to be true.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

renditionName :string

The type of rendition to use for the thumbnail.
Type:
  • string
Default Value:
  • "doclib"
Source:

selectionPublishGlobal :boolean

Indicates whether or not selection publication and subscriptions are made using the global scope. This is only used when either selectOnClick or updateOnSelection are configured to be true.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

selectionPublishToParent :boolean

Indicates whether or not selection publication and subscriptions are made using the parent scope. This is only used when either selectOnClick or updateOnSelection are configured to be true.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

selectOnClick :boolean

Overrides the mixed in default to disable selection on click by default.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

showDocumentPreview :boolean

Indicates whether or not a preview of the node represented by the thumbnail should be displayed when it is clicked. If this is set to true and there is not enough information to determine whether or not the node can be previewed then a request will be published to retrieve that information.
Type:
  • boolean
Default Value:
  • false
Source:

stretchToFit :boolean

This indicates whether or not the aspect ratio of the thumbnail will be retained. This means that for images will be stretched to ensure that there is no white-space visible. However unlike cropToFit the entire image will be visible although possible distorted. If no dimensions are provided then the aspect ratio will always be maintained and the image will not be stretched.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

thumbnailUrlTemplate :string

This allows a tokenized template to be defined where the tokens will be populated from values in the "currentItem" attribute using the processCurrentItemTokens function from the ObjectProcessingMixin module. Note that the thumbnail URL template is expected to be appended to the PROXY_URI for accessing an Alfresco Repository.
Type:
  • string
Default Value:
  • null
Source:

updateOnSelection :boolean

Overrides the mixed in default to not set up the item selection listeners. If this is configured to be true then the thumbnail will be highlighted when the item it represents is selected.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • false
Source:

usePreviewService :boolean

It is recommended that NodePreviewService is used for displaying previews. For backwards compatibility reasons this is not the default configuration but it is expected to become the default in the next major release.
Type:
  • boolean
Since:
  • 1.0.59
Default Value:
  • false
Source:

verticalAlignment :string

Indicates how the thumbnail image should be aligned vertically, the options are "TOP", "MIDDLE" and "BOTTOM".
Type:
  • string
Since:
  • 1.0.40
Default Value:
  • "TOP"
Source:

width :string

The width to render the thumbnail. Units of measurement need to be provided, e.g. "100px" for 100 pixels. The default is null, and if left as this the thumbnail will be rendered at the original image size. This is shorthand configuration when not providing full dimensions.
Type:
  • string
Default Value:
  • null
Source:

Methods

createWidgetDom()

Overrides the inherited function to construct the DOM for the widget using native browser capabilities.
Since:
  • 1.0.101
Source:

cropImage()

This function is used to configure the thumbnail DOM model so that the image is cropped and centered within the thumbnail. It relies on getNaturalImageSize having been called to establish the orientation of the image. Therefore it is important that this is only called when the natural image dimensions have been established.
Since:
  • 1.0.40
Source:

generateFallbackThumbnailUrl() → {string}

If a thumbnail URL cannot be determined then fallback to a standard image.
Source:
Returns:
The URL for the thumbnail.
Type
string

generateRenditionSpecificThumbnailUrl(nodeRefUri) → {string}

Attempts to retrieve a thumbnail URL for a specific rendition. It ensures that the rendition has been generated by inspecting that there is a timestamp for the renditionName in the modification property
Parameters:
Name Type Description
nodeRefUri string The URI compatible nodeRef value
Source:
Returns:
The URL of the thumbnail if available
Type
string

generateThumbnailUrl(renditionName) → {string}

Generates the URL to use as the source of the thumbnail.
Parameters:
Name Type Description
renditionName
Source:
Returns:
Type
string

getFolderImage()

Returns a URL to the image to use when rendering a folder
Source:

getNaturalImageSize()

This function is called when the thumbnail image has been loaded and is used to store the natural height and width of the image. This allows us to work out whether or not the image is in portrait or landscape and allows cropImage to determine the position and size of the image.
Since:
  • 1.0.40
Source:

getSelectionPublishGlobal() → {boolean}

Overrides the inherited function to return selectionPublishGlobal to avoid conflicts with scope configuration for other events (such as linking and showing previews).
Source:
Returns:
A boolean indicating whether or not to publish and subscribe to selection topics globally.
Type
boolean

getSelectionPublishToParent() → {boolean}

Overrides the inherited function to return selectionPublishToParent to avoid conflicts with scope configuration for other events (such as linking and showing previews).
Source:
Returns:
A boolean indicating whether or not to publish and subscribe to selection topics to the parent scope.
Type
boolean

onLinkClick(evt)

Handles the property being clicked. This stops the click event from propogating further through the DOM (to prevent any wrapping anchor elements from triggering browser navigation) and then publishes the configured topic and payload.
Parameters:
Name Type Description
evt object The details of the click event
Source:

onLoadNode(nodeRef)

Makes a reqeust to load all the data for the node. This is required for preview actions when data is not available in the currentItem object.
Parameters:
Name Type Description
nodeRef string The nodeRef to reqeuest the details for
Deprecated:
Source:

onNodeLoaded(payload)

Handles the loading of the complete node data.
Parameters:
Name Type Description
payload object
Deprecated:
Source:

onNodePromiseResolved(nodeRef, nodeData)

This handles the resolution of the complete node data. This then inspects the node data to see whether or not it is possible to display a preview.
Parameters:
Name Type Description
nodeRef string The nodeRef of the node to preview
nodeData object The resolved node data.
Deprecated:
Source:

onNonPreviewAction(evt)

Handles non-preview related actions. Non-preview actions are encapsulated in their own function as requests for a preview might need to fallback to use them when an XHR request to obtain the full node data reveals that a preview cannot be supported.
Parameters:
Name Type Description
evt object The click event
Source:

onShowPreview(nodeRef, mimetype)

Handles requests to show a preview of the node represented by the Thumbnail. By default this will only show a lightbox image for image mimetypes and display a dialog containing a preview for all other mime types
Parameters:
Name Type Description
nodeRef string The nodeRef of the node to preview
mimetype string The mimetype of the node
Deprecated:
Source:

postCreate()

Source:

postMixInProperties()

Set up the attributes to be used when rendering the template.
Source:

resize(dimensions)

This sizes the thumbnail based on the dimensions that have been provided. It is entirely possible to size the thumbnail with just a width (dimensions.w) however a height (dimensions.h) and margin (dimensions.margin) can also be provided.
Parameters:
Name Type Description
dimensions Dimensions
Since:
  • 1.0.40
Source:

setImageTitle()

Sets the title to display over the thumbnail
Source: