Tudor: Showing the Month and Year

The Tudor template has a blog landing page that features a customizable grid of thumbnail image tiles, each linking to a different blog post. This grid acts as visual navigation, allowing visitors to browse through all your posts in one place.

Tudor Blog Cards

Tudor Blog Cards

If you choose Date Style: Callout or Callout Circle, the date of the post will appear as a circle between the thumbnail image and the card below it. The date is displayed as a day and month and cannot be changed using the Style Editor.

However, by adding some javascript, you can display the month and year instead. Even better, the code has been written in such a way that the month names can be changed for different languages.

Tudor Blog Cards after javascript added to show month and year

Tudor Blog Cards after javascript added to show month and year

Add the following code to Settings > Advanced > Code Injection > Page Header:

<script>
  /* Tudor: Script to change day/month on blog cards to month/year */
  /* Put the month values here (in any language) */
  var month=new Array(12);
  month[0]="Jan";  month[1]="Feb";  month[2]="Mar";
  month[3]="Apr";  month[4]="May";  month[5]="Jun";
  month[6]="Jul";  month[7]="Aug";  month[8]="Sep";
  month[9]="Oct";  month[10]="Nov"; month[11]="Dec";
  Y.use('node', 'node-load', function(Y) {
    Y.on('domready', function() {
      Y.all('.dt-published.date-callout').each(
        function() {
           var pdate = new Date(this.getAttribute('datetime'));
           this.setHTML(month[pdate.getMonth()] + " " + pdate.getFullYear());
        }
      );
    }); // Y.on
  }); // Y.use
</script>