Aunt Linda's new website

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.

jQuery image scaler

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.

Redesign

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!

[crickets chirping in the distance...]

It's been a little quiet around here, so I thought I'd at least tell you what I've been up to. I only have so many hours in the day to devote to internet pursuits, and this blog has been neglected on account of a few other things I've been working on. So, in no particular order, here's what's been keeping me busy:

bbpress

This blog is powered by Wordpress, and I LOVE IT. With the never ending list of plugins that are available, I can make it do just about anything I need it to, and nothing that I don't. Wordpress has a sister program called bbPress, which is to forums as Wordpress is to blogs.

I found it when I was looking for an alternative to phpbb for my class reunion website. We had been using phpbb, but we were getting more than a dozen SPAM registrations a day. That's when I found bbpress. It is still in "beta" mode (ver. 0.8.1), but it is functional enough to use, and anyone with a little bit of PHP know-how can get under the hood to modify it so it works pretty stinkin' well.

I installed bbpress on the reunion site, imported the users and posts from the phpbb forum, and I've spent quite a few hours getting it *exactly* how I want (still not really there yet, but that's always going to be the case!). There were some things that I wanted it to do that it didn't, and because it is still relatively new there aren't a whole lot of plugins out there for it. So, I wrote a few for myself.

The first one I wrote is bb-Ads. It lets you put ads and/or messages in specific places on your site and randomly rotates them each time a person visits the page. All I did was take an old PHP script that I had that would pull random image files and modded it out so it would pull PHP files with the ad text/code built into the them. You can see the plugin page for bb-Ads here: http://blog.wittmania.com/bb-ads

My second attempt at a plugin was another mod-and-hack job. I took a Wordpress plugin that automatically turns scripture references into links to Biblegateway.com and ported it into bbpress. It wasn't as hard as I thought it was going to be. I had to change some variable names around, and delete a bunch of code that wasn't necessary in bbpress, and that was about it. You can see its plugin page here: http://blog.wittmania.com/bb-scripture-links

The third plugin I made was my first attempt at a from-the-ground-up build. By default, bbpress doesn't keep track of how many times a topic has been viewed. This was something that a number of people on the bbpress forums had requested, so I set out to see if I could cobble something together. This was a fun project for me because I was sort of aware of how to make PHP and MySQL work together, but I hadn't ever really had to use it to do anything. After this project, I have a pretty good (albeit basic) understanding now of how to add records to a database, edit existing records, and pull information from the database and use it as necessary.

I have launched an initial version of this plugin, but I'm working on a follow up version that is much more streamlined in the way it works and also adds some additional functionality. You can see the plugin page here: http://blog.wittmania.com/bb-topic-views

ImpeachReidandPelosi.com

If you've been reading this blog for any period of time, you know that I have a bit of a passion for all things political, and I have a bit of a leaning toward the conservative side. When Harry Reid declared that we had lost the war in Iraq, I went out to godaddy.com to see if "impeachharryreid.com" was available. It was, but I decided against registering it because I didn't think I'd ever do anything with it.

Then, last Wednesday I got an e-mail from one of the elders at our church (JD). Apparently, he was so disgusted with what Harry Reid and Nancy Pelosi have been up to, he had already registered ImpeachReidandPelosi.com and wanted to know if I'd be willing to help him set up a website to "take the fight to them." I immediately agreed and set about my task. Since then, we've launched the site and had quite a few posts already. It is supported by the Wordpress blogging engine, and also incorporates an integrated bbpress forum. We have five different authors now (including me and JD), and we're starting to see some pretty decent traffic.

Speaking of traffic, this morning I found out that Nancy Pelosi has a blog. She had published a post basically blaming W. for the tornado in Kansas that had killed at least 10 people over the weekend. I couldn't resist, so I authored a post in response to her post, complete with a picture of Nancy Pelosi as Dorothy from the Wizard of Oz. So what? Well, I'm getting to that…

I checked our traffic stats this afternoon and saw a visit worth noting. When I saw Pelosi's blog, I was almost certain that it was powered by Wordpress (though she doesn't state that anywhere… shame on her!), and one of the things the Wordpress Admin Dashboard does is keep track of incoming links. At 2:21pm today, somebody on Nancy's blog logged into the admin area and saw that we had linked to their blog. They came over and visited our site, including my post and its related topic in the forum. While I highly doubt it was Pelosi herself, it still is kind of fun to know that *someone* from her staff is now aware of our site.

I don't know where this site is going to go, but it has been a lot of fun to put it together and to get it working how I want it to. I've also realized just how much I've learned about Wordpress and bbPress as I've tried to teach the other authors how to compose a post, including blockquotes, pull quotes, and "floating" images.

I'm not really sure how soon I'll get bored with that (and developing bbpress plugins), but as soon as I do I'm sure I'll come back to blogging more frequently.

If you're really angry at me for not posting more often, I suggest that you start your own blog to keep you busy. Send me a link and I'll probably stop by.