What we'll be making

We'll be making a nice little GIF like this that counts down to a specific date. This can help create a sense of urgency for events or product offers you may be using email for.

How it works and support

This works by taking a PNG and using a PHP script to create a looping GIF counting down to a time.

It takes a flat PNG and super imposes the countdown based on your variables in the PHP script onto it.

When a user receives it in their inbox, they'll see it loop for 1 minute and reset. However, if they leave the email and return it will have adjusted to countdown again. The likelyhood of a user watching it reset is very low. Here is the client support:

* Displays first frame of animated GIF only.

What you'll need

You will need:

• Web hosting with PHP support
• The font you want to use's font file (eg; futura.ttc)
• A bit of patience to get it working

Next, you'll want an image to impose the countdown onto. For this tutorial we'll use the one that comes with the code: save this in the images folder.

Now, this is where it can get a tiny bit scary. Don't worry, we'll get through this! Open up gif.php in your editor of choice. A lot of the code here you don't need to worry about and I have added comments to help you with the parts you do.

The first thing you'll want to change is this:

date_default_timezone_set('Europe/London');

If your timezone is diferent of course.

Next up is:

    $image = imagecreatefrompng('images/countdown.png');

For the sake of this tutorial we'll leave that as it is for now, but when you add more images you'll need to change this. It appears in the script 3 times

Now is the important part, the variables that control the text style. Lets run through them one-by-one.

First up, the font size:

'size'=>23, // Font size, in pts usually.

Unfortunately, as this is a PHP script we don't have huge control over font size. You'll just have to get as close to what you need as possible.

Then the angle of the text:

'angle'=>0, // Angle of the text

I'm guessing most of the time you'll leave this at 0, unless you're doing a crazy angled banner or something.

Now the x-offset:

'x-offset'=>7, // The larger the number the further the distance from the left hand side, 0 to align to the left.

As you can see by the comments, it's the distance from the left hand side. It can be fiddly to get this where you want it.

Then the y-offset:

'y-offset'=>30, // The vertical alignment, trial and error between 20 and 60.

Same as above, but the verticle alignment.

Now to define the font:

'file'=>'./GillSans.ttc', // Font path

This is why you need the font file.

And finally to colour the text:

'color'=>imagecolorallocate($image, 55, 160, 130), // RGB Colour of the text

RGB values are simple, right?

Boom, we're done! Move on to the next stage, adding your image into an email.

Adding to an email

Ok, now we've got all our variables set up it's time to generate the image. This is why you needed the web hosting.

Open a browser and go to:

YOURHOST/countdown/gif.php?time=YOUR-TIME-TO-COUNTDOWN-TO

Confusing right? No! Here is an example:
http://mosaichosting.co.uk/countdown/2/gif.php?time=2014-12-25+00:00:01 - This will countdown until Christmas 2014. Hopefully you can see how it's working there.

So you take that link and whack it in an image tag to add it to an email, like this:

<img src="http://mosaichosting.co.uk/countdown/2/gif.php?time=2014-12-25+00:00:01" alt="Countdown" border="0" style="display:block;">

But Alex, you can't use that PHP script as an image src in email!!!

Actually, yes I can. The GIF-encoder tricks the email client into thinking the php link is actually a GIF. Pretty cool eh?

Get in touch

If you have any questions post them here on Community or send me a tweet