Creating Thumbnails For Justified Gallery With Bash
Feb 25, 2014
2 minute read

Having just rebuilt my website from the ground up using Google’s Go, I’m now using a whole new set of tools to get things done. Previously I based my blog on Wordpress and I used NextGEN Gallery for my gallery needs. Now that I’m going light, I’m now using Jusitified Gallery combined with Magnific-popup.

For Justified to be able to do it’s thing and size the images to fit the page nicely, it needs a set of thumbnails of different max sizes. I wrote a quick bash script to generate these with GraphicsMagick’s convert utility.

#!/bin/bash

if [[ -d $1 ]]; then
	echo "$1 is a directory. pass in a file instead."
elif [[ -f $1 ]]; then
	ORIGFILE=$(echo $1 | sed 's/\.[^.]*$//')
	echo "Making thumbs for $ORIGFILE ..."
	
	gm convert -size 800x800 ${ORIGFILE}.jpg -resize 800x800 +profile "*" ${ORIGFILE}_c.jpg
	gm convert -size 640x640 ${ORIGFILE}.jpg -resize 640x640 +profile "*" ${ORIGFILE}_z.jpg
	gm convert -size 320x320 ${ORIGFILE}.jpg -resize 320x320 +profile "*" ${ORIGFILE}_n.jpg
	gm convert -size 240x240 ${ORIGFILE}.jpg -resize 240x240 +profile "*" ${ORIGFILE}_m.jpg
	gm convert -size 100x100 ${ORIGFILE}.jpg -resize 100x100 +profile "*" ${ORIGFILE}_t.jpg
else
	echo "Usage: $0 <filename>"
fi

The -resize flag keeps the aspect ratio intact, so that is the maximum allowable dimension for the image. The +profile flag should strip all of the extra data not needed.

To use it, run the script and pass it the name of the original image file. I opted not to use the 500px and 1024px thumbnails, so in my html I had to configure Justified with these options

$("#gallery").justifiedGallery({
	'sizeRangeSuffixes' : {
		'lt100':'_t', 
		'lt240':'_m', 
		'lt320':'_n', 
		'lt500':'_z', 
		'lt640':'_z', 
		'lt800':'_c',
		'lt1024':'_c'
	});