As noted in my previous post the way the calendar badge is implemented it would not work correctly for image-only posts, since for these types of post you cannot specify the custom metadata required. This needed to be fixed.

By changing the structure of the HTML templates and rewriting the jQuery code the calendar badge will now work by just using the standard date field. It does need to be using the display format September 24, 2015 (The setting is named ‘How should the date appear on your blog?’ in your Blot.im dashboard) for the code to work correctly. Something to keep in mind if you wish to implement this in your blog and your are using a different display format.

And a stated before feel free to implement it in your own blog. I would appreciate a tweet on @drexore when you have implemented it for your blog.

Enjoy!

Update to the templates

In the templates (entries.html and entry.html) the custom metadata fields month and day or not longer used, we now use the standard data field on the div containing (line 2) the individual span elements. 1

<div class="left margin">
  <div class="calendar" data="{{date}}">
    <span class="month"> </span>
    <span class="day"> </span>
    <span class="year"> </span>
  </div>
</div>

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

// Calendar badge related code
$('div.calendar').each(
    function(){
        // Get the date of the post
        var data = $(this).attr('data');

        // Determine the date components
        var txtMonth = data.substring(0,3);
        var txtDay = data.substring(data.indexOf(' '),data.indexOf(','));
        var txtYear = data.substring(data.indexOf(', ')+1);

        // Update the content of the span elements
        $(this).children('.month').text(txtMonth);
        $(this).children('.day').text(txtDay);
        $(this).children('.year').text(txtYear);
    }
);