Dynamic GIF Countdown based on Date Picker field

Develop, Build & Integrate CMS Development
1

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.

2

Hi @PTata

The issue is how you have used the split filter. The correct syntax is {% set date_parts = module.date_field|split(‘/’) %}. Also even after fixing the filter, the current output is returning null values.

I modified your code little bit and I think it is giving the correct output.

Here is the modified code:

{% set date_parts = module.date_field|split('/') %}
{% set new_date = date_parts[0] %}

{{ new_date }} You can directly call the date_parts but output contains [] brackets as its an array.

I hope this will help you out. Please mark it as Solution Accepted and Upvote to help another Community member.
Thanks!

3

Hello, thank you for the response, but the problem persists.

When running the code:

{% set date_parts = contact.bday_date_comunication|split('/') %}
{% set new_date = date_parts[0] %} 
 <p style="text-align:center">
 <img style="background-color:#f8f9fa; border:hidden;" 
 src="https://www.py.it/countdown-to-{{ new_date }}00:00:00.gif" 
 alt="py" 
 rel="noreferrer" 
 width="40%">
 </p>

The link that gets created is:
https://www.py.it/countdown-to-12/09/2400:00:00.gif

4

Hi @PTata

I tried this again with a date picker field and it is working fine. I’m unbale to replicate this issue. You are using a contact property, maybe it has something to do with it.

I hope this will help you out. Please mark it as Solution Accepted and Upvote to help another Community member.
Thanks!

5

I found out something strange.

I don’t know why, but even if contact.bday_date_comunication is a date picker field, once I call it from html and I use |pprint to print its type, it outputs (string). But the split function does not work. Don’t know what else I could try.

6

Hi @PTata

Rather than a split filter, I would suggest a datetimeformat filter and set the format as per your need.

|datetimeformat('%Y-%m-%d')

I hope this will help you out. Please mark it as Solution Accepted and Upvote to help another Community member.
Thanks!