[lflier]

Someday, somebody is going to get this 2x retina thing figured out so that it’s automatic across WordPress. Until that day, we have to do it ourselves.

The general approach is to serve a double-sized image to the browser. So, if you want an 80px avatar in your topic replies (the standard size), you need to serve up a 160px avatar in order for it to look sharp on a retina screen (i.e. iPad, Android tablet, retina MacBook Pro, or one of those delicious new 5K iMacs). And as Joe Jackson says, “You gotta look sharp!”

So, how is this accomplished? Well, in the template.php file of bbPress, there is a function called bbp_get_reply_author_link(). This is the function that gets the avatar, and it comes with the following arguments:

	function bbp_get_reply_author_link( $args = '' ) {

		// Parse arguments against default values
		$r = bbp_parse_args( $args, array(
			'post_id'    => 0,
			'link_title' => '',
			'type'       => 'both',
			'size'       => 80,
			'sep'        => ' ',
			'show_role'  => false
		), 'get_reply_author_link' );

The argument we want to change is the ‘size’ argument. As you see, the default setting is 80. We want it to be 160. We can change it by changing a single line in the loop-single-reply.php file, which you can locate in wp-content/plugins/bbpress/templates/default/bbpress/. In the stock theme, the line reads:

		<?php bbp_reply_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>

We want to change it to:

		<?php bbp_reply_author_link( array( 'size' => 160, 'sep' => '<br />', 'show_role' => true ) ); ?>

And that’s all there is to it. As long as your CSS specifies a width of 80 (or whatever you prefer), you won’t see any change in the size of the avatar in your browser, it will just look sharper on retina screens. You won’t notice any difference on standard resolution screens and, unfortunately, there is a price to be paid in the size of the image that is served to those screens. Ideally, WordPress/bbPress would know what resolution screen it is serving to and set the image size on the fly. There are some plugins that do this for site images — Jordy Meow’s WP Retina 2x is a good one — but they don’t work for avatars yet. See this support topic for more discussion.

There’s just one more thing you’ll want to do. If you haven’t already done so, create a directory in your theme folder titled “bbpress”. Then make a copy of the file you just changed and place it in this directory. This file will override any file with the same name in the bbPress plugin directory. So, when you next update the bbPress plugin, you’ll retain the functionality you just created, because even though the plugin files are all replaced by the new version, the file in your theme directory will still be there.

I hope this helps everyone look sharp!

[Robin W]

thanks for posting this, and yes you are right that you need to copy that file accross, otherwise it will get overwritten by updates.

You can also achieve the same result by putting

function retina_avatar ($args) {
$args['size'] = 160 ;
return $args ;
}

add_filter ('bbp_before_get_reply_author_link_parse_args', 'retina_avatar'  );

into your functions file, of course ‘As long as your CSS specifies a width of 80 (or whatever you prefer), you won’t see any change in the size of the avatar in your browser’

Thanks again for a useful post