HTML, CSS... and PHP countdowns! (Yes, it's possible)

Article published on

and updated on

Comrades, no long introduction in this new article, I'll move on without wasting time to the subject that worries me: The Internet user with the nickname "Emile Email" pointed out to me (rightly so) in April 2017, in commentary to the article on the creation of a fully responsive emailing templatethat he would have "enjoyed [...] understanding how to [...] make a countdown gif" (end of quote). Never mind, dear friend! We will therefore address this point. Hold on to what you have on hand (be careful though, no sexual innuendo, I see you coming)It's going to be a bit technical!

The truth is I tell you, there is already a post about countdowns. On the other hand, this one had been published from the Litmus communityand is not, to this day, a (oh how I hate this expression) available in the language of Molière. So, exclusively, I'm going to give you a little summary of the skills and technical points to be covered, and go into the testing of the solution... Don't thank me, I'm happy to do it, it's a gift, it's for me.

So of course, you will find a few sites offering to generate these countdowns in a flash (,, Some routing platforms or publishers may even offer to generate one directly from their platform! If you like it, I feel like saying "so much the better": you can skip this article... But that would be a shame! Well yes, because I suggest you to generate yours, yourself, with your little hands, your little keyboard ! and especially assign the style you want to this countdown. So you can see that it's worthwhile to keep reading...


First of all, what is the use?
Yes! Before engaging in this work, it is necessary to understand and to discern the utility of it. We are not going to do this just for fun and because it is trendy, no no no! A countdown, it attracts attention, it induces a certain notion of urgency, of deadline, and finally, it allows to put forward an offer in a singular way. Whether it's a last minute offer, a webinar or event registration, it's a powerful marketing tool that encourages the user to take advantage of a particular offer (I feel like Wikipedia...)

"What about the support of that little extra from the Periglioni house?" you say to me? According to Litmus, the support would be total on all webmails and email software, even if it is necessary to keep in mind that animated gifs do not work on Outlook 07/10/13. BUT BUT BUT (don't go so fast!!!) the first image of your animated gif will still be displayed on this environmentSo don't panic! The message remains clear and understandable, and the notion of a deadline is still present.


"Are you sitting down? Because I have something to ask you and it's not trivial"
"I'm listening"
"Go sit down."

Ace Ventura

You may have guessed it (or not at all, that I can't know actually...) but a dynamic countdown will require some technical conditions:

  • Access to a server to host a php file (and thus a PHP support on this same server)
  • A typeface if you want to use a particular typeface
  • A database (optional, we'll see that later in the evolution of the thing)
  • Software allowing you to modify or create gifs and modify HTML/PHP code

So, ch'bim, let's get to the heart of the matter (always be careful not to make spelling mistakes, a "t" instead of an "f" on some words and the meaning is completely different) : How will we do it?

First of all, and as proposed in the Litmus community article, you can download the zip from this link with all the necessary files. You will find there an example of typography, a gif.php file, a GIFEncoder.class.php file, a php52-fix.php file, as well as an "images" folder. Personal, I propose you the same thing but with a gif.php file commented in French... Which is good enough, is that there are two files that won't even need to be touched : GIFEncoder.class.php and php52-fix.php. Of course, if you want to have a look at it, tinker with it or try to understand something about it, no problem! Just know that I won't talk about the content of these files for the moment, since the countdown can be generated without having to worry about it.

Eeeeeet, what do we do now?
Benny B (B-E, two N, Y-B, my name is Benny B yes you guessed it!)

Next comes the "images" folder: in this folder you will find an image named "countdown.png". This image is only used here as an example. You can then (and you should, by the way, imperative of the subjunctive) modify it to obtain the desired graphics and rendering.

Finally, the gif.php file remains: This is where it all comes into play. So, the solution that everyone likes to adopt to save time is a big copy/paste, then I put it locally on my server and I see if anything happens. I might as well tell you that if you limit yourself to that, you won't get anywhere... Take the time to read what I'm going to detail below, I'm going to try to cover all the important points because I believe that it's by understanding a minimum of things that we get the desired result! (and I didn't work like Ducros for nothing...)

You can now open the gif.php file:

date_default_timezone_set If you are reading this article in French, I don't think you will need to touch this variable. This is simply the time zone we will use for our countdown.

1TP3Picture This is the variable containing the path of the image you are going to modify. This variable and its path (normally always the same) are present three times in the PHP code. It is up to you to modify it accordingly if the path or the name of the image changes.

size The size of the typeface you are going to use on the text of the countdown. This is a font size in points in principle. Feel free to change this variable as you wish!

angle The rotation angle of the text. You can thus decide to assign a tilted text to the countdown (why not I want to say, I've already seen clients ask to create HTML snow on their site, so I'm not that close...). Remember that an angle must be between 0 and 360.

x-offset This is the distance at which the beginning of the text is located in relation to the left border of the image. It is a value in pixels. So feel free to change it to your liking.

y-offset Same as above, except that the position is horizontal and not vertical (I'm sure you guessed it!). It's up to you to change it!

file the path or name of the typeface you wish to use on the text of the count.

color the color of your text to be filled in here in RGB format; What is the RGB format you might ask? Very good question... I don't know. Just kidding: RGB for Red, Green, Blue, is a system of computer coding of colors. By additive synthesis of three primary colors (red, green and blue for those who have not done English LV1) computer screens can thus reconstitute a color close to the material. In other words, this format must contain three values. Any graphics editor should be able to provide you with such values from a hexadecimal code, but if not, here is a tool that might come in handy:

Now that the main adjustments have been made, all that remains is for you to generate and view the image in question. To do so, you can go to VOTRESERVEUR/countdown/gif.php?time=WHEN-YOU-WILL-DECIDE. Or, more simply: in case of a local server for example. On the example I just quoted, I have filled in the following deadline: December 25, 2017 at 00:01. So, when I go to the page concerned, I will have a countdown (as of October 10, 2017, 11:20 a.m.) of 75 days, 14 hours, 40 minutes and 16... 15... 13 seconds... Anyway, you get the idea, everything works properly!

And finally, simply, to be able to display this counter in an email, I will just have to fill this same url as a path of a tag <img>Nothing could be simpler! No no, no need to add a format or an extension like .jpg or .png, you have read well, you will have something like <img src= "«" »>

Well ok, graphically for the moment, I grant you, it's ugly... But I'm not your DA ! It's up to you to see what you want to do with it, and how to adapt it, modulate it, tweak it, fiddle with it to get a good result!

"I think it's time to tell you what I've learned, to draw a conclusion, right?"
Danny Vinyard, American History X

So there you have it, we've seen the worst of it. But does that mean we should stop here? Oh no! When I see this, I have many other ideas that come to mind! In fact, what interests us just as much in this subject is the creation of an image (png, gif or jpeg) in PHP to be able to manage more easily the modification of this image. This is not only an article about countdowns, but more widely about the use of images generated in php (you didn't expect that, did you?)

Push the envelope a little further Maurice: Nothing prevents us from seeing this countdown differently. Let me explain: a countdown is not systematically assimilated to a "time" or to a chronometer effect. It would be quite possible to consider a count of products in stock, to update in real time a rate, a percentage, a number of participants, etc.

Indeed, if our PHP file takes into account a variable in the Database, everything can be possible! Bruno Florence already mentioned the subject in 2013 (that is to say if the man was ahead of his time!). You will have to think about all the technical and graphic aspects of your countdown! I wanted to test a little idea I had in the back of my mind: I have a certain number of products in stock, and I want to create an "emergency" on the remaining reduced stock of this same product...

Here is a small model made in a hurry to illustrate my thoughts:


I have an irresistible urge to manage the content of this email directly in PHP and to think of the number of products available as a countdown! Quite an evolution of our starting point, isn't it?


Well, you should know that it is quite feasible... I will, in PHP, create an image of 600px wide by 600px high, give it a blue background color, a white variable color, and I will add three texts (including a dynamic one, with the value of the remaining products in PHP and drawing directly from the Database)I will place it according to my model, then I will create a small loop in php to display as many times the image of my product as the value indicated in the database...

Rather than give you an exact detail of the properties I will use, I give you a small direct access to my codeit will be easier... This is another gift, you owe me! ???? (and I don't want to hear anything about the slightly pixelated product outlines, you're just spoiled children!)

Do not limit yourself to this simple example, but keep in mind that many "projects" and evolutions are possible. It's up to you to use your imagination, and to propose us, why not, what you have managed to create since this (small) tutorial!

Did you like this article? Share it!

The news

Want to receive the newsletter, invitations to the lives and other news of Badsender by email ?

12 Responses

  1. Hello,

    I also hosted the documents on my server by adding a TIME after the url and it doesn't work either. It seems to me that I read well :).

  2. @Julien, @Clément: Thank you for your feedback, gentlemen! Out of curiosity, did you put the files locally or on a server? Second question (but please don't take it the wrong way ;) ): the date you entered in time is indeed "higher" than the tested day date? Didn't you leave "2017-12-25+00:00:01"?

  3. Hello Thomas,

    It is well hosted on a server and I have put a higher date :).

  4. @Clement: would it be possible to send me the url so I can have a look? Because I've checked the whole thing again, I don't see any particular problem...

  5. It's ok actually, it was a little problem with the police call :)

    Thank you!

  6. Hello Thomas, same as Clement: I hosted the files on a server and I put a higher date. However, when I try to generate the image by calling the php file (my server/countdown/gif.php?time=2018-12-25+00:00:01) I get a nice 404 and the iamge is not generated ?

    Do you have an idea? Have I forgotten something?

    Note: the path is the right one

  7. Thanks Thomas for your precious help! Indeed, the problem came from my server...

  8. @Julien, @Clément: thanks to you! You allowed me to spot an important error! In the gif.php file, the date_default_timezone_set must be Europe/Paris and not Europe/London (otherwise we have an hour difference!) Bravo to you!

  9. Hello everyone, is the script still up to date with the permanent evolutions of ISPs, messaging clients, etc.?

    The fact of calling a PHP file, during a mass campaign, can it cause an overload of the server? And if so, not to display the image in the email?


  10. @Mathieu : the script is still in use : as it's a PHP generated image, it shouldn't be a problem when it comes to ISP and email clients evolutions... On the other hand, your remark about the server overload is quite relevant, it's true that it's better to be sure to be strong enough to support it ! But I'm not expert enough in this field to say... Anyone else?

  11. Hello Thomas, already thank you for this great tutorial! It works well on my side, I am currently setting up one.
    On the other hand 2 small problems that I can't solve, they are related: I put an animated gif in the background, but it is not read, it remains frozen once the php link is launched.
    And the color of the typeface does not change if it is a transparent gif/png. Any idea for a tip on this?
    Thank you!!!

Laisser un commentaire

Your email address will not be published. Les champs obligatoires sont indiqués avec *