Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.
In this section you learn to create a custom content app:
The example photo app uses the Flickr Web service as a remote data source. If you are interested in non-JCR data sources in general see Content app with non-JCR content.
Digital agencies use thousands of images to build attractive Web content. Large image libraries are typically not stored locally in the JCR but in purpose-built digital asset servers and repositories either on the company's premises or at remote host.
In these tutorials we:
The custom app avoids the cumbersome process of downloading each image separately from the host and adding it to Magnolia's DAM before it is available for use.
In this tutorial we don't go into details of creating a template to embed an image on the site. However, we provide an example component template that uses the Flickr browser app in a choose dialog.
Flickr is a popular photo sharing site that hosts billions of images. It also provides an API to fetch data, has high availability, and creates many different sizes of an image. In this example we use Flickr as a media store.
To upload and host photos on Flickr you need an account. Every photo has a unique ID. The ID is not only unique within an account but within Flickr as a whole.
Flickr allows you to organize photos into albums. One photo can belong to one or more albums. Each album also has a unique ID.
To use use the Flickr API you have to apply for an API key. You will get a key and a secret. To fetch data from the API, use your account ID, API key and API secret.
The example module contains an account that has access to a few albums and photos. Please do not abuse the account, otherwise we have to remove it.
If you need to access many Flickr accounts and choose photos from them, create another app to manage Flickr account data. This could be done in a simple JCR content app.
We only store a reference to a Flickr photo in the JCR content of a page instead of storing the UUID of a Magnolia Asset. We let the rendered page fetch the picture from Flickr. Such a solution may save a lot of bandwidth for your infrastructure but it also means that the images are always served from the remote host.
Flickr4Java is a Java API which wraps the REST-based Flickr API. We use it in the example to make accessing Flickr from Java code easier.
To understand the tutorials and the Flickr example, install the
flickr-integration project into your development environment.
The project has a parent pom which contains 6 submodules.
flickr-integration-parent: Takes care for dependency management.
flickr-accounts: JCR based content app to manage Flickr accounts. Data* is read by
flickr-integration: Provides classes to fetch data via Flickr API.
flickr-simple-browser: A simple content app to browse Flickr photos.
flickr-browser: Extended content app to browse Flickr photos and albums.
flickr-templates: Minimal set of templates to add Flickr photos to Magnolia pages, storing references to Flickr photos or albums.
flickr-integration-bundle: Bundles all the other submodules including their dependencies to third party libraries
*) The accounts submodule contains access data for a demo Flickr account to play around. Please do not abuse - neither account data nor the account itself.
Use the highest major version of 1.0.x series of this module which currently is 1.0.7.
<dependency> <groupId>info.magnolia.documentation</groupId> <artifactId>flickr-accounts</artifactId> <version>1.0.7</version> </dependency>
<dependency> <groupId>info.magnolia.documentation</groupId> <artifactId>flickr-integration</artifactId> <version>1.0.7</version> </dependency>
<dependency> <groupId>info.magnolia.documentation</groupId> <artifactId>flickr-simple-browser</artifactId> <version>1.0.7</version> </dependency>
<dependency> <groupId>info.magnolia.documentation</groupId> <artifactId>flickr-browser</artifactId> <version>1.0.7</version> </dependency>
<dependency> <groupId>info.magnolia.documentation</groupId> <artifactId>flickr-templates</artifactId> <version>1.0.7</version> </dependency>
The project code is stored on Magnolia's Git repository.
Open a shell, change to a directory where you want to clone the project, and type the following:
git clone http://git.magnolia-cms.com/git/documentation/flickr-integration.git
After cloning the repo - check out the tagged version of the highest major version of 1.0.x series of this module which currently is 1.0.7.
To install the flickr modules on an existing installation, download the JAR files and add them to the folder WEB-INF/lib of your webapps. See Installing a module for help.
If you are dropping JAR files to your bundle, make sure to also add the 3rd party JAR files
org.scribe:scribe:1.3.5. (You can find these files within the flickr-integration-bundle.zip or on public Maven repositories).