In my previous post I fixed the calendar badge to make it work for image-only posts as well. The same issue could also be found in the Archives page. This was also relying on the custom metadata fields month and day.

And as before the fix described here requires the display format for date to be September 24, 2015 (The setting is named ‘How should the date appear on your blog?’ in your Blot.im dashboard).

Update to the templates

In the template (archives.html) the custom metadata fields month and day or not longer used, we now use the standard data field for the h2 and span elements. 1

  <h2 class="archive" data="{{date}}">--</h2>
  <span class="archive" data={{date}}>--:</span> <a class="archive" href="{{url}}">{{title}}</a><br />

Updated jQuery code

Instead of handling each date component separately there is now only one function that will handle all of them in scripts.js. This is now easier since I have moved the information needed to the container div 1

// Set day component on the Archives page
$('span.archive').each(
    function(){
        // Get the date of the post
        var data = $(this).attr('data');

        // Get the day
        var txtDay = '0'+data.substring(data.indexOf(' '),data.indexOf(',')).trim()+':';

        // Update the content
        $(this).text(txtDay.slice(-3));
    }
);

// Set month/year component on the Archives page and make sure on the first of each is visible
var smd_divider = "";
$('h2.archive').each(
    function(){
        // Get the date of the post
        var data = $(this).attr('data');

        // Determine the date components
        var txtHeading = data.substring(0,data.indexOf(' ')) + data.substring(data.indexOf(',')+1);

        if ( smd_divider != txtHeading ) {
            smd_divider = txtHeading;
            $(this).text(txtHeading);
        } else {
            $(this).toggle();
        }
    }
);