Studio Developer Manual / Version 2301
Table Of Contents
Thumbnail resolving is implemented in instances of ThumbnailResolver. ThumbnailResolver
instances are registered with the editorContext and configured with a content type name and property names.
A default configuration for thumbnail resolvers can be found in the class
BlueprintFormsStudioPluginBase.ts.
A ThumbnailResolver is selected when the configured content type matches the content type of
the content in the link list. Thumbnail resolvers respect the content type inheritance. For example, the thumbnail
resolver for CMTeasable will also be used for content of type
CMArticle, since CMArticle is a subtype of
CMTeasable.
The properties are evaluated in the configured order. If one of the configured properties contains an image blob,
the corresponding thumbnail URL is returned.
If the property is a link list, a matching ThumbnailResolver is looked up for the first content of
this list and the search for the thumbnail blob goes on. If no blob is found, a default icon is shown.
As in the example below a notation like localSettings.thumbnail is supported.
The example points to a link property thumbnail which is a child of the struct property localSettings.
import ThumbnailResolverFactory from "@coremedia/studio-client.ext.cap-base-components/thumbnails/ThumbnailResolverFactory";
import editorContext from "@coremedia/studio-client.main.editor-components/sdk/editorContext";
//...
editorContext._.registerThumbnailResolver(
ThumbnailResolverFactory.create("CMCollection", "pictures", "items"));
editorContext._.registerThumbnailResolver(
ThumbnailResolverFactory.create("CMTeasable", "pictures", "localSettings.thumbnail"));
editorContext._.registerThumbnailResolver(
ThumbnailResolverFactory.create("CMPicture", "data"));
Example 9.99. Example thumbnail resolver configuration
The configuration above could be applied as follows:
Example 1: Link list contains CMPicture content
When the
dataproperty of theCMPicturecontent contains an image, then this image is used to render the thumbnail.
Example 2: Link list contains CMCollection content
When a document inside a link list is a
CMCollectiondocument, use the propertiesitemsandpicturesand check the first item of these link list properties.When this linked item is an instance of
CMTeasable, use thepicturesproperty to look up the content that contains the thumbnail.Finally, when the call stack arrives at an instance of
CMPicture, use thedatablob property to render the thumbnail.
