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
No Comments & Reviews