Dynamic GIF Countdown based on Date Picker field

2 Sep, 2024 | Admin | No Comments

Dynamic GIF Countdown based on Date Picker field

I’m working on embedding an animated GIF into an email that displays a countdown timer. The static version works perfectly using the following HTML code:

 

<p style=”text-align:center”>
<img style=”background-color:#f8f9fa; border:hidden;”
src=”https://www.py.it/countdown-to-2024-09-10.gif”
alt=”py”
rel=”noreferrer”
width=”40%”>
</p>

 

This shows a countdown to September 10, 2024. However, I encountered a problem when trying to make the countdown dynamic based on a date picked from a date picker field linked to a contact’s birthday. The modified code is:

 

<p style=”text-align:center”>
<img style=”background-color:#f8f9fa; border:hidden;”
src=”https://www.py.it/countdown-to-{{contact.birthday}}00:00:00.gif”
alt=”py”
rel=”noreferrer”
width=”40%”>
</p>

 

The contact.birthday field outputs the date in the dd/MM/YY format (e.g., 10/09/24 for September 10, 2024), which doesn’t work with the URL structure my GIF requires.

I’ve attempted several methods to format the date correctly, including:

{% set date_parts = contact.birthday.split(‘/’) %}
{% set year_full = “20” + date_parts[2] %}
{% set new_date = year_full + “-” + date_parts[1] + “-” + date_parts[0] %}

 

 

 

And using filters like:

src=”https://www.py.it/countdown-to-{{ contact.birthday|date(‘Y-m-d’) }}00:00:00.gif”

 

 

 

or:

src=”https://www.py.it/countdown-to-{{ contact.birthday|dateformat(‘%d/%m/%Y’, ‘%Y-%m-%dT%H:%M:%S’) }}.gif”

 

 

 

None of these attempts have been successful. I would appreciate any insights or suggestions on how to correctly format the date or alternative approaches to dynamically embed a countdown GIF based on a date field.

Thank you.

Write Reviews

Leave a Comment

Please Post Your Comments & Reviews

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

No Comments & Reviews