Collating Action Streams

Richard Benson13 May 2010MT Tipscomments
Yves Luther has come up with another great idea for action streams, however his solution didn't quite fit with what I expected it to do, plus it doesn't "strap on" to the default action stream templates very well.

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?
This time you won't need to edit any Perl, and you only need to edit one template and one stylesheet.

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{?D:PageBody?}gt;"><$MTStreamActionVar name="title"{?D:PageBody?}gt;</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{?D:PageBody?}gt;" target="_blank">&nbsp;</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{?D:PageBody?}gt;" target="_blank">
&nbsp;</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.
comments powered by Disqus
Support Ticket
Remote Support
Support
clever girl