Exercise 3: Gallery Integration With Theme

Warning

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

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

This example essentially re-uses the Barceloneta theme.

It is more important to pay attention to how the integration with the theme works, than worrying about diazo/theming details for this exercise.

You will be working in the exercise3 directory of the collective.jstraining package.

Add Your JavaScript File

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

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

require([
  'jquery',
  '++theme++exercise3/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 us talk about each part of this file in detail...

Require the lightGallery JavaScript

(
...
require([
  'jquery',
  '++theme++exercise3/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 are 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', ''));
  });
...
)

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 are reusing the existing Barceloneta theme with this example though, we will include the JavaScript/CSS into the theme index.html file.

CSS

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

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

JavaScript

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

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

Installation

1. Start up your Plone instance

2. Install the Exercise 3 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.