Try now Demo en
  • en
  • fr
  • de
  • Product
    • Platform
      • Software TourFeatures & capabilities overview
      • Why eXoeXo Platform key differentiators
      • InternationalisationSupporting multilingual environments
      • MobileResponsive & available on any device
    • Technology
      • No CodeTailor eXo platform to your needs
      • ArchitectureAn overview of eXo Platform technology
      • IntegrationsAvailable connectors & integration capabilities
      • SecurityeXo Platform security measures
      • Open sourceComponents & licensing
  • Solutions
    • Communication
      • Modern IntranetBuild your company culture
      • Knowledge managementCentralize and share your company knowledge
      • Community managementEngage your community
      • ExtranetInvolve your clients and partners
    • Collaboration
      • Social NetworkConnect all your employees
      • Collaboration PlatformEmpower your teams
      • Employee PortalCentralize your work environment
      • Employee EngagementEngage & empower your employees
    • For
      • Public Sector
      • Networks
      • Education
      • Enterprises
  • Pricing
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Migration guide
      • Alternative to Microsoft 365
      • Alternative to Sharepoint
      • Alternative to Workplace from Meta
    • From The Blog
      • eXo Platform 6.5 is released: personalized navigation, multi-sites management and more
      • eXo launches its online community platform – eXo Tribe!
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Community
    • CommunityJoin our online community platform
    • DownloadLaunch eXo platform in your infrastructure
    • Source codeSource code on github
    • FAQsAbout the software, the community and our offers
    • REST APIs & DocumentationAll REST APIs available in eXo Platform
  • Company
    • Customers
    • Partners
    • Services
    • About us
    • Contact us
    • Newsroom
  • Menu mobile
    • Pricing
    • About us
    • Careers
    • Resource center
    • Blog
    • Contact us
    • Try eXo
Platform
  • Software Tour Features & capabilities overview
  • Why eXo eXo Platform key differentiators
  • Internationalisation Supporting multilingual environments
  • Mobile Responsive & available on any device
Technology
  • No Code Tailor eXo platform to your needs
  • Architecture An overview of eXo Platform technology
  • Integrations Available connectors & integration capabilities
  • Security eXo Platform security measures
  • Open source Components & licensing
Communication
  • Modern Intranet Build your company culture
  • Knowledge management Centralize and share your company knowledge
  • Community management Engage your community
  • Extranet Involve your clients and partners
Collaboration
  • Social Network Connect all your employees
  • Collaboration Platform Empower your teams
  • Employee Portal Centralize your work environment
  • Employee Engagement Engage & empower your employees
For
  • Public Sector
  • Networks
  • Education
  • Enterprises
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Migration guide
  • Alternative to Microsoft 365
  • Alternative to Sharepoint
  • Alternative to Workplace from Meta
From The Blog
  • eXo Platform 6.5 is released: personalized navigation, multi-sites management and more
  • eXo launches its online community platform – eXo Tribe!
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
Community Join our online community platform
Download Launch eXo platform in your infrastructure
Source code Source code on github
FAQs About the software, the community and our offers
REST APIs & Documentation All REST APIs available in eXo Platform
Customers
Partners
Services
About us
Contact us
Newsroom
Pricing
About us
Careers
Resource center
Blog
Contact us
Try eXo
  1. Accueil
  2. Uncategorized
  3. Build a Great Animated News Slider in under 5 Minutes with this eXo Add-on

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

  • Go to the GitHub repository exo-addons/news-slider and clone the 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:
link href=”/rest/jcr/repository/collaboration/sites content/live/shared/css/NewsSlider.css” media=”all” rel=”stylesheet” type=”text/css”>

and

script type=”text/javascript” src=”/rest/jcr/repository/collaboration/sites content/live/shared/js/jquery.easing.1.3.js”>
  • 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.

 

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz