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¶
- Start up your Plone instance
- Install the
Exercise 5
add-on
Trying it out¶
- Create a folder and add some images to it in your Plone site.
- Specify
Album view
for your folder. - 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.