Knowledge Drop
Last Tested: Jul 8, 2020
Objective:
Imagine we have time value in seconds and we want to display as mm:ss in the front end. For instance, 123 seconds should be 2.03. We can do this using Liquid!
Example:
Here, we are assuming that we have 123 seconds.
html: {% assign seconds=value | modulo: 60 %}
{{ value | divided_by: 60 | floor }}:{% if seconds < 10 %}0{% endif %}{{ seconds }} ;;
Here, we are first assigning the variable seconds to our value.
Then, in the first part for "minutes", before the colon, we are taking the floor of given value (for eg: 123/60=2).
In the second part for "seconds", after the colon, since we've assigned our value to seconds, we are then taking the modulo of the value (for eg: 123 mod 60=3)
The tricky part here is that we want the final output to show 2.03 rather than 2.3, and this needs to be done for all the seconds that are less than 10. So, to incorporate this logic, we have used ':{% if seconds < 10 %}0{% endif %}{{ seconds }}', which says that if seconds is less than 10, add a 0. Otherwise, just put the value of seconds.
P.S. Ensure the raw value of seconds are rounded.
LinkedIn
Twitter