Adding Justified Gallery to your Blogger Template

I've just come back from BMXPO 2015 and have taken about 70 pictures of some amazing BMX bikes and now it's time to get them up onto my blog. I've been looking into how I could add a image thumbnail gallery to a blogger post and I didn't come up with anything relevant and up-to-date, so I'm writing my own.

I've chosen Justified Gallery created by Miro Mannino. It's a clean, simple, open source jQuery plugin that creates an image gallery and incorporates Colorbox lightbox. I'm also using cdnjs as my JavaScript and CSS CDN provider, primarily because they had the latest version of Justified Gallery, jQuery and Colorbox libraries.

Update your Blogger Template to include the CSS and JavaScript libraries. Login to your Blogger Dashboard, then go to Template > Edit HTML. Place the cursor into the editor and use the keyboard shortcut for Find... and search for </head>. All JavaScript and CSS libraries will be placed above the head close tag.

Add the following CSS and JavaScript libraries:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
<link href='//cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.0/css/justifiedGallery.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.0/js/jquery.justifiedGallery.min.js'/>

Optionally, add the following CSS and JavaScript libraries if you want to use Colorbox lightbox instead of the default blogger lightbox. The 'cbconf' provides an easy reference to hold the Colorbox configuration so that it does not have to be written each time we create a gallery.

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min.js'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css' rel='stylesheet'/>
<script type='text/javascript'>
   cbconf = {
      maxWidth : '80%',
      maxHeight : '80%',
      opacity : 0.8,
      transition : 'elastic',
      current : '';
   };
</script>

To insert a Justified Gallery into a blog post or blog page, switch to the HTML view and add in the following HTML snippet:

<div id="picGallery">
    <!-- insert images here -->

</div>
<script>
    $('#picGallery').justifiedGallery({
        lastRow: 'justify',
        captions: false,
        rel: 'uniqueName'
    });
</script>

Update the div and jQuery ID's to be unique name for the post. This is to prevent multiple firing of the same Justified Gallery scripts on the blog roll.

The JS configuration within the Justified Gallery script tag specifies:

• lastRow: 'justify' ensure that the last row images are enlarged to fit the entire row;
• captions: false disables displaying of captions; and
• rel: 'uniqueName' provides Justified Gallery with a relationship name to group the images within the same lightbox. Update uniqueName to the same value that was set for picGallery.

Additional Justified Gallery options can be added depending on the requirements.

The next step is to add your images. Stay in the HTML view, place the cursor below the comment and click on the "Insert Image" icon; upload and/or select the images to be added to the blog post; click the Add button and select Image Alignment: None and Image Size: Small. Small is the perfect size for thumbnail images. The HTML view image inserts are added in the correct format for Justified Gallery.

Modify the last two thumbnail images to be 600px in size to ensure that the correct sized images are displayed on the justified last row. The Blogger image paths are REST-ful URI's and the final element determines the image size. Change the "/s200/" to "/s600/" for the last two image elements.

Here is a working sample of the BMX's that I took to BMXPO 2015:

Finally, if you would like to use Colorbox as your lightbox, you will need to modify the Justified Gallery script with the below options.

<script>
    $('#picGallery').justifiedGallery({
        lastRow: 'justify',
        captions: false,
        rel: 'uniqueName'
    }).on('jg.complete', function() {
        $(this).find('a').colorbox(cbconf);
    });
</script>

The above snippet calls the Colorbox function on all links within the picGallery div and applies the referenced configuration. If you have not disabled the default blogger lightbox, both lightboxes will appear at the same time.

To disable the default blogger lightbox login to your Blogger Dashboard; then go to Settings > Post Comments; and set "Showcase images with Lightbox" to "NO".