close

Filter

loading table of contents...

Studio Developer Manual / Version 2301

Table Of Contents

9.25.1 Thumbnail Resolvers

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 data property of the CMPicture content 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 CMCollection document, use the properties items and pictures and check the first item of these link list properties.

  • When this linked item is an instance of CMTeasable, use the pictures property to look up the content that contains the thumbnail.

  • Finally, when the call stack arrives at an instance of CMPicture, use the data blob property to render the thumbnail.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.