Testing out the new image gallery for the site.


Good things just keep happening to the site. I’m pretty pleased with the progress. Moreover, as I learn more about pelican and jinja2 and jquery, I feel like the speed at which I can make changes and the types of changes that I can make are both evolving.

Take this page as an example. I’m testing out a new image gallery plugin that is written in javascript and using jquery. It is licensed under the MIT license and with a bit of neat javascript I think I have it working without needing to change how I post pictures very much.

The plugin is Magnific Popup and so far I’m really liking it. To set it up I used the build tool at the Magnific Popup homepage to download the javascript plugin. Then I linked in the latest jquery library and the CSS library.

Then to the base pelican template I added the following javascript code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
    // wrap all image tags with a link
    $('img').each(function() {
        $(this).wrap($('<a class="img" href="' + $(this).attr('src') +
                       '" title="' + $(this).attr('alt') + '"></a>'));
    });
    // Enable Magnific Popup on a gallery of images inside a container
    $('.gallery').each(function() {
        $(this).find('a').magnificPopup({
            type: 'image',
            gallery: {
                enabled:true
            }
        });
    });
    // Enable Magnific Popup on naked images
    $('a.img').each(function() {
        if ($(this).parent('.gallery').length == 0) {
            $(this).magnificPopup({
                type: 'image',
            });
        };
    });
});

Now keep in mind that, so far this is only a super basic setup. I plan on configuring it more to my liking later. However, this was the bare minimum to get things firing on all cylinders.

To explain what’s going on in the code, the first bit finds all the images on the webpage and puts them inside a link to the same image. This makes them clickable with an event that the Magnific Popup plugin can catch and do fun things with. The next bit finds all containers with the class "gallery" and then turns any images within the container into a grouped gallery. This allows you to switch between images in the popped up mode. The last part finds all other images that are not in a gallery container and enables the Magnific Popup as a stand-alone, single image gallery.

So all I need to do is add pictures to a page and the popup thingy should now just work. To make a grouped gallery I just need to wrap the images in a <div class="gallery"></div> container. Which of course can be done in pelican using the .. raw:: html directive.

But enough technobabble! Time for the show!


Now a single stand alone image. It shouldn’t be part of the other gallery.

A look into the past appearance of this site.

Well there you go. Hopefully this turned out to be a working gallery and not just a lame flat page of pictures.

" "