Is it possible to group Tumblr posts by day?

250 Views Asked by At

Is it possible to hack the date tag on a Tumblr page to display posts like this:

Today

  • Post 1
  • Post 2
  • Post 3

Yesterday

  • Post 4
  • Post 5
  • Post 6

Monday

  • Post 7
  • Post 8
  • Post 9

'Today' and 'Yesterday' can be replaced by 'Wednesday' and 'Tuesday' if need be.

1

There are 1 best solutions below

0
fregante On

Tumblr's templating does not contemplate grouping. The only way to do it is to manually (i.e. via javascript) group the posts and create headlines between each group.

Assuming jQuery for brevity:

var days = {};

//group posts by day
$('.post').each(function (i, el) {
    //get timestamp from post
    var timestamp = new Date($(el).data('timestamp')*1000);

    //set to midnight of day
    timestamp.setHours(0,0,0,0);

    //create array for each day if it doesn't already exist
    days[timestamp] = days[timestamp] || [];

    days[timestamp].push(el);
});

//now "days" will be an array of days each containing an array of posts
//print the day of the week above the first post of each day
var dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$.each(days, function (dayTimestamp, dayPosts) {
    //create headline with day of the week in it
    var $h = $('<h1>').text(dayNames[dayTimestamp.getDay()]);

    //add it before the first post of the day
    $h.insertBefore(dayPosts[0]);
});

And in your template, make sure you have this for each post:

<div class="post" data-timestamp="{Timestamp}">...content...</div>

Untested code but it should get you started