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: These screenshots were taken on eXo Platform Enterprise Edition 4.0.
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 News Template
In order to create a template for “News” content, we now need to create the Dialog that will allow us to interact with the "News" NodeType from the Content Explorer. We also need to create a default View that will be used to display the "News" content. To do so, please 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:
Now we can go back to Sites Explorer and import the sample set here: https://github.com/exo-addons/resource-center/blob/master/flip-feed/sysview-newsfeed.xml.
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: