Translatable, custom dates in Twig templates of Drupal 8

Tamás Hajas
Published in
4 min readOct 17, 2016

--

Displaying different dates here and there in a site is a common task. Let’s see some examples how to handle it in Drupal 8 Twig!

During this tutorial we will work in the page.html.twig file. Of course I do not have to say that you have to have your own custom theme and your own page template there… :)

Display copyright message with auto updating end date

Let’s start with a simple task: display a copyright message in which the end date updates automatically. All we have to do is adding this short code to the template.

Let’s see what happens here! The first part is just a string to which I added the Drupal specific t filter (could be trans too). It makes the string translatable through the admin interface.

In the second part I used the now keyword which is supported by the strtotime function of PHP. Then I added the date() filter of Twig and set the format — using date syntax of PHP — to year only. And because it is year only it does not need to be translated.

Display the current date

Imagine that your customer wants the current date to be shown in the site header. It would be easy using the same technique as above. We should only change the format to include month and day too in the date() filter.

But what happens if we build a multilingual site? Then we have to deal with the different date formats of the different languages as well. This makes our life and our code a little bit more complicated:

Let’s analyze it step by step again!

First I created a new variable current_date using Twig’s set tag and I assigned the actual date (and time) as the value to it using the date() function this time instead of the date() filter.

“Wait a minute, man! You did not pass any argument to the date() function!” — you could say. Yes it is true. But I didn’t have to, because if no argument is passed, the function returns the current date.

Thereafter our ol’ friend, the date() filter returns, and in this case we format the data with it as a Unix timestamp. This is needed because the second filter Drupal 8’s own format_date() works with timestamp only. Its job is to transform the input to a date format which exists in Drupal. The date format can be defined by the system, a module or the administrator and we can choose it providing its machine name as an argument to the filter.

Now the variable is all set up let’s display the value of it! When we want to make a block of text — which includes variables — translatable it has to be surrounded by the trans and endtrans tags.

After the variable there are two new filters. The first is a Drupal specific one again: the placeholder. If we wouldn’t use it, all new dates would generate a new translatable string.

I do not know the reason, but the placeholder filter (or more precisely the invoked drupal_placeholder() function) makes the content display as emphasized text. That is why we need the second filter striptags. It “strips SGML/XML tags and replaces adjacent whitespace by one space”.

Display node published date and updated date

Let’s say that our customer wants the published date and the updated date of nodes displayed above the content title in full node view. Knowing and understanding the previous “current date” example it won’t be tricky. Only a small modification is needed.

So it is almost the same as before. There are just three things to mention.

First: we do not need the date() function, because we are working with Drupal data now. If we were in node.html.twig, we may use the date variable which displays a themed “creation date” field. But I do not know an equivalent for “updated date” and we are in page.html.twig. Thus we have to use node.created.value and node.changed.value.

Second: the dates don’t need to be transformed to timestamp because Drupal uses that format already.

Third: there must be an if statement around the code block to check if created and updated date information is available. Drupal provides this data on node pages only and without the check all other pages (eg. frontpage, user login, any views list etc.) would break.

Want more?

I’ll talk about Short twig recipes for Drupalers — like these — at Drupal Iron Camp in Prague at the end of November, 2016. Come and let’s “cook” together! And / or check my example repo!

--

--

Tamás Hajas
Integral Vision

Dad. Husband. Guitar Player. Front-end Developer.