Exercise 5: Gallery integration with theme

Advertencia

This exercise requires a working buildout using a fork of the collective.jstraining package.

In this exercise, we’ll be walking through how to include custom JavaScript into your theme.

This example essentially re-uses the Barceloneta theme. It’s more important to pay attention to how the integration with the theme works, than worrying about diazo/theming details for this exercise.

We will be working in the exercise5 directory of the collective.jstraining package.

Add your JavaScript file

The lightGallery distribution files are already included in the collective.jstraining package you’re working with.

In your exercise5/theme directory, add a file named integration.js. We’ll use this file to integrate with Plone’s album view:

require([
  'jquery',
  '++theme++exercise5/lightgallery/js/lightgallery.min'
], function($){
  $(document).ready(function() {
    var $photos = $('.photoAlbumEntry a');
    if($photos.size() > 0){
      // we're on an album view page
      // we need to adjust links so the work nicely with light gallery
      $photos.each(function(){
        var $a = $(this);
        $a.attr('href', $a.attr('href').replace('/view', ''));
      });
      $("#content-core").lightGallery({
        selector: '.photoAlbumEntry a'
      });
    }
  });
});

Let’s talk about each part of this file in detail...

Require the lightGallery JavaScript:

...
require([
  'jquery',
  '++theme++exercise5/lightgallery/js/lightgallery.min'
], function($){
...

This tells RequirejS to load the jQuery and the lightGallery JavaScript.

What is important to pay attention to in this example is that we’re seeing if there are any photoAlbumEntry elements on the page.

If there are any, we modify the DOM structure slightly to work seemlessly with lightGallery:

...
var $photos = $('.photoAlbumEntry a');
if($photos.size() > 0){
  // we're on an album view page
  // we need to adjust links so the work nicely with light gallery
  $photos.each(function(){
    var $a = $(this);
    $a.attr('href', $a.attr('href').replace('/view', ''));
  });
...

Finally, we call the lightGallery initialization with our configuration:

...
$("#content-core").lightGallery({
  selector: '.photoAlbumEntry a'
});
...

Including JavaScript/CSS into your theme

For JavaScript and CSS, you can include resources with convenience theme configuration settings of development-css, production-css, development-js and production-js.

Since we’re reusing the existing Barceloneta theme with this example though, we’ll simple include the JavaScript/CSS into the theme index.html file.

CSS

At the bottom of the head section in the index.html file, add:

<link rel="stylesheet" type="text/css"
        href="../++theme++exercise5/lightgallery/css/lightgallery.min.css" />

JavaScript

At the bottom of the index.html file, before the </body> closing tag, add:

<script src="../++theme++exercise5/integration.js"></script>

Installation

1. Start up your Plone instance
2. Install the Exercise 5 add-on

Trying it out

1. Create a folder and add some images to it in your Plone site.
2. Specify Album view for your folder.
3. Now when you click on an image, it should show the gallery viewer.

Production

In this example, there is no difference with development vs production.

You can combine this example with other examples of building JavaScript projects to build, compile and minify your resources.