Startseite > informatik, oss > Increase avatar size in bbpress

Increase avatar size in bbpress

I needed to increase the image dimensions for the avatars in bbpress. There is no direct filter available which lets you change the size for a specific avatar location. From the forums, I gather that you have to edit the template. I managed to make it work using the filter system. The filters get called for every avatar location, so I base my heuristic on the requested avatar size. The default ’small‘ avatar size is 14px and nearly useless. These are displayed inline. The faces next to the postings are 80px by default. I increased them to 110. Bigger images would likely break the formatting.

function my_bbp_change_avatar_size($author_avatar, $topic_id, $size) {
    $author_avatar = '';
    if ($size == 14) {
        $size = 24;
    if ($size == 80) {
        $size = 110;
    $topic_id = bbp_get_topic_id( $topic_id );
    if ( !empty( $topic_id ) ) {
        if ( !bbp_is_topic_anonymous( $topic_id ) ) {
            $author_avatar = get_avatar( bbp_get_topic_author_id( $topic_id ), $size );
        } else {
            $author_avatar = get_avatar( get_post_meta( $topic_id, '_bbp_anonymous_email', true ), $size );
    return $author_avatar;

/* Add priority (default=10) and number of arguments */
add_filter('bbp_get_topic_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
add_filter('bbp_get_reply_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
add_filter('bbp_get_current_user_avatar', 'my_bbp_change_avatar_size', 20, 3);

Note that we hook up three different filters. You can play around with different avatar locations this way, but I couldn’t be bothered to find out the details. The first one is for some inline avatars (likely for the topic author only), the second one probably for inline avatars for reply authors. The last one probably is for the avatars displayed next to full postings.

We also need some CSS:

/* We increased the tiny avatar size, so adjust the position */
#bbpress-forums p.bbp-topic-meta img.avatar, #bbpress-forums ul.bbp-reply-revision-log img.avatar, #bbpress-forums ul.bbp-topic-revision-log img.avatar, #bbpress-forums div.bbp-template-notice img.avatar, #bbpress-forums .widget_display_topics img.avatar, #bbpress-forums .widget_display_replies img.avatar {
    margin-bottom: -2px;
/* Increase max-width for the big avatars */
#bbpress-forums div.bbp-forum-author img.avatar, #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar {
/*margin: 12px auto 0;*/
max-width: 110px;

There is a filter available that will simply change the default avatar size, but that is only available for the user detail page – e.g. the profile. The code in BBPress looks like this:

echo get_avatar( bbp_get_displayed_user_field( 'user_email', 'raw' ), 
                       apply_filters( 'bbp_single_user_details_avatar_size', 150 ) );

I wish the authors had included this for every avatar location.

Bonus – Better Editor

By default, current BBPress releases only include the default HTML editor toolkit. Very useful. To get TinyMCE back, install bbpress-enable-tinymce-visual-tab and enable TinyMCE in Settings->Forums. I use the twentythirteen theme and the mode switching tabs (text<->visual) look weird. I also found the image insertion dialog horribly broken. Some CSS fixes that:

/* Fix tab switch in TinyMCE BBpress */
.wp-editor-tabs .wp-switch-editor {
    padding-top: 0px;

/* Hide image embedding widget in TinyMCE BBpress.
 * It's just horribly broken.
#bbp_topic_content_image {
    display: none;

Kategorien:informatik, oss
  1. 4. Juli 2014 um 12:42 am

    This has helped me greatly. Thank you! I wonder if you could reveal how you located these filters:


    I suspect there are more (because there is an avatar location on my forum that isn’t affected by this function) but I’m not sure how to locate the filter for it.

    • 16. Juli 2014 um 2:08 pm

      Hey, sorry for the late reply. I simple used ‚grep‘ to search for ‚avatar‘.

  1. No trackbacks yet.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

Du kommentierst mit Deinem Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )


Verbinde mit %s

%d Bloggern gefällt das: