Varying display of Action Streams based on content

Richard Benson13 May 2010MT Tipscomments
Following on from my last post about combining Action Stream data with entries (which has been superceded by an offical MT post and plugin from one of their devs), the next thing to do with Action Streams is to change their appearence based on their content/source.

The mechanisms to do this are all included in the plugin, but require a little tender love and care to get the desired effect.  Here is how I did it.
The template code is made up of two parts, the bit that works out what extra content there is, and the bit that displays it.  Different action streams have different extra parameters, so you need to cope with this, and the plugin just throws a wobbly if you try and get a tag that's not appropriate to the stream you are reading.  As such the first test is to determine the type of stream:
 <mt:setvarblock name="stream_service"><mt:var name="service_type"></mt:setvarblock>
Pretty simple... Now the next logical step is to grab the relevent extra info.  I'm using just two fields, "stream_description" and "stream_title" then using CSS to change how they appear based on the service.  This example copes with Steam, Google Reader and del.icio.us (they're the ones I use) but can easily be adapted to any of the streams with a bit of poking in the code for the extra info they grab.


<mt:if name="service_type" eq="steam">
<mt:setvarblock name="stream_title"><$MTStreamActionVar name="title"{?D:PageBody?}gt;</mt:setvarblock>
<mt:setvarblock name="stream_description"><$MTStreamActionVar name="description"{?D:PageBody?}gt;</mt:setvarblock>
<mt:elseif name="service_type" eq="googlereader">
<mt:setvarblock name="stream_description"><$MTStreamActionVar name="annotation"{?D:PageBody?}gt;</mt:setvarblock>
<mt:elseif name="service_type" eq="delicious">
<mt:setvarblock name="stream_description"><$MTStreamActionVar name="annotation"{?D:PageBody?}gt;</mt:setvarblock>
</mt:if>

This code will break on the next loop, because the variables are not getting reset each time, so you need to precede that with a blank setvar for each of the variables you add just after the "stream_service" set var:

<mt:setvarblock name="thumb_url"><mt:StreamActionThumbnailURL></mt:setvarblock>
<mt:setvarblock name="stream_title"></mt:setvarblock>
<mt:setvarblock name="stream_description"></mt:setvarblock>
So now all that's left is to display.  This is made up of two parts, the actual HTML output and the CSS.  For the HTML just a few amendments to your basic action stream code are required.  Add the following after your "<mt:StreamAction>" line.

<div class="stream-extra-description">
<mt:if name="thumb_url">
<div class="stream-extra-thumbnail">
<a href="<$MTStreamActionURL{?D:PageBody?}gt;" target="_blank"><img src='<mt:var name='thumb_url'>' /></a>
</div>
</mt:if>
<mt:if name="stream_description">
<mt:if name="stream_title">
<h3><mt:var name='stream_title'></h3>
<br />
</mt:if>
<h5><mt:var name='stream_description'></h5>
</mt:if>
</div>

All that's left to finish this off is your CSS.  The following is just an example, and I would appreciate it if it was changed before being used (so that it doesn't look too much like my site!) but the Steam one is a (near as) exact replica of the listing on the actual Steam site.

.service-googlereader h5, .service-delicious h5 {
margin-top: 5px;
margin-bottom: 5px;
padding: 10px 10px 10px 10px;
border: 1px dashed #ccc;
width: 500px;
font-style: italic;
}

.service-steam .stream-extra-description {
margin-top: 5px;
background-color:#4F4F4E;
height:62px;
padding-left:84px;
padding-top:10px;
position:relative;
width:400px;
}

.service-steam .stream-extra-description h3 {
color:#9DC34C;
display:inline;
font-family:arial,helvetica,tahoma,trebuchet ms,sans-serif;
font-size:18px;
font-weight:normal;
margin:0pt;
padding:5px 0pt 0pt;
}

.service-steam .stream-extra-description h5 {
color:#C2C2C2;
font-family:tahoma,helvetica,arial,trebuchet ms,sans-serif;
font-size:11px;
font-weight:bold;
margin:0pt;
padding:0pt 0pt 0pt 1px;
}

.service-steam .stream-extra-thumbnail {
height:64px;
left:4px;
margin:0pt;
padding:2px;
position:absolute;
top:2px;
width:64px;
}

.service-youtube .stream-extra-thumbnail {
border: 1px solid #AE1B13;
width: 128px;
padding: 0;
}

And that should be that, as more and more action streams become available it will become very easy to make your MT site a full catalog of your activity on the web.

UPDATE: I had forgotten that I'd updated the del.icio.us definition in the plugin's perl, so if you do want to use the del.icio.us examples you will need to make some amendments to /plugins/ActionStreams/config.yaml.

First add this at line 543:

            fields:
                - annotation

Then at line 553 add this:

                    annotation: description/child::text()
comments powered by Disqus
Support Ticket
Remote Support
Support
clever girl