Introduction
This morning I was taking a look at the new (ish) meta stackoverflow site, and noticed a thread asking “Can we get flare as an image?”. It seemed like a good idea, especially for forum signatures and the like, so I thought that seeing as I’d recently updated the WordPress widget, that I’d try and put something together.
Pretty as a Picture (or not)
As C# is generally my weapon of choice these days, I was originally going to knock something together in ASP.Net. I was thinking something along the lines of rending a WPF control to a bitmap, and emitting that as an image. I decided against that approach because:
- ASP.Net hosting is generally more expensive – most people I know seem to stick to *nix hosting.
- Rendering WPF to a bitmap doesn’t work in partial trust scenarios; so it might not even work on ASP.Net hosting anyway.
So, feeling in a masochistic mood, I thought I’d knock something together in lovely old PHP; the results of which look something like this:
Or, by passing in a userid on the querystring:
You can test it with your own details by changing the userid on the following url:
https://www.grumpydev.com/imageFlair/imageFlair.php?userid=1
Images are cached (for 30minutes by default) and all of the StackOverflow data is taken from the JSON feed, so the strain on SO should be fairly minimal.
The Code
You can use the script hosted on here if you want (although I might have to change my mind on that if the load gets too high), or you can download the code and run it on your own box:
https://www.grumpydev.com/imageFlair.zip
Although it will run just fine “out of the box”, the code is pretty flexible; with plenty of configurable options for fonts, colours, positioning, background images, caching time etc. Take a look in config.php and you’ll hopefully find you can change everything you want to without having to delve into the main code.
Bear in mind that I am far from a PHP expert, and this was put together in a few hours, so please don’t laugh too much if you do take a peek at the source 🙂
Font Support / Licensing
The text is rendered to the bitmap using a TrueType font of your choosing, which gives us some nice flexibility. Unfortunately though, none of the fonts that we generally take for granted, such as Arial, Verdana etc. come with any distribution rights; so I can’t include any in the source archive. This might not be a problem if you already have your favourite TrueType fonts installed; but if you don’t you can get a “free” version of several core fonts from http://sourceforge.net/projects/corefonts. You just need to extract the archives using WinRAR, or 7zip, or something of that ilk; then just drop the TTF file into the source code directory.
That’s it – hope someone finds it useful 🙂
Update – Bug Fixes and Pretty URLs
After some feedback from the meta question I’ve fixed a stupid bug in the gravatar code, so now it should work for people who have a 1 in their gravatar hash (don’t ask! :-)).
I’ve also enabled “pretty urls” on the hosted version, so now you can go to a url like:
https://www.grumpydev.com/imageFlair/658.png
And you’ll get the PNG for the corresponding userid. I do intend to expand it to include Flair for the other sites in the “Stack Overflow” family, but I haven’t had chance yet.
For those that are interested, this is the .htaccess file that enables the pretty urls, and also reduces the cache time on pngs to 1 second:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)\.png$ imageFlair.php?userid=$1 [L]
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 seconds"
</IfModule>
Update 2 – Supporting the Whole Family
I’ve added an optional parameter to specify which site’s information to display. The “pretty” url format now looks like this:
http://[ur]/[mode]/[id].png
Where [mode] is one of:
So for Jeff (id number 1 everywhere is easy :-)) we end up with:
The htaccess file now looks like this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)/(.*)\.png imageFlair.php?mode=$1&userid=$2 [L]
RewriteRule ^(.*)\.png$ imageFlair.php?userid=$1 [L]
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 seconds"
</IfModule>
Source ZIP is updated with all the latest changes. Hopefully that will be it for the time being! 🙂
