I play a little football in my spare time.  It’s not hard core.  In fact, it’s co-ed flag football, but it’s a heck of a lot of fun, good exercise, and surprisingly dangerous. Just like with any group I’m involved with, I see the benefit of getting a website up.  In this case, Excel spreadsheets were being emailed around to a couple hundred people just to get the schedule and stats distributed.  A simple website would solve this.

It didn’t take long to get a quick site thrown together with our schedule, game results, individual stats, and a few photos.

But then I got ambitious.

We are a small league, and most of the players are pretty casual – to the point where many will not remember which team is which.  I wanted to get pictures of the jerseys up on each team page, since many people will remember “Oh yeah, that red team – they’re good”.

Taking pictures of all the jerseys was a start, but cropping jersey pictures did not work well.  I decided to try to “draw” the jerseys in photoshop.  This turned out to be really simple, and I was able to make them look really good.  By the third jersey I realized that I was doing a lot of repetitive work.  I also thought that it may also be cool to put the jersey on each player page as well, with the player’s number superimposed on the jersey.  This would require some CSS to position the number, and some careful font choices.  I wondered what else I might be able to do with CSS.  The logos?  stripes on sleeves?  Wrinkles?  Dirt? Oh yeah.

A long night was ahead.  But this was a mountain I had to climb.

I started by creating an outline of a football jersey as a mask, leaving the actual jersey portion of the image transparent.  That way if I were to layer the image on top of a div with a solid background colour, it would roughly look right.  I made a portion of the collar semi-transparent to look slightly darker.  These two layers form the bottom (solid colour) and the top (jersey mask) of the stack.  In between, I had to fit the name and number on the jersey (or alternatively, a logo).  The name and number are created with CSS.  The number is easy – a large font centered in the div.

The name is a little more difficult, since really long names require different sizing thn short names.  I solved this by using ColdFusion to calculate the CSS, reducing the font-size of long names, and if necessary, switching to a more narrow font, and reducing the letter-spacing.  For browsers that support the CSS attributes “font-shadow”, I added a bit of depth to the letters to give the illusion that they are stitched on.

For generic team jerseys, a logo can be added to the mix by creating an additional image using the jersey mask as a template, and making sure the image uses the alpha layer to create transparency. With the lettering or logo sandwiched in there, I decided to give the option of stripes on the sleeves or torso, by using CSS to create color blocks.  There can be between 1 and 3 stripes in each position. With my jerseys created, and using my new found skill of making nice transparent PNGs, I tried adding wrinkles to the jerseys.  I created some soft wrinkles using PNG files, and layered them on top of everything.  This gave the jerseys way more life, and they now did not look as fake.

Unfortunately the transparent PNG technique does not work in IE6/ IE7, and using a GIF in that case just looked like crap, so too bad for the IE crowd. They still get the jerseys, just no extras.  I also made some PNG files to create the effect of dirt on the jerseys.  I use these for jersey images in game summaries, since a clean jersey usually means you didn’t play too hard.  Instead of a generic dirt image, I made 5 different ones, which are assigned at random, so that each jersey does not have the same dirt pattern. With that, I was satisfied.  The jerseys look really good, and the code allows an endless combination of colours for the teams that like to show up with new jerseys each year.  If a team needed a new logo, I could create one easily, and apply it to the jersey.

Jersey Showcase Page

Zip Download

The code is pretty simple.  As long as you load the jerseys.cfc file somewhere in your page (or application scope) you can call the jersey generator with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<cfscript>
	jStr = structnew();
	jStr.team_key = 'steamers'; // this loads the logo file if logo is 1
	jStr.size = 200;  // size of jersey (400/200/100/40)
	jStr.colourA = '33CC00'; // main jersey colour
	jStr.colourC = 'fff'; // numbers and middle stripe colour
	jStr.colourB = '333'; // outer stripe color
	jStr.displayName = 'mallinson'; // jersey name
	jStr.displayNumber = '23'; // jersey number
	jStr.sleeveStripes = '1'; // amount of sleeve stripes
	jStr.torsoStripes = '3'; // amount of torso stripes
	jStr.dirty = 1; // 1 = dirty, 0 = clean
	jStr.logo = ''; // '' = no logo, '1' = load logo
</cfscript>
<cfoutput>
#jerseys.displayJersey(argumentcollection=jStr)#
</cfoutput>

I wrote all of this last summer, and I’m bringing the code back now because I have some plans to use the jersey generator in a project I’m working on. I have big plans for the code as well. I’m going to make it useful for baseball jerseys, hockey jerseys, and basketball jerseys, as well as add some more features that take advantage of CSS3.

And one more thing. The generated code is not very semantic – and that normally just kills me. But this is for fun, and for my purposes, there’s no need for perfect code in this case. When I roll this out as a part of a bigger project though, I will output a very simple bit of code to the browser that just gives the player’s name and number. Then through the magic of jQuery, I’ll “progressively enhance” the code to display the jersey via DOM manipulation. But that is another day. I’ll release that code in the future – when it is written.