Dynamic Font/Image Replacement in Silverstripe

David Nash silverstripe, What I'm Working On Today 15 Comments

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.

Comments 15

  1. Post
    Author

    It all went as planned, I’m quite happy with it. Internet Explorer has some problems rendering the transparent PNG but overall I think it’s quite good.

  2. Post
    Author
    1. Post
      Author

      Hi Karen – yes that’s the intended behaviour. The client wanted the titles to only be displayed for a few seconds so that the user could concentrate on the beautiful products.

  3. thank you David for this blog, your steps helped me a lot; i did similar like you except i didn´t fade it out with jquery;
    i also didn´t use for the filename the $title property instead i took the $urlSegment property where i had no problem with spaces, etc;
    also i needed a hack for IE6 because IE6 doesn´t “know” transparency so i took “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’$Filename’, sizingMethod=’scale’)” instead;

  4. How’d you get the aliasing to look so pretty? I’m playing around with the GD library for a similar application and the aliasing is all chunky.

    1. Post
      Author
      1. Yes, I’m using imagecreatetruecolor, but it’s still giving me fuzzy edges. I think it has something to do with how I’m assigning the transparency color. Maybe I need to do a bit more research … but if you could paste the code that would help!

        Thanks.
        Andy

        1. Post
          Author
    1. Post
      Author

Leave a Reply

Your email address will not be published. Required fields are marked *