HTML syntax highlighting for Silverstripe .ss template files in vim

Posted on August 4, 2009

By default vim opens .ss files with some other file format syntax highlighting.

To enable HTML (actually XHTML) syntax highlighting on your .SS Silverstripe template files, create (or edit) your ~/.vim/filetype.vim file. Then enter this:

au BufNewFile,BufRead *.ss      setf xhtml

Then open a .ss file and it’ll give you nice HTML syntax highlighting. And because it’s in your home directory, it’ll keep working even after you upgrade vim.

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!

Remove empty LEGEND tags in Silverstripe search form

Posted on May 1, 2009

I’m pretty obsessive about my HTML validating with no errors and no warnings. It bugs me that when I use Silverstripe’s incredibly convenient $Searchform in the template that it outputs an empty legend tag inside the fieldset.

There’s an easy way to fix this:

1. Create a templates directory inside mysite.
2. Copy sapphire/templates/SearchForm.ss to mysite/templates/SearchForm.ss
3. Edit your copy of the file and remove that pesky <legend></legend> line
4. Refresh your page that uses the searchform and bathe in the warm glow of a error and warning free page!

Thanks to Maksfeltrin in the Silverstripe forums for pointing this out.

Strip <span> tags from HTML in vim

Posted on April 6, 2009

When upgrading a website you might see source code like this:

<span style="font-family: Arial; color: #0000ff; font-size: small;">Some text goes here</span>

You’re using CSS now and all those <span> tags are ruining it. In gvim, do this search and substitute:

%s/<span.\{-}>//g

Then to get rid of the </span> tags, do this:

:%s/<\/span>//g

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)