{"id":6493,"date":"2014-02-20T05:55:01","date_gmt":"2014-02-20T13:55:01","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=6493"},"modified":"2023-06-05T16:47:45","modified_gmt":"2023-06-05T14:47:45","slug":"create-flipboard-layout-exo-platform-4","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/create-flipboard-layout-exo-platform-4\/","title":{"rendered":"Create a Flipboard Layout for eXo Platform 4"},"content":{"rendered":"<p>With eXo Platform, you can easily define new Content Types and their associated view. These can be used to create elaborate designs while benefiting from the powerful content management system.<\/p>\n<p>In this tutorial, you will learn how to create a Flipboard-like layout for a page. We&#8217;ve called it FlipFeed.<\/p>\n<p><!--more--><\/p>\n<p><i>Note: These screenshots were taken on eXo Platform Enterprise Edition 4.0.<\/i><\/p>\n<h2>Add the News Content Type<\/h2>\n<p>We&#8217;ll start by creating a new Content Type for news items. To create this Content Type, follow these steps:<\/p>\n<ul>\n<li>Log in as the Content Administrator user<\/li>\n<li>Go to the Content Administration page<\/li>\n<li>Select Repository, then Node Types<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6514\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1.png\" alt=\"xflipfeed-1\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1.png 1051w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-300x194.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-1024x663.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-768x497.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-720x466.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-500x324.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-360x233.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-200x129.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-100x65.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-1-46x30.png 46w\" sizes=\"(max-width: 1051px) 100vw, 1051px\" \/><\/a><\/p>\n<ul>\n<li>Now you can add a new Node Type defined by yourself or import a predefined Node Type. Please use this predefined Node Type as an example: <a href=\"https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/news-nodetype.xml\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/news-nodetype.xml<\/a>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6513\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2.png\" alt=\"xflipfeed-2\" width=\"501\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2.png 501w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2-300x91.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2-360x109.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2-200x61.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2-100x30.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-2-70x21.png 70w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-3.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6512\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-3.png\" alt=\"xflipfeed-3\" width=\"506\" \/><\/a><\/p>\n<p>This Content Type definition is very basic. It simply contains an image that will be used in the FlipFeed effect.<\/p>\n<h2>Add the News Template<\/h2>\n<p>To create a template for the news content, we now need to create a dialog that will allow us to interact with the news Node Type 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:<\/p>\n<ul>\n<li>In the Content Administration, select Templates then Add Template<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6511\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4.png\" alt=\"xflipfeed-4\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4.png 1025w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-300x190.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-768x486.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-720x455.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-500x316.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-360x228.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-200x126.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-100x63.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-4-47x30.png 47w\" sizes=\"(max-width: 1025px) 100vw, 1025px\" \/><\/a><\/p>\n<ul>\n<li>Fill in the fields as required (label, permissions, etc.). Select \u201cexo:news\u201d for the name<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6510\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5.png\" alt=\"xflipfeed-5\" width=\"500\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5.png 601w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5-300x165.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5-500x275.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5-360x198.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5-200x110.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5-100x55.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-5-55x30.png 55w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/a><\/p>\n<ul>\n<li>Select the Dialog tab and replace the auto-generated dialog template with this one: <a href=\"https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/dialog1.gtmpl\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/dialog1.gtmpl<\/a>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6509\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6.png\" alt=\"xflipfeed-6\" width=\"500\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6.png 601w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6-300x170.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6-500x284.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6-360x204.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6-200x113.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6-100x57.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-6-53x30.png 53w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/a><\/p>\n<ul>\n<li>Switch to the View tab and replace the view template with this one: <a href=\"https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/view1.gtmpl\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/view1.gtmpl<\/a>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-7.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6508\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-7.png\" alt=\"xflipfeed-7\" width=\"500\" \/><\/a><\/p>\n<ul>\n<li>Save your template<\/li>\n<li>Finally, let&#8217;s test it!<\/li>\n<\/ul>\n<h2>Create a News Item<\/h2>\n<p>To make sure everything is okay, we&#8217;ll add a new news item:<\/p>\n<ul>\n<li>Go to the Sites Explorer, select New Content<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6507\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8.png\" alt=\"xflipfeed-8\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8.png 1038w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-300x176.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-1024x602.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-768x451.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-720x423.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-500x294.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-360x212.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-200x118.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-100x59.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-8-51x30.png 51w\" sizes=\"(max-width: 1038px) 100vw, 1038px\" \/><\/a><\/p>\n<ul>\n<li>Select News as the Content Type<\/li>\n<li>Fill in the field as required then Save<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6506\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9.png\" alt=\"xflipfeed-9\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9.png 706w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-300x288.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-35x35.png 35w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-493x473.png 493w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-342x328.png 342w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-246x236.png 246w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-137x131.png 137w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-94x90.png 94w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-9-31x30.png 31w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/a><\/p>\n<ul>\n<li>You should see something like this:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6505\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10.png\" alt=\"xflipfeed-10\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10.png 705w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10-300x177.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10-500x295.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10-360x212.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10-200x118.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10-100x59.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-10-51x30.png 51w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/a><\/p>\n<h2>Import a News Sample Set<\/h2>\n<p>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&#8217;ll first need to add that to the admin view:<\/p>\n<ul>\n<li>Go to the Content Administration app<\/li>\n<li>Select Explorer then Views<\/li>\n<li>Click on the Edit button of the Admin view<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6504\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11.png\" alt=\"xflipfeed-11\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11.png 1050w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-300x147.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-1024x503.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-768x377.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-720x354.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-500x246.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-360x177.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-200x98.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-100x49.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-11-61x30.png 61w\" sizes=\"(max-width: 1050px) 100vw, 1050px\" \/><\/a><\/p>\n<ul>\n<li>Switch to the Action tab and click on the Edit button of the Admin tab<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6503\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12.png\" alt=\"xflipfeed-12\" width=\"500\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12.png 600w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12-300x192.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12-500x319.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12-360x230.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12-200x128.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12-100x64.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-12-47x30.png 47w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<ul>\n<li>Select Import Node then Save<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6502\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13.png\" alt=\"xflipfeed-13\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13.png 763w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-300x176.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-720x422.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-500x293.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-360x211.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-200x117.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-100x59.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-13-51x30.png 51w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/a><\/p>\n<p>Now we can go back to the Sites Explorer and import this sample set: <a href=\"https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/sysview-newsfeed.xml\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/sysview-newsfeed.xml<\/a>.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6501\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14.png\" alt=\"xflipfeed-14\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14.png 1039w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-300x181.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-1024x617.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-768x463.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-720x434.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-500x301.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-360x217.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-200x121.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-100x60.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-14-50x30.png 50w\" sizes=\"(max-width: 1039px) 100vw, 1039px\" \/><\/a><\/p>\n<ul>\n<li>Select Collaboration Drive<\/li>\n<li>Switch to the Admin view<\/li>\n<li>Click Import<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6500\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15.png\" alt=\"xflipfeed-15\" width=\"500\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15.png 612w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15-300x122.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15-500x203.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15-360x146.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15-200x81.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15-100x41.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-15-70x28.png 70w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/a><\/p>\n<h2>Install the FlipFeed Template<\/h2>\n<p>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&#8217;ll have to add a new Content List Viewer template:<\/p>\n<ul>\n<li>Open the IDE app (Administration -&gt; IDE)<\/li>\n<li>Select menu Windows -&gt; Select Workspace\u2026, then &#8220;dms-system&#8221; workspace<\/li>\n<li>In the left tree, open: dms-system &gt; exo:ecm &gt; views &gt; templates &gt; content-list-viewer &gt; list<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6499\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16.png\" alt=\"xflipfeed-16\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16.png 1049w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-300x171.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-1024x585.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-768x439.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-720x411.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-500x286.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-360x206.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-200x114.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-100x57.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-16-53x30.png 53w\" sizes=\"(max-width: 1049px) 100vw, 1049px\" \/><\/a><\/p>\n<ul>\n<li>Create a new template (menu &gt; File &gt; Open Local File\u2026)<\/li>\n<li>Copy this template and save: <a href=\"https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/FlipFeed.gtmpl\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/exo-addons\/resource-center\/blob\/master\/flip-feed\/FlipFeed.gtmpl<\/a><\/li>\n<\/ul>\n<h2>Create the FlipFeed Page<\/h2>\n<p>We&#8217;ll now create a new page to display our news with the FlipFeed effect:<\/p>\n<ul>\n<li>Go to the Acme website and create a new page (Edit -&gt; Page -&gt; Add Page)<\/li>\n<li>Choose a name and title, then go to the layout<\/li>\n<li>Add a Content List app and click on the Edit button to set the preferences<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6498\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17.png\" alt=\"xflipfeed-17\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17.png 1299w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-300x146.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-1024x498.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-768x374.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-1250x608.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-720x350.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-500x243.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-360x175.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-200x97.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-100x49.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-17-62x30.png 62w\" sizes=\"(max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<ul>\n<li>Point the Folder Path to our sample set location (news)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6497\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18.png\" alt=\"xflipfeed-18\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18.png 819w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-300x148.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-768x379.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-720x355.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-500x247.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-360x178.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-200x99.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-100x49.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-18-61x30.png 61w\" sizes=\"(max-width: 819px) 100vw, 819px\" \/><\/a><\/p>\n<ul>\n<li>Switch to the Display Settings tab, set Template to FlipFeed.gtmpl and change the other settings as required<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-6496\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19.png\" alt=\"xflipfeed-19\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19.png 818w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-300x165.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-768x422.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-720x396.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-500x275.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-360x198.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-200x110.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-100x55.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-19-55x30.png 55w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/a><\/p>\n<h2>Final Result<\/h2>\n<p>You should finally see something like this:<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6495\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20.png\" alt=\"xflipfeed-20\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20.png 1289w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-300x149.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-1024x510.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-768x383.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-1250x623.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-720x359.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-500x249.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-360x179.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-200x100.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-100x50.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/01\/xflipfeed-20-60x30.png 60w\" sizes=\"(max-width: 1289px) 100vw, 1289px\" \/><\/a><\/p>\n<p>You can find more tutorials in the <a href=\"https:\/\/www.exoplatform.com\/resource-center\/\">eXo Resource Center<\/a> and by <a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\">joining the eXo Community<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"With eXo Platform, you can easily define new Content Types and their associated view. These can be used to 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 a page. We&#8217;ve called it FlipFeed.","protected":false},"author":94,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":6493},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/6493"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=6493"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/6493\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=6493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=6493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=6493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}