So much for being clever. I decided I didn’t like the layout of thumbnails with different verticle and horizontal dimensions, so reverted to using only 100x75px thumbnail images. This lines up more nicely to my eye, but has the significant disadvantage of not allowing portrait-sized images. And cropping works only sometimes, because you can’t control which part of the image is cropped, so sometimes you end up with a thumbnail showing only sky or something.
So back to the drawing board on the thumbnail grid.
Meanwhile, I’ve uploaded some new images, including a few from my 2006 trip to Alaska. I also finished the functionality of the Categories menu including nested categories, visible now in the Multibox Gallery.
Just now did a bit of work on the multibox gallery. This site is built in ExpressionEngine, the CMS I’ve been using almost exclusively for the past two years. EE is a great CMS with lots of native functionality. Unfortunately, the EE version 1.6 method of uploading files (like images for a gallery) truly sucks. There is a marvelous EE extension written by Mark Huot called File. Mark Huot offers bunches of great EE extensions for free, but to be honest his documentation doesn’t work very well for me. Helpfully, bkuberek has written on the EE support forum a very helpful guide to using the File extension.
One of the features of the File extension is auto-creation of thumbnails upon uploading an image. You can set thumbnail widths, irrespective of height, by setting the Maximum Image Width property in the EE File Upload Preferences, like this: 
Normally this setting would prevent uploading of any image wider than 100px, but with the File extension enabled, it tells the system to make the thumbnail 100px wide, and leaves the original full-size image unaffected. To get a 100px wide thumbnail, you also must set the Resize Images setting to Anchor Width. So your thumbnails will be 100px wide, and however tall they need to be based on the original image dimensions. So you could have a nice row of thumbnails 100px wide but all kinds of crazy sizes tall. That doesn’t look so good in, let’s say, a grid of thumbnails like I have in the Multibox Gallery.
But I just figured out a solution. An undocumented feature of the Huot File extension is, you can set the image width to 100px AND the image height to (in this case) 75px, and then set Resize Images to Crop:

All your thumbnails will automatically be cropped to 100px x 75px, but the original image will be unaffected. I can arrange my thumbnails in a nice even grid, like we now see in the Multibox Gallery.
Now I need to get busy and add some more photos…
Categories: ExpressionEngine • How to
Copyright © 2012 openwebworks · Valid XHTML · Valid CSS