Page tree
Skip to end of metadata
Go to start of metadata

On this page we show how to use the Flickr browser app within a component template to add a Flickr image to a page.

The content focuses on the flickr-image-simple component and assumes that you already know how to create templates. 

The component dialog uses a Link field which opens a choose dialog. The choose dialog exposes the Flickr browser in which you can select the image.

The flickr-templates module provides a page template named flickr-example-page, which contains an area that makes the flickr-image-simple component available.

flickr-image-simple component template

Template definition

template definition gives the component a name and makes it available to the system.

Component template definition:

 templateScript: /flickr-templates/templates/components/flickr-image-simple.ftl
renderType: freemarker
visible: true
title: Flickr simple image
dialog: flickr-templates:components/flickr-image-simple

Node nameValue












Flickr simple image 



Dialog definition

Dialog definition defines the edible content properties of a template.

All we want to store is a reference to Flickr picture. We use one Link field which allows you to choose the picture from the Flickr browser content app. 

Component dialog definition:

    - name: mainTab
      label: Texts
        - name: flickrPictureId
          class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
          label: Flickr pic
          appName: flickr-browser
actions: !include /flickr-templates/dialogs/common/common-actions.yaml

Node nameValue



















Flickr pic


  • Line 7: The field uses the LinkFieldDefinition for the class
  • Line 9: It references flickr-browser in the appName.
  • Line 10, 11: It uses a custom contentPreviewDefinition. We will have a look at the contentPreviewClass  FlickrItemPreviewComponent  later.

The dialog will store the the Flickr picture id in the JCR property flickrPictureId. Once you have created a page and added a flickr-image-simple component, use the JCR Browser app to see the saved value.

Template script

Here is the relevant freemarker script which renders the image.

 <div style="margin-bottom: 20px; padding: 20px;">
    [#if model?has_content &&]
        <div style="font-family: 'Courier New'; font-size: 12px;">
            <div style="margin-bottom: 3px;">
                <img src="${}">
                <span> &lt;&lt; ${} &gt;&gt;</span><br/>


Note: The template uses a Model class.

Model class

A Model class is a JavaBean to add business logic or to to retrieve data from any source. 

We use the model to load another Java bean which represents the Flickr picture. The model exposes this "photo bean" as a bean property.
public class FlickrImageSimpleModel<RD extends RenderableDefinition> extends RenderingModelImpl<RD> {
    private String flickrPictureId;
    private Photo photo;
    private final FlickrService flickrService;
    public FlickrImageSimpleModel(Node content, RD definition, RenderingModel<?> parent, FlickrService flickrService) {
        super(content, definition, parent);
        this.flickrPictureId = PropertyUtil.getString(content, "flickrPictureId");
        this.flickrService = flickrService;
        if (StringUtils.isNotBlank(flickrPictureId)) {
            photo = flickrService.getPhoto(flickrPictureId);
    public String getFlickrPictureId() {
        return flickrPictureId;
    public Photo getPhoto() {
        return photo;

  • The type of the bean property photo is (which is provided by the 3rd party library Flickr4java).
  • Line 56: The model injects FlickrService.
  • Line 61: Photo can be retrieved with FlickrService and the flickrPictureId which is stored on the content of the component.

Custom content preview component

A content preview component renders a preview of the selected photo in the choose dialog. 

The preview component typically displays an image thumbnail and some metadata. 

Here we create a FlickrItemPreviewComponent which displays a thumbnail and photo title.
public class FlickrItemPreviewComponent extends AbstractContentPreviewComponent<FlickrItem> {
    private FlickrBrowserPreviewImageProvider imageProvider;
    private FlickrService flickrService;
    public FlickrItemPreviewComponent(String workspace, FlickrService flickrService) {
        this.imageProvider = new FlickrBrowserPreviewImageProvider(flickrService);
        this.flickrService = flickrService;
        VerticalLayout verticalLayout = new VerticalLayout();
        verticalLayout.addComponent(new Label(""));
        rootLayout = verticalLayout;
    protected Component refreshContentDetail(FlickrItem item) {
        CssLayout layout = new CssLayout();
        displayProperty(item, FlickrItem.PROPERTY_TITLE, layout);
        displayProperty(item, FlickrItem.PROPERTY_DESCRIPTION, layout);
        return layout;
    protected Component refreshContentPreview(FlickrItem item) {
        String photoId = (String) item.getItemProperty(FlickrItem.PROPERTY_PHOTOID).getValue();
        Resource resource = imageProvider.getSmallThumbnailResource(photoId);
        Image image = new Image();
        return image;
    protected FlickrItem refreshItem(String itemPath) {
        if (StringUtils.isNotBlank(itemPath)) {
            Photo photo = flickrService.getPhoto(itemPath);
            if (photo != null) {
                FlickrItem flickrItem = FlickrItemUtil.createItemByPhoto(photo);
                if (flickrItem != null) {
                    return flickrItem;
        return null;
    private void displayProperty(FlickrItem item, String itemPropertyId, CssLayout layout) {
        String valueTxt = (String) item.getItemProperty(itemPropertyId).getValue();
        if (StringUtils.isNotBlank(valueTxt)) {
            layout.addComponent(new Label(valueTxt));
To build the custom preview component extend AbstractContentPreviewComponent: