The Senate Site asked about a good way to quickly post a gallery of images. I’m a programmer, so I answered the query by rolling my own solution. (If your only tool is a hammer…)

I happen to like Litebox, although it requires a bit of manual setup: moving specific files to the web server. Don’t worry about the setup instructions on the Litebox site. We automate the file interactions below.

Getting Ready

The following requires OS X 10.4, and uses Automator.

Download the following supporting files, and put them on your web server. I put my CSS files in “/css” and my javascript files in “/js”. It’s up to you.

• TagLoader.js — Inside this file, you’ll need to change the two hard-coded file paths to match the paths to the js and css folders on your server. Change the following lines to match your setup:  BASE_JS: '/js/min/',
  BASE_CSS: '/css/',
• litebox-1.0.js
• prototype.lite.js
• moo.fx.js
• lightbox.css

Add the following to your site/theme CSS file. (Feel free to modify this CSS as you prefer. These values suited me.)ul.thumbs {
  text-align:center;
  list-style-type: none;
}
ul.thumbs li {
  display:inline;
  padding: 0;
  margin: 0 5px;
  list-style-type: none;
}

Build the following Automator action (or just download the complete version)

1. Finder : Get Selected Finder Items
2. Preview : Create Thumbnail Images — I left the sized at 128. Leave the suffix as “_tn”; it’s important later on.
3. Automator : (For some reason, WordPress is mangling the following code—it’s not showing the escaped quotes properly.)

   JS_FOLDER="/js/"
   IMG_FOLDER="/images/"
   LB_TAG=$(date "+%Y%m%d-%H%M%S")
   echo "<script type=\"text/javascript\" src=\"${JS_FOLDER}TagLoader.js\"></script>
   <script type=\"text/javascript\"> //<![CDATA[ 
   TagLoader.load('litebox');//
   //]]></script>
   <ul class=\"thumbs\">"
   for tn in "$@"
   do
     #Get img base name (i.e. w/o path)
     tn=${tn##*/}
     #Guess at original image name
     img=${tn%_tn.*}.${tn##*.}
   
     echo "<li><a href=\"${IMG_FOLDER}${img}\" rel=\"lightbox[${LB_TAG}]\"><img src=\"${IMG_FOLDER}${tn}\" alt=\"\" /></a></li>"
   done
   
   echo "</ul>"

4. System : Copy Text To Clipboard
5. (optional) TextEdit : New Text File — Pop down the options. Check “Show action when run” and “Show entire action”

Within the Automator action you just built (and, of course, saved appropriately), you’ll need to modify some code to match your server file paths. Change JS_FOLDER and IMG_FOLDER (the top two lines of the Bash script) to match the file paths.JS_FOLDER="/js/"
IMG_FOLDER="/images/"

Save your Automator action to “~/Library/Workflows/Applications/Finder/”

You now have an Automator action that takes selected image files, automatically makes thumbnails, generates the HTML snippet needed to load Litebox and display the thumbnails. The HTML is copied to the clipboard for easy pasting, Nifty.

If you want to dig further into Automator, you get bonus points for using the “Finder : Get Folder Contents” action instead of having to select individual files. Extra bonus points for integrating the Upload to FTP Automator Action. (Hint: You might have to add it twice: once before the thumbnails are created, and once after.)

Using our new tool

To use the Automator action, select the files you wish to insert/thumbnail/etc. Right-click, pick “Automator”, and from the pop-out menu, pick your new action. It’ll take a moment to run (depending on how many images you selected), and prompt to save the generated html file when it’s completed.

FTP the image files and newly created thumbnails to your web server. Paste the generated HTML into your blog. You’re done!

One bug

One bug I discovered when building this, is that my script assumes the original image file has the same file extension as the thumbnail. If the initial image is a png, Automator will output the thumbnail as a jpg, so you might have to do some find/replace.

The output

I ran my Automator action on three images, and followed the process above. This is the output (I had to manually fix the png file extensions, per my bug, above). Click the images to see Litebox in action!

Posted in Programming