---
title: "Twig Macro convert seconds to hh:mm:ss and reverse"
date: 2019-01-12T14:35:00-05:00
author: cc_admin
canonical_url: "https://caffeinecreations.ca/blog/twig-macro-convert-seconds-to-hhmmss/"
section: Blog
---
![Code](https://caffeinecreations.ca/uploads/blog/_1920x660_crop_center-center_none_ns/code.jpg)

- [Code](https://caffeinecreations.ca/blog/category/code/), [Tutorial](https://caffeinecreations.ca/blog/category/code/tutorial/), [CraftCMS](https://caffeinecreations.ca/blog/category/craftcms/), [Craft Tips](https://caffeinecreations.ca/blog/category/craftcms/craft-tips/)

# Twig Macro convert seconds to hh:mm:ss and reverse

I'm working out the last bit of front end work on the podcast I am launching shortly called [Website 101 Podcast](http://website101podcast.com/). On the front end of the site I want to output the length of each episode in human readable form like 47:24 However itunes requires your feed to have the &lt;itunes:duration&gt; in seconds.

Instead of having two fields for episode length, one seconds and the other human readable, I created a simple macro that does this for me.

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{% macro secondsToMinutes(seconds) %}
 
  {# set hours minus minutes/seconds #}
  {% set hours = seconds / 3600 % 60 %}

  {% if hours  < 1 %}
    {# set hours to nothing #}
    {% set hours = null %}
  {% else %}
    {# output hours with a colon: #}
    {% set hours = hours|number_format ~ ':' %}
  {% endif %}
  
  {# set minutes remain but no seconds and with a colon #}
  {% set minutes = seconds / 60 % 60  ~ ':' %}

  {# set seconds but no minutes or hours #}
  {% set seconds = seconds % 60 %}
  {% if seconds < 10 %}
    {# add a leading zero if seconds are less than 10 #}
    {% set seconds = '0' ~ seconds %}
  {% endif %}

  {{ hours }}{{ minutes}}{{ seconds }}

{% endmacro %}" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```twig

      {% macro secondsToMinutes(seconds) %}
 
  {# set hours minus minutes/seconds #}
  {% set hours = seconds / 3600 % 60 %}

  {% if hours  < 1 %}
    {# set hours to nothing #}
    {% set hours = null %}
  {% else %}
    {# output hours with a colon: #}
    {% set hours = hours|number_format ~ ':' %}
  {% endif %}
  
  {# set minutes remain but no seconds and with a colon #}
  {% set minutes = seconds / 60 % 60  ~ ':' %}

  {# set seconds but no minutes or hours #}
  {% set seconds = seconds % 60 %}
  {% if seconds < 10 %}
    {# add a leading zero if seconds are less than 10 #}
    {% set seconds = '0' ~ seconds %}
  {% endif %}

  {{ hours }}{{ minutes}}{{ seconds }}

{% endmacro %}
    
```
  
```

The episodes in my podcast should be shorter than an hour. But just in case they go long I made sure that the macro will output hours as well.

In the template where you want your human readable time you place the following code where *entry.showTime* is the craft fieldname I used. This will convert `2844` to 47 minutes and 24 seconds like this `47:24`

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{{ macros.secondsToMinutes(entry.showTime) }}" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```twig

      {{ macros.secondsToMinutes(entry.showTime) }}
    
```
  
```

#### And The Reverse

After working with this for a little bit, I realized that when looking at the MP3 files I have for the podcast I can immediately see the hh:mm:ss but not complete seconds and had to manually convert to seconds in order to fill out the publish screen. This wasn't saving me any work. So now I've created another macro to reverse the process.

In my front end templates I'll use `{{ entry.showTime }}` and display what I type in the field. However in my RSS template I'll do the following

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{% macro timeToSeconds(time) %}
{# use spaceless to remove any whitespace #}
{% spaceless %}
  {# if time is less than 1 hour i.e. 45:17 #}
  {% if time|length > 5 %}

      {% set hours = time|split(':')[0] %}
      {% set minutes = time|split(':')[1] %}
      {% set seconds = time|split(':')[2] %}

  {% else %}
  {# time is longer than 1 hour i.e. 1:12:32 #}
      {% set hours = "0" %}
      {% set minutes = time|split(':')[0] %}
      {% set seconds = time|split(':')[1] %}
  {% endif %}
  
  {% set totalSeconds = (hours * 3600) + (minutes * 60) + seconds %}
    {{ totalSeconds }}
{% endspaceless %}
{% endmacro %}" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```twig

      {% macro timeToSeconds(time) %}
{# use spaceless to remove any whitespace #}
{% spaceless %}
  {# if time is less than 1 hour i.e. 45:17 #}
  {% if time|length > 5 %}

      {% set hours = time|split(':')[0] %}
      {% set minutes = time|split(':')[1] %}
      {% set seconds = time|split(':')[2] %}

  {% else %}
  {# time is longer than 1 hour i.e. 1:12:32 #}
      {% set hours = "0" %}
      {% set minutes = time|split(':')[0] %}
      {% set seconds = time|split(':')[1] %}
  {% endif %}
  
  {% set totalSeconds = (hours * 3600) + (minutes * 60) + seconds %}
    {{ totalSeconds }}
{% endspaceless %}
{% endmacro %}
    
```
  
```

And then in the RSS template use this:

```

    <button class="absolute flex flex-col right-4 top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="<itunes:duration>{{ macros.timeToSeconds(entry.showTime) }}</itunes:duration>" x-data="">
      <svg class="h-6 w-6" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>

          <div class="sr-only">
            Copy to clipboard
          </div>
    </button>
    ```xml

      <itunes:duration>{{ macros.timeToSeconds(entry.showTime) }}</itunes:duration>
    
```
  
```

## Other Posts You May Like

[![Date Bug Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/bug.jpg)### Date Bug](https://caffeinecreations.ca/blog/date-bug/)

[![Language Switcher for Craft 3 Thumbnail](https://caffeinecreations.ca/uploads/hero/_680x320_crop_center-center_65_none_ns/flags.jpg)### Language Switcher for Craft 3](https://caffeinecreations.ca/blog/language-switcher-for-craft-3/)

[![Google Map with no plugin for your Craft CMS website Thumbnail](https://caffeinecreations.ca/uploads/hero/_680x320_crop_center-center_65_none_ns/1469/simple-map.jpg)### Google Map with no plugin for your Craft CMS website](https://caffeinecreations.ca/blog/google-map-with-no-plugin-for-your-craft-cms-website/)
