Nunjucks Code to Convert Number to its Ordinal Number Postfixed with st nd rd th

Nunjucks code to convert a number to its Ordinal postfixed with st nd rd th

First of all, I did not know this was called an Ordinal Number until I started looking for code examples. I was searching for strings like how to append st nd rd th to a number. Once I discovered what I was looking for was an Ordinal Number that made it easier to find code examples. Most of the code makes use of the % division remainder, which is exactly what you think it is: After you divide a number what is left over is the remainder. Example 42 / 10 = 4 with a remainder of 2 so this will return the Ordinal 42nd . Another example 3/10 = 0 with a remainder of 3 which will return the ordinal of 3rd

ordinal number definition

I looked all over for Nunjucks code to convert an integer to its ordinal for example to convert from 1 to 1st 15 to 15th 92 to 92nd etc. I found other examples in other languages that used similar logic, but could find no Nunjucks code for chaning to the ordinal, I have been using Nunjucks alot in my Eleventy templates. Below is the Nunjucks getOrdinal macro I wrote and put into the file _convertNumberToOrdinal.njk which is located in the _macros folder under the _include folder.

So you don't have to reinvent the wheel, here is the Nunjucks Ordinal convert Code

{% macro getOrdinal(number) %}  {# pass in a number and change that number to its
  ordinal, for example    11 = 11th    42 = 42nd created by Ed Hendrickson Jr. Ames Iowa 9/10/2022 #}

  {% set j = number % 10 %} {# this is not divided by this is the
    division remainder - very cool added 9/10/2022 #}
  {% set k = number % 100 %}

  {% if j == 1 and k != 11 %}
    { % set ordinal = number + "st" %}
  {% elseif j == 2 and k != 12 %}
    { % set ordinal = number + "nd" %}
  {% elseif j == 3 and k != 13 %}
    { % set ordinal = number + "rd" %}
  {% else %}
    { % set ordinal = number + "th" %}
  {% endif %}

  {{ordinal}}  {# output the ordinal #}

{% endmacro %}

Put this next line of Nunjucks code, into your file, usually near the top, into the file were you want to call and use the macro.

{%- from "_macros/_convertNumberToOrdinal.njk" import getOrdinal  -%}
{# Eleventy looks in _include for macros so specify the _macros folder under _includes folder.
  This macro outputs the ordinal of the number for example 1 = 1st  5 = 5th 42 = 42nd Ed Hendrickson 9/10/2022 #}

The above line of Nunjucks declares and tells what filename to look for to find the macro to import from. Eleventy (or maybe it is Nunjucks) will look in the _include folder by default, so if you want to use a _macros folder you need to specify the _macros folder and not the _include folder if you have it nested there.

This code snippet shows how to call the getOrdinal macro.

<a href="{% if newsletter.filename != 'membership.html' %}{{newsletter.year}}{% endif %}/{{newsletter.filename}}" target="_blank">
  <label class="panel-block is-size-6 is-size-7-mobile">
    {# add this line to the end of the descriptions #}
    <span class="panel-icon">
      <i class="fa-regular fa-newspaper"></i>
    </span>
    <span class='has-text-weight-medium'>
    {{ getOrdinal(numitems) }}
    <span class='ahs'>AHS</span>AA newsletter published
  </span>
  </label>
</a>

output would be something like ...

51st AHSAA newsletter published

See getOrdinal macro in use here