How to Create a Flipboard Layout
eXo Platform allows you to easily define new Content Types and define their associated view. This can help you create elaborate designs while benefiting from the powerful Content Management System.
In this tutorial, you will learn how to create a Flipboard-like layout for your page. We've called it FlipFeed.
Note that screenshots were taken on eXo Platform 3.5 but this tutorial is also compatible with eXo Platform 3.0. After downloading eXo Platform, follow the README.txt file to install it and get started.
Add the "News" Content Type
We'll start by creating a new Content Type for News items. To create this Content Type, follow these steps:
This Content Type definition is very basic. It simply contains an image that will be used in the FlipFeed effect.
Add the Dialog Template
We now need to create the Dialog that will allow us to interact with the "News" nodetype from the Content Explorer.
To add this Dialog, follow these steps:
Add a Default View
Finally, we need to add the default View that will be used to display the "News" content.
To define this View, follow these steps:
Create a "News"
To make sure everything is okay, we'll add a new "News" item:
Import a "News" Sample Set
You can import a sample set to test the template with a larger number of "News" items. The button to import nodes is not visible by default, so we'll first need to add that to the admin view:
Install the FlipFeed Template
The view for each individual "News" item has been defined but we now want to define how these items will be displayed when used by a Content List Viewer portlet. For that, we'll have to add a new Content List Viewer template:
Create the FlipFeed Page
We'll now create a new page to display our "News" with the FlipFeed effect:
You should finally see something like this: