Graphical Date Tutorial

posted on january 12, 2003, tag: movable type

I have a feeling eventually someone who uses MT will ask me how I did the dates on this site. In a preemptive response (and also because it's something I think people would use if they knew how to do it), I have compiled a simple tutorial. To do this, all you need is to be running Movable Type. Many thanks to James who pointed out how complicated I made this the first time around. The tutorial has been updated and is significantly easier...

First, you need to create an image for each day (01-31, 1-31, whatever you like) and an image for each month (Jan-Dec, 01-12, 1-12, again, whatever). You can also include the year if you like (I didn't, but will explain how to add it). Name your images so that the days are named 01.gif, 02.gif, etcetera from 01 to 31 and the months are named the same, 01.gif through 12.gif. Once you have all the images done, which is a pain, I know, you can upload them to your server in two different folders. For this tutorial, I am going to assume you use images/numbers and images/months. Move onto the coding step.

The next step has to take place inside your <MTEntries> tag. Inside this block, you would normally get the date by doing something like this:

<MTDateHeader>
     <$MTEntryDate format="%x"$>
</MTDateHeader>

The nice thing is, however, that MT includes support for each part of the date to be pulled out separately. This is what we're gonna do. Replace the block above with this:

<MTDateHeader>
<img src="/images/numbers/<$MTEntryDate format="%d"$>.gif" alt="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" title="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" border="0" /><br />
<img src="/images/months/<$MTEntryDate format="%m"$>.gif" alt="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" title="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" border="0" />
</MTDateHeader>

Simple. So now you have two images that are stacked together and create the date. Note that I've added in alt and title tags that will give you something like 12 / January when moused over. You can remove those if you wish. Use this however you see fit.

A little further...

If you wish to do what I did (stick the date in the upper left corner so that text wraps around it), you're going to have to use some CSS. I picked this technique up from css/edge. He calls it Boxpunch. It's very simple, and works perfectly in the latest versions of IE and Mozilla as well as Safari, Opera and even Netscape 4 (!). IE 5.1 Mac doesn't seem to like it as much. Oh well.

You're gonna need two styles. Place the following in your CSS file:

.grab {
     margin-top: 0px;
     padding: 0 0 0 0;
}
.punch {
     float: left;
     position: relative;
     text-align: left;
     width: 42px;
     height: 45px;
     padding: 0 0 0 0;
     border: 0px;
}

The .grab style is used to encapsulate the entire entry. And the .punch style is used to put the date graphics in the upper left corner. Text will wrap around it correctly. So then, building on what we had before (the two image references) we can instead do this—after your date code, before your <$MTEntryBody$> tag:

<div class="grab">
<MTDateHeader>
<div class="punch">
<img src="/images/numbers/<$MTEntryDate format="%d"$>.gif" alt="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" title="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" border="0" /><br />
<img src="/images/months/<$MTEntryDate format="%m"$>.gif" alt="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" title="<$MTEntryDate format="%d"$> / <$MTEntryDate format="%B"$>" border="0" />