Displaying a webmentions facepile

Using a common design pattern to keep things tidy

July’s release of the free Blog add-on for Perch and Perch Runway adds support for webmentions. I’ve written a bit about webmentions on my own blog, so if you’re unfamiliar that’s a good place to start.

One thing that quickly became apparent when displaying likes and reports on my own site was that the traditional listing format that we’re used to for comments is not well suited to these lighter interactions. When a like or repost is given the same visual weight and spacing as a comment, the listing soon gets very long and awkward to browse.

Facepile

Enter the facepile

One popular solution to this is a design pattern known as the facepile. Immediately familiar if you use any social networking sites, a facepile is simply a list of profile photos to indicate which users have liked, reposted or what have you.

To make this easy to implement in the Blog app, from v5.6.1 comments are sorted by webmention type and then date. This means likes will be output first, then reposts and then comments. If you’re not using webmentions, all your comments are just comments, so they show up as normal.

Because of the sorting, we can then use a basic template tag to check when the type of mention has changed and output a heading.

<perch:if different="webmentionType">

    <perch:if id="webmentionType" value="like">
        <h3>Likes</h3>
    </perch:if>

    <perch:if id="webmentionType" value="repost">
        <h3>Reposts</h3>
    </perch:if>

    <perch:if id="webmentionType" value="comment">
        <h3>Comments</h3>
    </perch:if>

</perch:if>

The perch:if is checking to see if the value of webmentionType is different than the previous item in the list. If it is different, the template code within that perch:if is used. So in this case, a heading (of whatever type) is only output when the type of webmention changes.

Finding the faces

The traditional comment template examples we use with the Blog app make use of Gravatar for profile photos. Gravatar is an email address based system, and for webmentions we don’t reliably have an email address to use, just a URL.

In order to find a profile photo from the URL, I wrote myself a quick template filter. If you want to try something similar for your own site, I’ve put it on GitHub so you can see what I did. It uses Cloudinary to turn usernames and IDs into social media avatars. I’m sure I’ll add to it in time as the number of different sources I can detect improves.

The end result is a very elegant listing, showing the impact of a post at a glance without taking up unnecessary space on the page.