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:

flickr-templates/templates/components/flickr-image-simple.yaml
 templateScript: /flickr-templates/templates/components/flickr-image-simple.ftl
renderType: freemarker
visible: true
title: Flickr simple image
dialog: flickr-templates:components/flickr-image-simple
modelClass: info.magnolia.flickr.templates.templates.components.FlickrImageSimpleModel

Node nameValue

 templates


 components


 flickr-image-simple


 dialog

flickr-templates:components/flickr-image-simple

 modelClass

info.magnolia.flickr.templates.templates.components.FlickrImageSimpleModel

 renderType

freemarker

 templateScript

/flickr-templates/templates/components/flickr-image-simple.ftl

 title

Flickr simple image 

 visible

true 

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:

flickr-templates/dialogs/components/flickr-image-simple.yaml
 form:
  tabs:
    - name: mainTab
      label: Texts
      fields:
        - name: flickrPictureId
          class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
          label: Flickr pic
          appName: flickr-browser
          contentPreviewDefinition:
            contentPreviewClass: info.magnolia.flickr.browser.app.field.FlickrItemPreviewComponent
actions: !include /flickr-templates/dialogs/common/common-actions.yaml

Node nameValue

 dialogs


 components


 flickr-image-simple


 actions


 extends

/flickr-templates/dialogs/common/common-actions

 form


 tabs


 tabMain


 fields


 flickrPictureId


 contentPreviewDefinition


 contentPreviewClass

info.magnolia.flickr.browser.app.field.FlickrItemPreviewComponent

 appName

flickr-browser

 class

info.magnolia.ui.form.field.definition.LinkFieldDefinition

 label

Flickr pic

Note:

  • 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.

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

            [#if model.photo.description?has_content]
                <span>(${model.photo.description})</span><br/>
            [/#if]
        </div>
    [/#if]
</div>


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.

info.magnolia.flickr.templates.templates.components.FlickrImageSimpleModel
public class FlickrImageSimpleModel<RD extends RenderableDefinition> extends RenderingModelImpl<RD> {
 
 
    private String flickrPictureId;
 
    private Photo photo;
    private final FlickrService flickrService;
 
    @Inject
    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;
    }
 
}
Note:

  • The type of the bean property photo is com.flickr4java.flickr.photos.Photo (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.

info.magnolia.flickr.browser.app.field.FlickrItemPreviewComponent
public class FlickrItemPreviewComponent extends AbstractContentPreviewComponent<FlickrItem> {
 
    private FlickrBrowserPreviewImageProvider imageProvider;
    private FlickrService flickrService;
 
 
    @Inject
    public FlickrItemPreviewComponent(String workspace, FlickrService flickrService) {
        super(workspace);
        this.imageProvider = new FlickrBrowserPreviewImageProvider(flickrService);
        this.flickrService = flickrService;
 
        VerticalLayout verticalLayout = new VerticalLayout();
        verticalLayout.addComponent(new Label(""));
        setCompositionRoot(verticalLayout);
        rootLayout = verticalLayout;
    }
 
    @Override
    protected Component refreshContentDetail(FlickrItem item) {
        CssLayout layout = new CssLayout();
        displayProperty(item, FlickrItem.PROPERTY_TITLE, layout);
        displayProperty(item, FlickrItem.PROPERTY_DESCRIPTION, layout);
        return layout;
    }
 
    @Override
    protected Component refreshContentPreview(FlickrItem item) {
        String photoId = (String) item.getItemProperty(FlickrItem.PROPERTY_PHOTOID).getValue();
        Resource resource = imageProvider.getSmallThumbnailResource(photoId);
        Image image = new Image();
        image.setSource(resource);
        return image;
    }
 
    @Override
    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: