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

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. However, 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 (https://motionmailapp.com/, https://www.sendtric.com/, https://countdownmail.com/). 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: https://htmlcolorcodes.com/fr/

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: https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01 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="https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01">

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'll be easier... It's one more gift, and now 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!