Jul 21

Hacking Roller Templates : Tagging and Bookmarks   Posted by sharps, tagged with bookmark digg furl hacking roller simpy

I'm sharing some my experiences of hacking Roller templates in support of The Aquarium. Previous entries in the series :

• An Introduction
• Category Chooser Pulldown

Something I did recently was tidy up the _day template; I replaced some of the text links with icons and added icons for sending an entry to the reader's favourite social bookmarking service. Here's what the icons look like :

From left to right : del.icio.us, digg, Furl, simpy, Add or view comments and Edit the entry.

The comment and edit icons came from the Silk icons collection - which are very neat and very free.

OK, here's the code behind the icons. The tough part was understanding the request formats for each particular service - none of them are well documented so I had to hunt around a fair bit; which means youwon't have to (unless they change).

1  #macro ( entryButtons $entry )
2
3     #set ( $IMAGES = "http://blogs.sun.com/roller/resources/theaquarium/" )
4
5     #set ( $entryURL = "$absBaseURL/page/$userName?anchor=$entry.anchor" )
6     #set ( $commentCount = $pageModel.getCommentCount($entry.id) )
7
8     #if ( $commentCount == 1 )
9        #set($numCommentsStr="1 Comment")
10       #set($commentIcon="commentAdded.gif")
11    #elseif ($commentCount > 1)
12       #set($numCommentsStr="$commentCount Comments")
13       #set($commentIcon="commentAdded.gif")
14    #else
15       #set($numCommentsStr="No Comments")
16       #set($commentIcon="comment.gif")
17    #end
18
19    #set ( $catname = $entry.Category.Name )
20
21    <div class="ta-entry-footer">
22
23       <a href="http://del.icio.us/post?url=$entryURL;title=$entry.title">
24          <img src="$IMAGES/delicious.gif" title="Post to de.licio.us"></a>
25
26       <a href="http://digg.com/submit?phase=2&url=$entryURL&title=$entry.title">
27          <img src="$IMAGES/digg.png" title="Digg this entry"></a>
28
29       <a href="http://www.furl.net/storeIt.jsp?t=$entry.title&u=$entryURL=$entry.anchor">
30          <img src="$IMAGES/furl.png" title="Save to furl"></a>
31 
32        <a  href="http://www.simpy.com/simpy/LinkAdd.do?title=$entry.title&href=$entryURL=$entry.anchor">
33          <img src="$IMAGES/simpy-icon-16x16.png" title="Save to Simpy"></a>
34
35       <a href="$entryURL#comments">
36          <img src="$IMAGES/$commentIcon" title="$numCommentsStr"></a>
37
38
39       #if ($pageHelper.isUserAuthorizedToEdit())
40          <a href="$pageHelper.getEntryEditUrl($entry)">
41             <img src="$IMAGES/page_white_edit.png" title="Edit entry"></a>
42       #end
43
44    </div>
45 #end

OK, some of this requires a bit of an explanation, the macro takes one argument - the current $entry.

Lines 3-6 just define some convenient vars. to make the code a little less unreadable.

Lines 8-17 uses the comment count of the current entry to determine which icon to use (there's a different icon if comments already exist) as well as set the floatover text (which indicates the number of comments).

Lines 23-33 display the icons and form the URLs for each service - typically each service has a post / submit method followed by a title and URL parameter.

Lines 39-41 check to see if the current logged in user is authorized to edit entries and if so displays the edit button and link.

I also apply the following style :

.ta-entry-footer {
        margin: 15px 30px; 
        padding-bottom: 15px; 
        border-bottom: 5px 
}

That's it.