Pixel Perfect Firefox Extension

Posted on June 30, 2009

When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect.

Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing.  You can set the opacity and quickly toggle the overlay on and off.

I’m not sure about centering – it doesn’t seem to do that automatically. But I think I could use the MeasureIt extension to get the width of the main column, set it in CSS with ‘margin: 0 auto’ to centre it, and then drag the overlay to match and base everything off that.

My job just got slightly easier again.

Awesome!

Dynamic Font/Image Replacement in Silverstripe

Posted on March 10, 2009

I’ve recently started creating sites with SilverStripe CMS, and I’m loving it.

My client wants nicely rendered non-standard font titles that fade in and out, without using javascript.

Here’s how I’m going to accomplish it:

1. In Silverstripe’s mysite/code/Page.php I overload the onBeforeWrite() call in my Page class. This intercepts the data before it is written to the database. I can get the title of the updated page from $this->Title
2. I will then use PHP’s GD (graphics) library to create a PNG with a transparent background. I’ll use imagettftext() to load a font from a TTF file and write it to the empty PNG image. I can use Director::baseFolder() to work out the root of the site and store the title images in $this->ThemeDir.’/images/titles’.
3. I will make sure that ‘images/titles/’ is writeable by the web server. I will make the filename the same as the title, with spaces converted to _ but otherwise stripped of punctuation.
4. In the SilverStripe template I have created for the client, I will output a heading element with a span inside it. The span will contain the text of the title, so that search engines can read it.
5. I will output inline CSS using the ‘style’ attribute of the heading element. It will look at the image file that was created in the CMS, get the width and height, and then set the title as the background.
6. I will then apply jQuery effects to the title so that on page load it fades in, pauses for a few seconds and then fades out again. What the user sees is an image of the rendered text.

It won’t be a strain on the server as the text title is only generated when the page is saved in the CMS. It’ll still be read by search engines and non-graphics browsers, meaning that it is still accessible. But best of all it will look absolutely beautiful, without requiring a Flash plugin.

I’ve got most of the pieces of this working, I just haven’t glued it together yet. I’m looking forward to it! I’ll let you know how it goes.

Download ImageTitle.php (the ‘library’ I use to interact with GD)