{"id":4124,"date":"2013-01-29T08:55:44","date_gmt":"2013-01-29T16:55:44","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=4124"},"modified":"2013-01-29T08:55:44","modified_gmt":"2013-01-29T16:55:44","slug":"exo-add-ons-build-an-animated-news-slider-in-5-minutes","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/exo-add-ons-build-an-animated-news-slider-in-5-minutes\/","title":{"rendered":"eXo Add-ons: Build an Animated News Slider in 5 Minutes"},"content":{"rendered":"<p><em>One of the most important strengths of the eXo Platform is the user experience. The end user can create new content using the content management system. Today, I\u2019ll show you how easy it is to add a News Slider in only five simple steps. It&#8217;ll take only five minutes of your time. Follow the tutorial below and enjoy!<\/em><\/p>\n<p><!--more--><\/p>\n<h2>Tutorial (5 minutes)<\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/78036217?dnt=1&#038;app_id=122963\" width=\"853\" height=\"480\" frameborder=\"0\" title=\"NewsSlider\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/vimeo.com\/78036217\" target=\"_blank\" rel=\"noopener\">eXo Addons | News Slider<\/a> from <a href=\"http:\/\/vimeo.com\/eghodbane\" target=\"_blank\" rel=\"noopener\">Esslem GHODBANE<\/a> on Vimeo.<\/p>\n<p>&nbsp;<\/p>\n<h2>Installation in five steps<\/h2>\n<p>&nbsp;<\/p>\n<h3>1. Cloning a project<\/h3>\n<ul>\n<li>Go to the GitHub repository\u00a0<a title=\"exo-addons\/news-slider\" href=\"http:\/\/github.com\/exo-addons\/news-slider\" target=\"_blank\" rel=\"noopener\">exo-addons\/news-slider<\/a> and clone the project.<\/li>\n<\/ul>\n<h3>2. Adding resources<\/h3>\n<ul>\n<li>Go to the back office of the eXo Platform (using File Explorer).<\/li>\n<li>Add a content folder (<span class=\"navCode\">NewsFolder<\/span> for example) to store the news items (for example under <span class=\"navCode\">\/shared<\/span>). You can add news using the <span class=\"navCode\">Free Layout Webcontent<\/span> template. Add an image and a summary, which will be displayed as the preview in your News Slider. <em>For testing, we will use <span class=\"navCode\">NewsFolder.xml<\/span>, so import it into your file system.<\/em><\/li>\n<li>Upload the CSS file <span class=\"navCode\">NewsSlider.css<\/span> into any location (for example, under <span class=\"navCode\">\/shared\/css<\/span>) and copy its path <span class=\"navCode\">[1]<\/span>.<\/li>\n<li>Upload the JS files<span class=\"navCode\">jquery.easing.min.js<\/span> and <span class=\"navCode\">jquery.min.js<\/span> (which are the jQuery libraries) to any location (for example, under <span class=\"navCode\">\/shared\/js<\/span>) and copy the path <span class=\"navCode\">[2]<\/span>.<\/li>\n<\/ul>\n<h3>3. Update the resource paths<\/h3>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Go to the template file <span class=\"navCode\">NewsSliderCLVTemplate.gtmpl<\/span> and update the paths of the resources, that is the JS and CSS files (already saved in <span class=\"navCode\">[1]<\/span> and <span class=\"navCode\">[2]<\/span>). Paste the exact paths into the <span class=\"navCode\">src<\/span> parameter:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span class=\"navCode\"> link href=&#8221;\/rest\/jcr\/repository\/collaboration\/sites content\/live\/shared\/css\/NewsSlider.css&#8221; media=&#8221;all&#8221; rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221;&gt; <\/span><br \/>\nand<br \/>\n<span class=\"navCode\"> script type=&#8221;text\/javascript&#8221; src=&#8221;\/rest\/jcr\/repository\/collaboration\/sites content\/live\/shared\/js\/jquery.easing.1.3.js&#8221;&gt;<br \/>\n<\/span><\/p>\n<ul>\n<li>If you haven&#8217;t copied the paths, then go back to the files in <span class=\"navCode\">\/shared\/js<\/span> and <span class=\"navCode\">\/shared\/css<\/span>, right click on a file, select the final menu entry <span class=\"navCode\">Copy URL to clipboard<\/span> and then paste them as above.<\/li>\n<li>Ensure that the path is not a private link so that the news can be viewed by guests (if it is private delete <span class=\"navCode\">\/private<\/span> from the path).<\/li>\n<\/ul>\n<h3>4. Add the template via the IDE<\/h3>\n<ul>\n<li>Go to the IDE, select the <span class=\"navCode\">dms-system<\/span> workspace and navigate to <span class=\"navCode\">exo:ecm &gt; views &gt; templates &gt; content-list-viewer &gt; list<\/span>.<\/li>\n<li>Add a new template.<\/li>\n<li>Copy and paste the content of the GTMPL file <span class=\"navCode\">NewsSliderCLVTemplate.gtmpl<\/span> into this template and save it as <span class=\"navCode\">NewsSliderCLVTemplate<\/span>.<\/li>\n<\/ul>\n<h3>5. Add the CLV and configure it<\/h3>\n<ul>\n<li>Now we are ready to add our News Slider to a website.<\/li>\n<li>Go to a website, ACME for example, edit the layout and add a new portlet (<span class=\"navCode\">content &gt; content list<\/span>) to a page.<\/li>\n<li>Edit this content list portlet. Configure it by selecting the news folder path (in our case <span class=\"navCode\">\/shared\/NewsFolder<\/span>) and select the new CLV template created above: <span class=\"navCode\">NewsSliderCLVTemplate<\/span>.<\/li>\n<li>It&#8217;s possible to configure the slider depending on the amount of news and whether it is broken into pages.<\/li>\n<\/ul>\n<p><strong>Enjoy!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"One of the most important strengths of the eXo Platform is the user experience. The end user can create new content using the content management system. Today, I\u2019ll show you how easy it is to add a News Slider in only five simple steps. It&#8217;ll take only five minutes of your time. Follow the tutorial [&hellip;]","protected":false},"author":7,"featured_media":12746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":4124},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/4124"}],"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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=4124"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/4124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=4124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=4124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=4124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}