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: Creating Photo Galleries

eXo Add-ons: Creating Photo Galleries

It was to time to think about a new photo gallery feature which allows to the user to illustrate and use images in an animated diaporama.

eXo platform 3.5 gives us enough flexibility to extend content types and offer simple ways to create and use content templates. That’s why I created the photo gallery template which enables the user to create gallery content, to upload images, to edit the metadata and to display them in an animated format, based on eXo Platform’s Document management system.

In this tutorial, I’ll illustrate the most important features of this content type and show how to install and then use it under eXo Platform 3.5.

Resources

It is possible to get source code from this location: https://github.com/exo-addons/adn-gallery

Installation via UI

The easiest way to perform the installation of the gallery is through the User interface, but it’s not persistent after dropping the database.

The namespace and nodetype configuration

We start by the creation of the namespace of our nodetype. Our nodetype name is gallery which is related to this new namespace adn for Addon, so we need to configure the adn namespace.

To perform that, we need to create first the name adn by registering it with the URL https://www.exoplatform.com/ under the Namespace Registry, but I made it easier by preparing the configuration file, which you can found at this location: https://github.com/exo-addons/adn-gallery/blob/master/adn-gallery-export.xml

You just need to import it into the Namespace Registry.

The Dialog Template Configuration

Now, we are able to create the related interface, for that we need to create the template for both; the dialog form and the view one. Go to the Content Presentation/Manage Templates, and add a new template as illustrated below. Choose the related name adn-gallery, a label and attribute permissions of use.

Then we navigate into the dialog tab, there we can edit the template, copy/past the content from this file https://github.com/exo-addons/adn-gallery/blob/master/adn-gallery-tmpl-dialog.gtmpl

The View Template Configuration

We move to the view template configuration, but before that we need to add some resources related to the JQuery libraries, and thus we will be able to use it in our gallery.

So, navigate to the back-office of the platform using the Site Explorer and upload the JS files into a given location, for our tutorial, we will choose /acme/js.

Right click on one file and ‘Copy URL to Clipboard’ in order to have to exact location. Now, it’s time to have the adn-gallery-tmpl-view.gtmpl and edit it at the 25th and the 26th lines to change the src parameter, as illustrated below:

We go back to the Content Administration Manager in order to edit the nodetype, we need to copy/past the content of this file: https://github.com/exo-addons/adn-gallery/blob/master/adn-gallery-tmpl-view.gtmpl

Now, our nodetype is ready and can be used to create a beautiful photos gallery.

Installation via extension

It’s possible also to perform the installation of the gallery feature using the extension mechanism under eXo Platform 3.5 in order to define and to configure our new nodetype.

The namespace configuration

Our nodetype name is gallery which is related to this new namespace adn for Addon, so we need to configure the adn namespace.

To perform that, we need to add to the system configuration file https://github.com/exo-addons/adn-gallery/blob/master/Ext/system-configuration.xml this source code:

The nodetype configuration

We need also to define our new nodetype ‘adn:gallery’ under the https://github.com/exo-addons/adn-gallery/blob/master/Ext/nodetypes-adn-gallery-configuration.xml file.

The view and the dialog templates

Once defining the nodetype, we need to define the associated view and dialog templates. You may add them also using the extension mechanism.

Let’s assume that you dropped these files into this war ‘my-extension.war’ and then we may perform our configuration.

Add resources files

In order to make an animation, we will add the JQuery library and some Javascript functions, for that we need to add these two files jquery.min.js & jquery.adn-gallery.js into our extension already defined.

After that we have to update the view template adn-gallery-tmpl-view.gtmpl in the two first lines in order to define the location of the Javascript files like this:

Features

Now, it’s Ok for the configuration phase, we can move to the use of our photo gallery.
We can navigate to the back office of eXo Platform 3.5 and then create a new content. Choose the template Images Gallery:

You confirm the input and save the document.

You may upload a set of images. You may also delete or update the related metadata of the image directly after uploading.

Or using the explorer side of the document management system.

It’s possible to edit the metadata of the image like title and description in order to be displayed in the gallery.

And finally, you can get your photo gallery based on JQuery library.

Submit your own eXo Add-ons!

If you are a developer and you have worked on something you would like to share with the eXo community, eXo Add-ons is the best place to host your code. And rest assured: you will remain the owner of your project. We won’t claim any IP or other rights. It’s your stuff, just a bit more visible.

It’s very easy to get your own repository on eXo Add-ons. Just drop us a request and we’ll get you ready.

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