Theming

Last modified: April 28, 2009 - 17:23

Theming Activity

The 5.4 and 6.1 branches of the Activity module have introduced a number of new theme functions to allow themers to style the output of Activity in a fairly fine-grained fashion.

There are two basic groups of theme functions in Activity. One concerns styling of each individual Activity message including pieces of that message such as the username or the timestamp of the activity. The other groups concerns the styling of a page or block that displays activity messages. The examples shown below are from the Drupal 6 version of the Activity module so slight differences may appear in the Drupal 5 version.

Message Related

Theme functions related to Activity messages include:
theme_activity
theme_activity_username
theme_activity_user_picture
theme_activity_timestamp
theme_activity_delete_link
theme_activity_node_type

Activity Message

The theme function theme_activity() formats an already processed activity message string. The theme function takes two parameters: 1) the activity message string 2) the individual activity record as an array. In the default theme implementation the activity message string has been wrapped in <span> tags with CSS classes for the activity module responsible for creating the record (e.g. nodeactivity), for the activity type (e.g. story for nodeactivity), for the operation type (e.g. create, update or delete for nodeactivity) and for a 'mark' such as the 'new' mark used for messages new to the logged in user.

function theme_activity($message, $item) {
  // $item is the unprocessed activity item so that themers can do more with it.
  return $item['mark'] .'<span class="activity activity-module-'. $item['module'] .' activity-type-'. $item['type'] .' activity-operation-'. $item['operation'] .'">'. $message .'</span>';
}

With the CSS classes added to the activity message one could for example add an icon to the front of the activity message when the activity is a node activity or a flag activity or a voting activity. An icon could be shown if a node activity and the operation was delete.

Activity Username

The theme function theme_activity_username() formats a username acting as a wrapper around the drupal core theme_username() function. The theme function has two parameters: 1) A user object that has at least uid and name properties 2) An optional boolean parameter which if set tests to see if the current logged in user is the same user as the user passed in to the theme function in which case the pronoun 'you' is returned instead of the themed username.

function theme_activity_username($account, $self = FALSE) {
  global $user;
  return ($self && $user->uid == $account->uid) ? t('you') : theme('username', $account);
}

Activity User Picture

The theme function theme_activity_user_picture() formats a user picture acting as a wrapper around the drupal core theme_user_picture() function. The theme function has one parameter: 1) A user object that has at least uid and picture properties. Because there are likely to be an endless number of different user picture sizes, presence of default user pictures, use of imagecache, CSS styling and other factors in what could be used to display a user picture, the default theme function for user pictures for Activity opts to supply a simple default with the expectation that most sites will want to override this theme function to provide their own user picture implementation.

function theme_activity_user_picture($account) {
  return theme('user_picture', $account);
}

Activity Timestamp

The theme function theme_activity_timestamp() formats the timestamp of an individual activity record. The default theme function formats the timestamp using the 'small' default time display format as set in /admin/settings/date-time.

function theme_activity_timestamp($timestamp) {
  return format_date($timestamp, 'small');
}

Activity Delete Link

The theme function theme_activity_delete_link() formats a link that may optionally appear with an individual activity record allowing a user with the right permissions to delete that single activity record.

function theme_activity_delete_link($activity) {
  return l('X', 'activity/delete/'. $activity['aid'], array('attributes' => array('title' => t('Delete this activity record'), 'class' => 'activity-delete-record'), 'query' => drupal_get_destination()));
}

Activity Node Type

The theme function theme_activity_node_type() formats the machine-readable node type for activity that involves nodes into a human-readable string. The default theme implementation retrieves the human-readable node type name and lowercases it since the node type name will often appear in the middle of a sentence.

function theme_activity_node_type($node_type) {
  return strtolower(node_get_types('name', $node_type));
}

Page/Block Related

Theme functions related to Activity page or block output include:
theme_activity_page
theme_activity_block
theme_activity_user_profile_activity
theme_activity_more_link
theme_activity_table

Activity Page

The theme function theme_activity_page() formats the output that appears on one of the standard activity pages such as the site-wide activity page at /activity/all or a logged-in user's activity at /activity/mine. The default theme implementation simply returns the table of activity generated by theme_activity_table(). One could override the theme to add text and graphics to the activity table output or wrap the table in CSS classes.

function theme_activity_page($activities, $table) {
  return $table;
}

Activity Block

The theme function theme_activity_block() formats the activity records that appear in a block. The default theme implementation returns a themed list adding a CSS class to the list to allow easier theming of the individual list items.

function theme_activity_block($activities, $more_link = '') {
  if ($content = theme('item_list', $activities, NULL, 'ul', array('class' => 'activity-list'))) {
    $content .= $more_link;
    return $content;
  }
}

Activity User Profile Activity

The theme function theme_activity_user_profile_activity() formats the activity records that appear on a users' profile page. The default theme implementation returns a themed list adding a CSS class to the list to allow easier theming of the individual list items.

function theme_activity_user_profile_activity($activities) {
  if ($content = theme('item_list', $activities, NULL, 'ul', array('class' => 'activity-list'))) {
    return $content;
  }
}

Activity More Link

The theme function theme_activity_more_link() formats the 'more' link shown on activity blocks.

function theme_activity_more_link($path) {
  return '<div class="more-link">'. l(t('more'), $path, array('title' => t('See all of your activity.'))) .'</div>';
}

Activity Table

The theme function theme_activity_table() builds and formats a table of individual activity records to be shown on activity pages such as the site-wide activity page found at /activity/all or users' activity at /activity/mine. The default theme implementation adds CSS classes to the table and to the table cells for the activity message, the activity timestamp and optionally an activity delete link.

The default table has 2 columns (or 3 columns if the user has permission to delete activity records) for the timestamp and for the activity message.

function theme_activity_table($activities) {
  $display_headers = array(
    'created' => array('field' => 'created', 'data' => t('Date')),
    t('Message'),
  );

  $rows = array();
  foreach ($activities as $activity) {
    if ($activity_message = activity_token_replace($activity)) {
      $row = array(
        array('data' => theme('activity_timestamp', $activity['created']), 'class' => 'activity-table-timestamp'),
        array('data' => theme('activity', $activity_message, $activity), 'class' => 'activity-table-message'),
      );
      if ($delete_link = activity_delete_link($activity)) {
        array_push($row, array('data' => $delete_link, 'class' => 'activity-table-delete-link'));
      }
    }
    $rows[] = $row;
  }
  $output = theme('table', $display_headers, $rows, array('class' => 'activity-table'));
  $output .= theme('pager');
  return $output;
}

If you wanted to change the order of the table cell you could perhaps swap the location of the activity message and the timestamp or simply append the timestamp to the activity message:

      $row = array(
        array('data' => theme('activity', $activity_message, $activity), 'class' => 'activity-table-message') .' '. theme('activity_timestamp', $activity['created']), 'class' => 'activity-table-timestamp'),
      );

You could add in the user picture:

      $row = array(
        array('data' => theme('activity_user_picture', activity_user_load($activity['uid'])), 'class' => 'activity-table-user-picture'),
        array('data' => theme('activity', $activity_message, $activity), 'class' => 'activity-table-message'),
        array('data' => theme('activity_timestamp', $activity['created']), 'class' => 'activity-table-timestamp'),
      );

Basically you have the all the data related to an activity record available via the $activity array so you can create whatever type of table you want or even eschew using a table completely and create a list or some other form of output.

 
 

Drupal is a registered trademark of Dries Buytaert.