Nary an Original Thought

For my Aunt Linda’s birthday (May 29th), I decided to build her a website to display her photography. As far back as I can remember, every memory I have of every family event involves Aunt Lin behind the lens of her camera. A few years ago she went digital, and following each gathering she would faithfully send a link to her uploaded photos at walgreens.com or some similar upload-and-print service. I thought it would be nice for her to have a better way to display and archive her best shots, and so far she’s off to a good start.

I’m a WordPress guy, so I decided that her site would be a good practice run with the new version 2.5 that was recently released. I looked at a couple dozen photoblogging themes, and finally decided that Nishita would be a good place to start. I immediately added jQuery support, and put it to work in an accordion menu in the sidebar of the archives page, and in the post metadata bar (Comments and More Info are hidden by default, but can be revealed by clicking on their respective links). I think I want to do something a little different with the “Complete Archives” page that shows every picture ever posted on the site, but that will have to wait until there are a few more images there to work with.

I also added a random image bar just above the footer. It displays eight random thumbnails that link to the individual posts. Each thumbnail image is 75×75, thanks to the new thumbnail processing functionality built into WP 2.5. This should give visitors one more way to explore and find new pictures on the site.

Since WP is built for blogging, and this site was intended to be an overgrown image gallery, I had to think through how the posts/images should be organized. As it stands, there are basically four different ways to view the site’s organization.

The first is by date, which is the default presentation. The most recent post is displayed on the front page, and you can navigate forward and backward between posts using next/previous links. The archives page can also be viewed by month.

The second way that Linda will be able to organize her photos is through the use of categories. These categories will be large “buckets” that will help to group her images by type. So, she might end up with categories like Family, Nature, Holidays, and so on. These focus more on the type of image than on the actual content of the image.

The third way is by using tags. Linda will use tags to describe the contents of the image. So, if an image is of Mike, Ben, and Ryan during Thanksgiving, she might tag it with “Mike, Ben, Ryan, Thanksgiving”. In the archives, visitors can browse by tag to see, for example, every image tagged with Ben’s name.

Finally, I used the In Series plugin to give her the ability to add images to a specific series (called a Set on the site). The other three organizing methods are open-ended, meaning that the Family category will expand with every new post categorized as such. Not so with sets. Each set will only contain images specifically assigned to the set, and sets will be very specific. For example, there might be a Thanksgiving tag that will show images from 2008, 2009, and so on, but she might also have a Thanksgiving 2008 set that will only contain images from that one specific event. If a specific image is in a set, there is a link below it that says which set it belongs to. Clicking on this link expands a “Table of Contents” list that links to all of the other images in the set. You can also navigate to next/previous images within the set. The Archives page also has a dynamic list of all sets available on the site.

This has been a really fun project for me. I’ve enjoyed having to re-think the way that the content is presented and organized, and it’s been a unique challenge to keep the site as simple as possible so Linda can easily use the without any complicated coding, etc.

If you don’t mind, I’m sure she’d appreciate it if you stopped by the site and left a comment. I would also appreciate any feedback or ideas you might have, or any bugs that you find on the site.

I’ve been tinkering around with jQuery a bit lately (see the show/hide sidebar trick above). I know virtually nothing about javascript, but jQuery allows a guy like me to do some pretty cool tricks and it has a relatively short learning curve as it is very intuitive and uses standard CSS selectors to do its work.

One of the problems I’ve run into through several theme changes on my blog is the size of images in my posts. The last time I changed themes I shrank the width of the content area from around 510px to more like 460px. Most of the images I had placed in posts were somewhere around 500px wide, which made them overflow into the sidebar area. I looked into a few different ways to fix this, and one approach was to use CSS to solve the problem.

.post img {
max-width:440px;
width: expression(this.width > 440 ? 440: true);
}

Internet Explorer doesn’t support the max-width attribute, so the width: expression mumbo jumbo is supposed to trick it into shrinking the image. It seemed to work fine, until I visited my blog from my aunt and uncle’s Mac a few months ago. The browser shrunk the width but not the height, leaving a strange looking, vertically stretched version of an image in this post. Not good.

I looked around to see if there was some jQuery code out there that automatically shrank an image if it was wider than a certain width. I didn’t find anything out there, so I wrote my own code.

The following image is 1000 x 750 pixels, but jQuery shrinks it down to 440px wide so it fits perfectly as it should.

Enable/disable scaling

The code is pretty simple. You have to configure the max width for the images and also the CSS selector code so it knows which images to scale. After that jQuery examines each image to see if it is wider than the max width. If it is, it proportionally resizes the image down to the max width. I thought it would also be nice to allow the visitor to view the full-sized image, so jQuery turns the scaled down image into a link to the original.

Of course, in a perfect world one would size all of his images to fit the new layout and conserve bandwidth. Also, if a visitor has javascript disabled they will see the full-sized image, which may or may not bother you. Still, this seems like a pretty simple solution to keep large images from breaking your page layout.

You can view the sample code here. It tested fine in IE6, IE7, and Firefox 2.0, all on Windows. In Opera it worked sometimes, but not others (?). Let me know if you find a bug and/or if you have any browser optimization tips.

HT: Challies.com

I’ve grown tired of the old design of this blog, so I spent a few minutes this afternoon rearranging some things.

The *old* blog seemed really cluttered, and there were so many plugins necessary to keep it running that it was very clunky and sluggish when loading. I wanted to keep the same color scheme, but I wanted it to be much more clean and “zippy.” I also wanted the content to be the focus, and though I really liked the preaching puritan image in the old design, it had to go. Every single blog in the world has a header image, the blog title, and then the content. In the new design the content comes first, while most of the other stuff is still around. On the front page, it all sits below the content in three columns (one wide, two skinny). This allows for presenting all of that information in one place without having it strewn over three vertical feet of sidebar real estate. On single post pages, that space is devoted to comments. On archive and search pages, some of the front page items make it into the sidebar, but most are left out so that the posts are featured most prominently.

What do you think? Any suggestions? Any bugs you’ve found?

The nice thing about WordPress is that I can switch back to the old theme with a couple of mouse clicks. So, if you hate it… let me know and I’ll bring back the Nary an Original Thought that you’ve come to know and love.

By the way, if you’re getting a “Press OK to continue loading the content of this page” alert, it’s because you’re using Internet Explorer 6.0. Upgrade to IE7, or read this article for more details about why you get that annoying little alert. An even better idea would be to use Firefox instead!