An animated news slider
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
resources
NewsSliderCLVTemplate.gtmpl
README.md

README.md

News Slider

Description

Get an animated news slider in 5 steps!

How to install

  1. Cloning the project:
  1. Adding resources:
  • Go to the back-office of eXo Platform (using the File Explorer).
  • Add a content folder (NewsFolder for example) in which you'll store the news items (for example under /shared), you may create news using the 'Free Layout Webcontent' template, try to add an illustration image and fileout a summary, in order to be displayed as a preview of the news in our news silder.
    PS: For tests, you can import the artificat NewsFolder.xml into your File System.
  • Upload the CSS file NewsSlider.css to any location you want (for example: under /shared/css) and copy its path[1].
  • Upload the JS file jquery.easing.min.js (which is the JQuery librairy) to any location you want (for example: under /shared/js) and copy its path[2].
  1. Update the resources paths:
  • Go to the template file NewsSliderCLVTemplate.gtmpl and update the exacte location of the resources, for both JS and CSS files (already saved in [1] and [2], if not go back to this files /shared/js and /shared/css, right click on the file, select the last menu entry 'Copy URL to clipboard' and past it the src parameter like below:

        <link rel="stylesheet" type="text/css" href="/rest/jcr/repository/collaboration/sites content/live/shared/css/NewsSlider.css" media="all"/>
        <script type="text/javascript" src="/rest/jcr/repository/collaboration/sites content/live/shared/js/jquery.easing.1.3.js"></script>
    
  • Ensure that the path is not a private link in order to make the news viewable for guests (for that, delete /private from the path).

  1. Add the template via IDE:
  • Go to the IDE, select the dms-system workspace, navigate to exo:ecm > views > templates > content-list-viewer > list .
  • Add a new template.
  • Copy/Past the content of the GTMPL file NewsSliderCLVTemplate.gtmpl into this template and save it as NewsSliderCLVTemplate.
  1. Add the CLV and configure it:
  • Now, we are ready to add our news slider into a website.
  • Go to a given website, ACME for example, edit the layout, add a new portlet (content > content list) to a given page.
  • Edit this content list portlet, configure it by selecting the news folder path (in our case, '/shared/NewsFolder', and selecting our new CLV template NewsSliderCLVTemplate
  • It's possible also to configure the slider on terms of amount of news, existence of pagination or not.

Enjoy!