Skip to content

How to Create a Badge System in Plone

January 30, 2015

With thousands of volunteers taking and teaching courses, climbing peaks, and donating time and money for environmental advocacy and youth programs, The Mountaineers needed a way to recognize their members’ contributions and skill levels. To let them do this, we created a badge system for their Plone website:

Mountaineers Badges

Members who complete milestones like graduating from a course or summiting a set of peaks are awarded a badge, which shows on their profile page.

Mountaineers Profile Badges

This feature was easy to implement because of another Plone add-on, collective.workspace, which we had already created to provide roster functionality for The Mountaineers’ courses, activities, and committees, allowing each participant’s role, registration status, and other information to be managed. Here are instructions for how to create a badge system on your own Plone site with the help of collective.workspace. The screenshots are from a Plone 5 site but this will also work in Plone 4.

  1. Add collective.workspace to your buildout:
    [instance]
    eggs = collective.workspace
  2. Start Plone, go to the Add-ons control panel in Site Setup, and activate collective.workspace.

  3. Go to the Dexterity Types control panel and add a Badge content type.
    cw_addtype
  4. Add an image field to hold the badge image.
    Screen Shot 2015-01-30 at 10.42.39 AM
  5. Go to the Behaviors tab and enable the “Team workspace” behavior.
    Screen Shot 2015-01-30 at 10.44.21 AM
  6. Now add a Badge to the site.
    Screen Shot 2015-01-30 at 10.47.51 AM
  7. There’s now a Roster link on the toolbar when viewing the badge.
    Screen Shot 2015-01-30 at 10.48.47 AM
  8. On the roster, we can add a user, indicating that they have been granted the badge.
    Screen Shot 2015-01-30 at 10.52.57 AM
    (Position is more useful for a committee roster. Selecting the Admins group gives the user permission to help manage this roster.)
  9. Now the user shows up on the badge roster.
    Screen Shot 2015-01-30 at 10.53.29 AM
  10. This isn’t particularly useful unless we make the user’s badges show up somewhere. Customize the author template and add this TAL:
    <div>
      <h2>Badges</h2>
      <tal:b repeat="badge python:context.portal_catalog(portal_type='badge', workspace_members=username)">
        <img src="${badge/getURL}/@@images/image/thumb" class="image-left" title="${badge/Title}" />
      </tal:b>
      <br style="clear: both;" />
    </div>
  11. Now the assigned badges show up on a user’s profile!
    Screen Shot 2015-01-30 at 11.12.03 AM

That’s it! Enjoy your new badge system!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: