Build a Great Animated News Slider in under 5 Minutes with this eXo Add-on

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’ll show you how easy it is to add a News Slider in only five simple steps. It’ll take only five minutes of your time. Follow the tutorial below and enjoy!

Tutorial (5 minutes)

Installation in five steps

1. Cloning a project

2. Adding resources

  • Go to the back office of the eXo Platform (using File Explorer).
  • Add a content folder (NewsFolder for example) to store the news items (for example under /shared). You can add news using the Free Layout Webcontent template. Add an image and a summary, which will be displayed as the preview in your News Slider. For testing, we will use NewsFolder.xml, so import it into your file system.
  • Upload the CSS file NewsSlider.css into any location (for example, under /shared/css) and copy its path [1].
  • Upload the JS filesjquery.easing.min.js and jquery.min.js (which are the jQuery libraries) to any location (for example, under /shared/js) and copy the path [2].

3. Update the resource paths

  • Go to the template file NewsSliderCLVTemplate.gtmpl and update the paths of the resources, that is the JS and CSS files (already saved in [1] and [2]). Paste the exact paths into the src parameter:

and

  • If you haven’t copied the paths, then go back to the files in /shared/js and /shared/css, right click on a file, select the final menu entry Copy URL to clipboard and then paste them as above.
  • Ensure that the path is not a private link so that the news can be viewed by guests (if it is private delete /private from the path).

4. Add the Content List Template

  • Adminstration > Content > Content Administration > Template > List > Add Template
  • Copy and paste the content of the GTMPL file with Template Name as newsslider.gtmpl

5. Creating the application

  • Administration > Content > Site Explorer > acme/web contents > Import > NewsFolder.xml (in github newslider/resources)
  • Now we are ready to add our News Slider to a website.
  • Edit this content list portlet. Configure it by selecting the news folder path (in our case /shared/NewsFolder) and select the new CLV template created above: NewsSliderCLVTemplate.
  • It’s possible to configure the slider depending on the amount of news and whether it is broken into pages.

Enjoy! And join the eXo Community for more resources.

Note: This post is an update of an original article about the Animated News Slider Add-on to reflect changes in using eXo Platform 4. You can find this resource and much more, in our Resource Center.

Be part of the discussion, share your comments

comments