The problem is when you use feeds that are updated frequently, Last.FM listened to tracks and uploading whole sets of photos, it floods your action stream with so many entries that other things can get lost in the noise. Now if you're like me and listen to music all day every day, then you would normally just turn off something like the last.fm feeds.
However, wouldn't it be nice to capture and show that information in a way that doesn't compromise the importance of other items in your action stream?
The solution collates entries that are likely to be frequent in a single day (photos and tracks) and adds that to the end of the day's stream. The method is made a lot easier by the fact the action stream plugin has been built to associate similar stream types, so the solution below won't just collate your Flickr photos (despite the icon, a camera may be a better option) but all photos you post to various services. Also if additional photo based streams are added in the future, you won't need to change your code at all.
The first thing you will need is the MooTools files required for the reveal, which you should probably get off the official site, but there's nothing stopping you taking both the files from me. Save these down to the root of your site, you'll need them in a moment.
On your Action Strem index template, locate the <mt:setvarblock name="html_head"> section and add the following to it:
<script type="text/javascript" src="/mootools-1.2-core-yc.js"></script>
<script type="text/javascript" src="/mootools-1.2-more.js"></script>
Now at the end of your <mt:dateheader> block, you need to add the following:
<mt:setvarblock name="lastfmlist"></mt:setvarblock>
<mt:var name="lastfm-counter" value="0" />
<mt:setvarblock name="photolist"></mt:setvarblock>
<mt:setvarblock name="photolist_more"></mt:setvarblock>
<mt:var name="photo-counter" value="0" />
This basically clears the variables ready for the next day's list.
And now the business end of the process. This determines the stream type and if it is a "tracks" or "photos" entry, adds it to the day's list. It also separates out the first 5 photos to create a nice pretty line of thumbs to show for that days photos. Add the following just before the "<li class="hentry...." line:
<mt:if name="stream_type" eq="tracks">
<mt:setvarblock name="lastfmlist">
<li class="hentry service-icon service-lastfm"><span class="stream-meta">@ <mt:StreamActionDate format="%H:%M"></span> <a href="<$MTStreamActionURL$>"><$MTStreamActionVar name="title"$></a></li>
<mt:var name="lastfmlist">
<mt:SetVar name="lastfm-counter" op="++" />
</mt:setvarblock>
<mt:elseif name="stream_type" eq="photos">
<mt:if name="photo-counter" lt="5">
<mt:setvarblock name="photolist">
<div class="photobox_surround">
<div class="photobox" style="background-image: url(<mt:var name='thumb_url'>);">
<a href="<$MTStreamActionURL$>" target="_blank"> </a>
</div>
</div>
<mt:var name="photolist">
</mt:setvarblock>
<mt:else>
<mt:setvarblock name="photolist_more">
<div class="photobox_surround">
<div class="photobox" style="background-image: url(<mt:var name='thumb_url'>);">
<a href="<$MTStreamActionURL$>" target="_blank"> </a>
</div>
</div>
<mt:var name="photolist_more">
</mt:setvarblock>
</mt:if>
<mt:SetVar name="photo-counter" op="++" />
<mt:else>
You also then need to add a </mt:if> just after the last "</li>".
Nearly there! Now we need to actually output the list for the day, so we add the following to the top of the <mt:datefooter> section:
<mt:if name="lastfmlist">
<li class="hentry service-icon service-lastfm">
<h4 class="trigger"><span class="stream-meta">on <mt:StreamActionDate format="%d/%m"></span> listened to <a><mt:var name="lastfm-counter" /> songs</a></h4>
<div class="toggle">
<ul class="lastfmdaily">
<mt:var name="lastfmlist">
</ul>
</div>
</li>
</mt:if>
<mt:if name="photolist">
<li class="hentry service-icon service-flickr">
<h4><span class="stream-meta">on <mt:StreamActionDate format="%d/%m"></span> posted <mt:var name="photo-counter" /> photos</h4>
<div class="photodaily">
<mt:var name="photolist">
<mt:if name="photolist_more">
<div class="toggle">
<mt:var name="photolist_more">
</div>
</div>
<h4 class="trigger"><a>See More...</a></h4>
<mt:else>
</div>
</mt:if>
</li>
</mt:if>
This just checks if there are photos or tracks and if so, wrap them up and output them at the end of the day.
The last bit of code for the index template is the mootools accordian stuff to expand the list on clicking, add this just before the footer.
<script type="text/javascript">
/* <![CDATA[ */
var trig3 = $$('.trigger');
var togg3 = $$('.toggle');
var ac3 = new Accordion(trig3, togg3, {
opacity : false,
start: 'all-close',
alwaysHide: true
});
/* ]]> */
</script>
And finally, the CSS. Just tack this on the end of your stylesheet and you're good to go.
h4.trigger a {
cursor: pointer;
}
div.photodaily {
width: 570px;
}
div.photobox {
height: 75px;
width: 75px;
margin: 5px;
background: #fff no-repeat center center;
}
div.photobox a {
display: block;
height: 75px;
width: 75px;
}
div.photobox_surround {
float:left;
border: #ccc 1px solid;
margin: 5px;
}
div.toggle {
clear: both;
}
Publish the template and you should have nicely collated action streams.UPDATE: For the sake of reference, my main index template is here with all the changes mentioned in these tips.







Hi Richard!
A perfect approach and it is a pleasure to read a native speaker's words.
PS I borrowed the “cursor: pointer;” CSS since my trigger showed a text mark.
Hey great tutorial. How would i do this for my twitter and digg streams - they get VERY busy in my actionstream.
Thanks Phillip!
The easiest way to collate other streams is to duplicate what is in the code for lastfm, so in code sample 2 you add:
<mt:setvarblock name="twitterlist"></mt:setvarblock>
<mt:var name="twitter-counter" value="0" />
You'll need to add another mt:elseif section for tweets and the output into the mt:datefooter.
It may be of benefit to poublish my entire template here with some comments put through it so it makes more sense!
For the benfit of anyone else reading this, here is an example of adding another service to the ones that are collated, based on an original template (changes marked in red):
http://www.richardbenson.co.uk/projects/me.dm/add_twitter.htm
Hi Richard,
I added all the above code and checked out your add-twitter page, and the short version of the name won't work for me. How do you get the @ time instead of your name on actions that you haven't set variable blocks for?
Hi Toni,
That trick is not included in the examples here, I based them on the default code. It's quite a simple little trick actually, just replace the relevant lines with this:
<span class="stream-meta">@ <mt:StreamActionDate format="%H:%M">
<mt:StreamAction regex_replace="$name_regex","">
The first does the date and the second removes your name from the stream. This is in my main template link in the "Update" section if you would like to see it in context.
Thanks for the link to your main index page Richard, it will give me a better understanding of what goes where, and where I've gone wrong.