Just to update on some of the latest changes going on around here as part of the redesign.

The biggest changes have come as part of the new “photos” section. In moving the photolog from /p/ which I consider (in hindsight) to not be the best URI I thought about what sort of photographic content I have on the site now and what I’d like to have in the future. In my mind three sections came to mind, the photolog, selected series of works, and old photos. I’ve experimented with putting older photos into the photolog but it doesn’t really work well with the reverse chronological organization of the albums. Plus as part of my moving I’ve dug up a ton of old pictures that I’d love to scan and archive online. The series idea never really developed beyond the first two I did (and it’s built on the structure of the photolog) but I really like the idea of it and I’d like to keep it around. For instance it’d be interesting to do a “Best of 2003” series at the end of the year, or something similar. (Though the thought of choosing a dozen or two from over 7,000 photos is a little intimidating.)

The re-coding of the photolog itself is actually going much better than I thought it would. Finding things in Gallery can be frustrating sometimes, but I’ve managed to get the vast majority of the program completely free of tables, simple syntax errors, and it’s now using a CSS-based design. I am using one hack to get XHTML 1.1 validation, but it’s because of a bug in PHP that I will devote an entire post to. As soon as I finish cleaning everything up for the photolog section I’m going to copy the code over and use it to power the classic photos section.

I’ve been recoding many of the titles of pages to use the new CSS image text method, and I enjoy the results. When I recently upgraded to PHP 4.3.3 something changed in the Freetype library and now the letters are rendering at what seems to be a lower weight, which is a pleasant surprise because they were a little chunky before. I have no idea why it would do this. Unless perhaps a newer version of Freetype could better understand the font file, which I suppose is the only explanation.

I changed the text image generator script to turn underscores to spaces instead of hyphens. Though I like hypenated “filenames” better the problem came in the photolog where there were actual hypens needed in the titles, so having those translated to spaces was a little funky.

Finally I’ve done a little work on the jazz quotes section of the site. Although I have been neglecting it lately, these pages account for a good fifth of the traffic to this site and it’s really the only resource of its kind on the net. For some reason before I would seperate the first and last name in the URI with a period, which messed up some simplistic traffic analysis software (what sort of extension is .Coltrane?) but it’s what I chose for whatever reason. I’ve updated all the new URIs to use hypens instead of periods, which is much cleaner in my opinion. There are so many links to these pages and so much search engine traffic that it would just be stupid to break any of the links. Of course the old URIs still work, though I haven’t set them up to serve a permanent redirect yet, they just return the page like before. This section still needs a lot more work, in its styling and also just in the backlog of submitted quotes I have to catch up with.

The Zeitgeist has been updated to no longer return script errors, but it isn’t cached so it’s very slow, and it needs to be restructured.

For too long this site has been beautiful XHTML 1.1 served with the correct DOCTYPE and MIME type save for one section. One major section, with thousands of pages. The photolog. Part of it has been that Gallery is so inflexible I have to make extensive modifications just to get it to look like the rest of the site. The logic and presentation is all a mess in the code, and it’s quite invalid out of the box. Well, version 1.4 has just been released, and I can live with that until 2 comes out, so I’m going to use 1.4 as my baseline and get it 100% valid to the point I can serve the pages with application/xhtml+xml without fear of the pages not working. Wish me luck. The photolog may look quite funny during the process, but give it time and it should be back to its rosy and frequently updated self.

On the last post I had decided to do something I do occasionally, embed some thumbnails from the photolog in a relevant post. While I was writing the post I thought to myself, “Man this thumbnails are going to look funky, I should center them with <p align="center">.”

Blasphemy! I know. Forgive me, I was tired. Still, align="center"? That is so last decade. So I decided to give the paragraph a little class, postthumbs, which to me describes the content of the paragraph and is something I could see myself reusing. What follows is trying to add a little style to some simple thumbnails.

I’m a fan of the double border look for thumbnails, a thick white border surrounded by a very thin darker border. You see it done all the time, for example Rannie and Christine, but in both cases the border is actually part of the image itself.

This is cumbersome for several reasons. First, this may be geeky of me, but it seems like it’s violating the principle of separating content (the thumbnail or picture) and the presentation (the border). In addition this technique is rather inflexible. If Rannie decided tomorrow that he wanted orange and green borders instead of the white and black ones he has now he would have to regenerate every single thumbnail. Since I suspect both Christine and Rannie do this effect in Photoshop, this is a pain however you cut it, even with heavy batch action.

So the solution is CSS. If you remember the box model you’ll see that this effect should be rather easy. We can just put a background on the element and it will show through on the padding, then the border goes outside that, creating the effect of a double border.

How I do these sort of things is I create an HTML file on my desktop with the generated code from whatever page I’m working on and then I use it as the preview in the excellent TopStyle 3.1 so I can see whatever changes I’m making to the design live. In my opinion this is the only way to design with CSS. The only downside is right now I can only preview things in Internet Explorer because the Mozilla object it calls doesn’t seem to work quite right with 1.5 betas. However for most projects getting it working in IE first is the most realistic thing to do.

So let’s take a look at the code we’re going to be styling:

<p class="postthumbs"><a href="/p/9-9-2003/DSC06440"><img src="/a/9-9-2003/DSC06440.thumb.jpg" alt="The front of my new business card." /></a> <a href="/p/9-9-2003/DSC06439"><img src="/a/9-9-2003/DSC06439.thumb.jpg" alt="The back of my new business card" /></a></p>

So my first inclination was to apply the background and border to the anchors (the <a> element). After playing with the colors for a bit here’s what I ended up with:

.postthumbs {
  background: #eef5c5;
  border: 1px solid #e7f3a5;
  border-left: none;
  border-right: none;
  text-align: center;
}
.postthumbs img {
  padding: 6px;
}
.postthumbs a {
  background: #fff;
  border: 1px solid #cde44e;
}
.postthumbs a:hover {
  border: 1px solid #8a9f18;
}

It did exactly what I was looking for in the preview, and it allowed plenty of flexibility and did exactly what I wanted to do. Let’s talk a little about what the above code does. The first class is for styling the entire paragraph, which fills up all the horizontal space available to it. The first rule gives the whole thing a background, the second rule puts a one pixel solid border on all sides, and then the third and forth rules remove the border from the left and right side. Finally we say to center everything. Occasionally I’m asked why I apply the border to all sides and then remove it instead of just having simply border-top and border-bottom rules. The simple answer is then whenever I changed the color or thickness or style of the border I would have to change it in two places, and this way I only have to change it in one place. I think it’s roughly the same number of characters too.

The second selector says that any images inside of anything with a class of “postthumbs” should have 6 pixels of space around it. Then the next two apply the white background and a border that changes when you hover over the anchor.

We’re done, right? Not quite. As soon as I loaded it up in Mozilla I noticed that the white background and border were, for lack of a better term, bunched up at the bottom. I suspect that for some reason that where Internet Explorer put the anchor “box” around the entire image Mozilla just put the box around what looked like where it would be if there was text there, so the font size (12 pixels) plus the line height. Generally in cases like this I assume Mozilla is right and IE is just being overly forgiving, so I find a workaround. I’d like to find the exact reason for this behaviour, but I don’t have a lot of time right now and the Mozilla Bugzilla interface is so painful.

So the previous method looks funky in Mozilla, but a solution quickly came to mind. If I put the padding, border, and all on the image then that should avoid all problems. I could even keep the hover psuedo-class on the image even though IE users wouldn’t see the effect. Here’s the final code:

.postthumbs {
  background: #eef5c5;
  border: 1px solid #e7f3a5;
  border-left: none;
  border-right: none;
  text-align: center;
}
.postthumbs img {
  background: #fff;
  border: 1px solid #cde44e;
  padding: 6px;
}
.postthumbs img:hover {
  border: 1px solid #8a9f18;
}

As you can see this is a bit less verbose and generally simpler to understand. What we have is a consistent look in IE and Mozilla and enhanced functionality in more technologically advanced browsers, which is something I’m perfectly comfortable with.

In other news the links on the page are no longer bruised blue and purple, but rather some shades that I think match better. I’m a big fan of :visited link states as it can be very useful when browsing and is also interesting to see links you’ve already visited on other sites. I usually make visited links a little darker, which seems to delineate them clearly. Another common technique I’ve seen before is to not have visited links underlined, which I think is also nifty. However sometimes I see :visited states on site navigation, where it is nearly useless.

Navigation has started to flesh itself out, but it still has a long way to go. I’m going to have to reevaluate the site’s information architecture and reassess what sections could be combined and which need to be retired. There is also the question of what to do with all the contemporaria I kept in my sidebar before, and I’m not quite sure yet. I think maybe a nested sidebar that you can turn on but is off by default. I’m using these changes to give Dreamweaver MX 2004 a solid run-through and so far I’ve been very satisfied. It’s nothing revolutionary, and many of the new features they’ve been pushing don’t really appeal to me, but it has the polish of a mature product that I feel comfortable spending a lot of time in. I would have called it 6.5, but then again over at WordPress we put major functionality upgrades and changes in to hundredth point upgrades.