topic Re: Dynamic GIF Countdown based on Date Picker field in CMS Development

Dynamic GIF Countdown based on Date Picker field

PTata — Mon, 02 Sep 2024 12:24:19 GMT

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:

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:

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.

Re: Dynamic GIF Countdown based on Date Picker field

GRajput — Mon, 02 Sep 2024 14:29:14 GMT

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!

Re: Dynamic GIF Countdown based on Date Picker field

PTata — Mon, 02 Sep 2024 14:57:42 GMT

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] %} <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%">

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

Re: Dynamic GIF Countdown based on Date Picker field

GRajput — Tue, 03 Sep 2024 12:14:30 GMT

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!

Re: Dynamic GIF Countdown based on Date Picker field

PTata — Tue, 03 Sep 2024 16:00:45 GMT

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.

Re: Dynamic GIF Countdown based on Date Picker field

GRajput — Wed, 04 Sep 2024 08:50:09 GMT

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!