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)

1px high DIV in IE6

Posted on February 23, 2009

Very occasionally I’ll use an empty DIV for decoration, and in CSS use height: 1px.

In IE6 to make this work you need to put comments inside the DIV, otherwise it’ll display at the height of the font you’re using.

<div class=”line”></div>

becomes

<div class=”line”><!– –></div>

You don’t need any line-height fixes in the CSS. Yes, it’ll add to your markup a bit, but you should probably be explaining why you’re using meaningless, empty DIVs anyway.

Minimal sIFR3 demo

Posted on

I like sIFR, but it really bugs me that I have to read through an entire tutorial to get something really basic up and running. This is a simple sIFR3 demo, using the basic cochin.swf file and an almost minimal amount of code to see it in action.

Download my minimal sIFR3 demo here.

I believe you’ll need to upload it to a webserver to run it, you won’t just be able to open the index.html file to see it working.

Batch reduce resolution of images in Ubuntu Linux

Posted on February 22, 2009

Open a terminal window or shell (who needs a GUI!?)
sudo apt-get install imagemagick
cd image_folder
mkdir resized
for f in *jpg
do
convert -resize 30% $f resized/$f
done

Easier than Photoshop, I reckon!

I needed this today for some photos I was uploading. Photos from recent cameras are huge and Australian bandwidth doesn’t cut it. So this really helps.

Obviously you only need to do the first line once. I found this in the Ubuntu forums but it took me a while to find the right combination of keywords in Google. View the original thread.

I needed to change jpg to JPG, because the camera used uppercase and Linux is case-sensitive. 30% was good for me but you may need to change that.

If you don’t understand this, ask me, I’m happy to help!

Strip ^M from file in vim

Posted on February 20, 2009

If there are ^M at the end of every line when you view them in vim, you can do this:
:%s/^M//g
To get the “^M” bit, hit ctrl-v and then ctrl-m.

Fixing Windows File Permissions in Linux

Posted on

Find all files (not directories) and remove the eXecutable bit. I don’t know what the characters on the end do:
find . -type f -exec chmod a-x {} \;

Make all directories executable to user, read/writable to groups others (good for when the web server is in ‘others’):
find . -type d -exec chmod 755 {} \;

Make all files read/write/executable for user, readable for the group and others:
find . -type f -exec chmod 644 {} \;

Unix Time in MySQL and bash

Posted on February 4, 2009

A quick one today. I was working on a mysql database that used unix timestamp produced by PHP’s time() function.

I needed to be able to quickly convert this time to a human-readable format. In bash,

date -d @timestamp

is a quick way to convert.

In a terminal shell eg:

# date -d @1224992980
Sun Oct 26 14:49:40 EST 2008

In a MySQL client, you could also use

select date(from_unixtime(column_name)) from table_name;

Or if you want a little more flexibility in the output, for example outputting 27/02/09, you could do:

select date_format(from_unixtime(column_name), ‘%d/%m/%y’) from table_name;

This post is one of my most popular posts. Did you find the information you were after? Please tell me in the comments!

Assorted Handy vim Commands, Part 1

Posted on January 28, 2009

To reverse the order of lines, eg 1-5
: 1,5 g/^/m0
For example,

one
two
three
four
five

becomes

five
four
three
two
one

To remove blank lines
: %g/^$/d

Delete all lines that don’t contain “string”
: %v/string/d

Turn all links in an HTML file into ‘#’

Posted on January 24, 2009

Replace all in the current file instances of:

<a href=”link_to_somewhere.html”>link</a>

with:

<a href=”#”>link</a>

:%s/\(a href="\)\(\S\+\)\("\)/\1#\3/g

This is great if you’ve got a big HTML file that you want to demo to a client where you don’t want the links to do anything when clicked.

You could also use javascript to do the same thing – just “return false” for all <a> elements on the page.

vim: Quickly assign POST variables in PHP

Posted on January 22, 2009

You’ve got a web form with lots of fields, and you want to POST them to a PHP script. Open vim, and list the INPUT tag’s NAME attributes, one per line.

<?php
firstname
lastname
address1
address2
state
postcode
?>

Now with some search-and-replace magic we can save ourself a lot of boring typing. Hit ‘escape’ to get out of insert mode, type a colon (“:”) and copy-paste this:

%s/^\(\S\+\)/\$\1 = \$_POST\[\'\1\'\];

I won’t bother explaining it unless someone asks. But what you should end up with is this:

<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$address1 = $_POST['address1'];
$address2 = $_POST['address2'];
$state = $_POST['state'];
$postcode = $_POST['postcode'];
?>

Perhaps not worth it when you have 6 variables like this example; but quite handy when you have 60 variables!