{"id":3996,"date":"2013-01-15T08:55:41","date_gmt":"2013-01-15T16:55:41","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=3996"},"modified":"2023-06-05T16:25:04","modified_gmt":"2023-06-05T14:25:04","slug":"exo-add-ons-creating-photo-galleries","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/exo-add-ons-creating-photo-galleries\/","title":{"rendered":"eXo Add-ons: Creating Photo Galleries"},"content":{"rendered":"

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.<\/p>\n

eXo platform 3.5 gives us enough flexibility to extend content types and offer simple ways to create and use content templates. That\u2019s 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\u2019s Document management system.<\/p>\n

In this tutorial, I\u2019ll illustrate the most important features of this content type and show how to install and then use it under eXo Platform 3.5.<\/p>\n

<\/p>\n

Resources<\/h2>\n

It is possible to get source code from this location: https:\/\/github.com\/exo-addons\/adn-gallery<\/a><\/p>\n

Installation via UI<\/h2>\n

The easiest way to perform the installation of the gallery is through the User interface, but it\u2019s not persistent after dropping the database.<\/p>\n

\"\"<\/a><\/p>\n

The namespace and nodetype configuration<\/h4>\n

We start by the creation of the namespace of our nodetype. Our nodetype name is gallery<\/strong> which is related to this new namespace adn<\/strong> for Addon<\/strong>, so we need to configure the adn<\/strong> namespace.<\/p>\n

To perform that, we need to create first the name adn<\/strong> by registering it with the URL https:\/\/www.exoplatform.com\/<\/a> 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<\/a><\/p>\n

You just need to import it into the Namespace Registry.<\/p>\n

\"\"<\/a><\/p>\n

The Dialog Template Configuration<\/h4>\n

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<\/strong>, a label and attribute permissions of use.<\/p>\n

\"\"<\/a><\/p>\n

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<\/a><\/p>\n

\"\"<\/a><\/p>\n

The View Template Configuration<\/h4>\n

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.<\/p>\n

\"\"<\/a><\/p>\n

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.<\/p>\n

Right click on one file and \u2018Copy URL to Clipboard\u2019 in order to have to exact location. Now, it\u2019s time to have the adn-gallery-tmpl-view.gtmpl<\/strong> and edit it at the 25th and the 26th lines to change the src parameter, as illustrated below:<\/p>\n

\"\"<\/a><\/p>\n

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<\/a><\/p>\n

\"\"<\/a><\/p>\n

Now, our nodetype is ready and can be used to create a beautiful photos gallery.<\/p>\n

Installation via extension<\/h2>\n

It\u2019s 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.<\/p>\n

The namespace configuration<\/h4>\n

Our nodetype name is gallery<\/strong> which is related to this new namespace adn<\/strong> for Addon<\/strong>, so we need to configure the adn<\/strong> namespace.<\/p>\n

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<\/a> this source code:<\/p>\n

\"\"<\/a><\/p>\n

The nodetype configuration<\/h4>\n

We need also to define our new nodetype \u2018adn:gallery\u2019<\/em> under the https:\/\/github.com\/exo-addons\/adn-gallery\/blob\/master\/Ext\/nodetypes-adn-gallery-configuration.xml<\/a> file.<\/p>\n

\"\"<\/a><\/p>\n

The view and the dialog templates<\/h4>\n

Once defining the nodetype, we need to define the associated view and dialog templates. You may add them also using the extension mechanism.<\/p>\n

Let\u2019s assume that you dropped these files into this war \u2018my-extension.war\u2019 and then we may perform our configuration.<\/p>\n

Add resources files<\/h4>\n

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<\/strong> & jquery.adn-gallery.js<\/strong> into our extension already defined.<\/p>\n

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

\"\"<\/a><\/p>\n

Features<\/h2>\n

Now, it\u2019s Ok for the configuration phase, we can move to the use of our photo gallery.
\nWe can navigate to the back office of eXo Platform 3.5 and then create a new content. Choose the template Images Gallery<\/strong>:<\/p>\n

\"\"<\/a><\/p>\n

You confirm the input and save the document.<\/p>\n

\"\"<\/a><\/p>\n

You may upload a set of images. You may also delete or update the related metadata of the image directly after uploading.<\/p>\n

\"\"<\/a><\/p>\n

Or using the explorer side of the document management system.<\/p>\n

\"\"<\/a><\/p>\n

It\u2019s possible to edit the metadata of the image like title and description in order to be displayed in the gallery.<\/p>\n

\"\"<\/a><\/p>\n

And finally, you can get your photo gallery based on JQuery library.<\/p>\n

\"\"<\/a><\/p>\n

Submit your own eXo Add-ons!<\/h3>\n

If you are a developer and you have worked on something you would like to share with the eXo community, eXo Add-ons<\/a> 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.<\/p>\n

It’s very easy to get your own repository<\/a> on eXo Add-ons. Just drop us a request<\/a> and we’ll get you ready.<\/p>\n","protected":false},"excerpt":{"rendered":"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\u2019s why I created the photo gallery template […]","protected":false},"author":7,"featured_media":12746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":3996},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/3996"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=3996"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/3996\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=3996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=3996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=3996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}