Contact us
  • en
  • fr
  • Solutions
    • Company IntranetDiscover our company intranet software to connect and engage your employees
    • Collaboration PlatformDiscover our digital collaboration platform that boost your employee engagement and performance
    • Knowledge ManagementHow To build and manage your knowledge base with eXo Platform
    • Employee EngagementDiscover how to boost your employee engagement
  • Product
    • Overview
      • Software TourAn overview of our software capabilities
      • Why eXoHow eXo improves your employee experience
    • Features
      • CommunicationFeatures to facilitate employee communications
      • CollaborationFeatures to create efficient teams
      • KnowledgeKnowledge management capabilities
      • ProductivityEmployee productivity tools to engage employees
    • Technology
      • Open sourceAn overview of our technology
      • IntegrationsDiscover how eXo integrates with your tools and systems
      • SecurityHow eXo Platform ensures your data security
  • Pricing
    • Product pricingLearn about our business model and pricing
    • ServicesLearn about our professional services
    • FAQsQuestions about the software, the community and our offers
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Technical documentation
      • Getting started
      • Developer Guide
      • Technical administration guide
      • REST APIs
    • From The Blog
      • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
      • eXo Platform community edition is back
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Company
    • About us
    • Careers
    • Customers
    • Newsroom
    • Contact us
    • Partners
  • Menu mobile
    • Pricing
    • About us
    • Services
    • FAQs
    • Customers
    • Resource center
    • Contact us
    • Blog
Company Intranet Discover our company intranet software to connect and engage your employees
Collaboration Platform Discover our digital collaboration platform that boost your employee engagement and performance
Knowledge Management How To build and manage your knowledge base with eXo Platform
Employee Engagement Discover how to boost your employee engagement
Overview
  • Software Tour An overview of our software capabilities
  • Why eXo How eXo improves your employee experience
Features
  • Communication Features to facilitate employee communications
  • Collaboration Features to create efficient teams
  • Knowledge Knowledge management capabilities
  • Productivity Employee productivity tools to engage employees
Technology
  • Open source An overview of our technology
  • Integrations Discover how eXo integrates with your tools and systems
  • Security How eXo Platform ensures your data security
Product pricing Learn about our business model and pricing
Services Learn about our professional services
FAQs Questions about the software, the community and our offers
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Technical documentation
  • Getting started
  • Developer Guide
  • Technical administration guide
  • REST APIs
From The Blog
  • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
  • eXo Platform community edition is back
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
About us
Careers
Customers
Newsroom
Contact us
Partners
Pricing
About us
Services
FAQs
Customers
Resource center
Contact us
Blog
  1. Accueil
  2. Uncategorized
  3. eXo Add-ons: Build an Animated News Slider in 5 Minutes

eXo Add-ons: Build an Animated News Slider in 5 Minutes

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)

eXo Addons | News Slider from Esslem GHODBANE on Vimeo.

 

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 template via the IDE

  • Go to the IDE, select the dms-system workspace and navigate to exo:ecm > views > templates > content-list-viewer > list.
  • Add a new template.
  • Copy and paste the content of the GTMPL file NewsSliderCLVTemplate.gtmpl into this template and save it as NewsSliderCLVTemplate.

5. Add the CLV and configure it

  • Now we are ready to add our News Slider to a website.
  • Go to a website, ACME for example, edit the layout and add a new portlet (content > content list) to a page.
  • 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!

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