Blog Avatars

[trent]

Since blogs now have their own avatar on the Blogs page, it would be nice to add the ability to put a blog avatar. That or display the avatar of the author(s) on the blogs page. Makes for a nice widget as well.

[trent]

Might end up being a plugin, but adding this blog avatar as a favicon might be a nice addition as well.

[jvinch]

-1 for avatar of the author. That's a bad idea for more "corporate" or "business" type blogs that would typically want to put their logo or other form of branding there. Please treat user and blog gravatars completely separately.

[trent]

My personal preference would be the blog avatar as well since groups and members already have them anyways. Changed milestone to Future Enhancements.

[tekanji]

In terms of maximum customizability, it would be best to allow the user to either upload a blog avatar, choose an author icon to represent the blog, or choose from the default "mystery man", wavatar, etc. icons.

[owrede]

Here is an example of header images used as blog avatars: ​http://spaces.kisd.de/projekte/

I think it is a nice example that shows how blogs can be represented without being mixed with user avatars.

Which brings on the idea that blog avatars could be of a different proportions/sizes - which may be configured once in the admin area. A squared standard thumbnail would always be needed to have a predictable size available for generic template creators to build on.

[(none)]

Milestone Future Enhancements deleted

[DJPaul]

This is on the BuddyPress roadmap http://buddypress.org/about/roadmap/ for v1.4.

[DJPaul]

Might be able to piggyback on ​#WP16434 once that gets into WP Core.

[boonebgorges]

Might be able to piggyback on ​#WP16434 once that gets into WP Core.

Interesting. Depends, of course, on whether the items uploaded for favicons have a high enough resolution. (The favicons themselves won't, but maybe the pre-resize ones, if saved, will.) In any case, we could use favicons as a fallback.

I have a client who has been clamoring for this functionality, so I'm likely going to take it on sooner rather than later. I may make it part of a reorganization of how BP handles avatar uploads.

[boonebgorges]

Taking out of 1.7-early for the moment. If my project still requires it in the near future, I'll move it back into the milestone.

[wdfee]

ok, this is how I've done it with bp-custom.php and my bp-default child theme:
(I know, bp-custom.php would not be necessary, but I wanted to keep it out of the theme for now)

Template Files

In my theme I added:
/members/single/blogs/
/members/single/blogs/admin.php
/members/single/blogs/change-avatar.php

The admin.php is for better support of even more features as I want to introduce in my case, to keep the template frame.

In /blogs/blogs-loop.php I changed the output from
bp_blog_avatar( 'type=thumb' );
to
echo bp_core_fetch_avatar( 'item_id='.bp_get_blog_id().'&object=blog&type=thumb' );

because I'm still confused with filters, if they're complex, and this was just easy - sorry for that ;-)
I'd rather suggest to directly change the bp_get_blog_avatar() by you...

I post the code as suggestion for bpdefault:

/members/single/blogs/admin.php (adapted from /members/single/home.php):

<?php

/**
 * BuddyPress - Blog Admin
 *
 * @package BuddyPress
 * @subpackage bp-default
 */

get_header( 'buddypress' ); ?>

	<div id="content">
		<div class="padder">

			<?php do_action( 'bp_before_member_home_content' ); ?>

			<div id="item-header" role="complementary">

				<?php locate_template( array( 'members/single/member-header.php' ), true ); ?>

			</div><!-- #item-header -->

			<div id="item-nav">
				<div class="item-list-tabs no-ajax" id="object-nav" role="navigation">
					<ul>

						<?php bp_get_displayed_user_nav(); ?>

						<?php do_action( 'bp_member_options_nav' ); ?>

					</ul>
				</div>
			</div><!-- #item-nav -->

			<div id="item-body">

				<?php do_action( 'bp_before_member_body' );

				echo '<h3>' . __( 'Sites', 'buddypress') . '</h3>';
		
				// Change Blog Avatar
				if ( bp_is_current_action( 'blog-avatar' ) )
					locate_template( array( 'members/single/blogs/change-avatar.php' ), true );

				do_action( 'bp_after_member_body' ); ?>

			</div><!-- #item-body -->

			<?php do_action( 'bp_after_member_home_content' ); ?>

		</div><!-- .padder -->
	</div><!-- #content -->

<?php get_sidebar( 'buddypress' ); ?>
<?php get_footer( 'buddypress' ); ?>

/members/single/blogs/change-avatar.php:
(adapted from /members/single/profile/change-avatar.php
no, not very clean by now...)

<?php 
$site_id = bp_action_variable( 0 );
$blog_details = get_blog_details($site_id); ?>

<h4><?php printf( __( 'Change Blog Avatar: %s', 'buddypress' ), $blog_details->blogname ); ?></h4>

<?php do_action( 'bp_before_blog_avatar_upload_content' ); ?>

<?php if ( !(int)bp_get_option( 'bp-disable-avatar-uploads' ) ) : ?>

	<p><?php //_e( 'Your avatar will be used on your profile and throughout the site. If there is a <a href="http://gravatar.com">Gravatar</a> associated with your account email we will use that, or you can upload an image from your computer.', 'buddypress'); ?></p>

	<form action="" method="post" id="avatar-upload-form" class="standard-form" enctype="multipart/form-data">

		<?php if ( 'upload-image' == bp_get_avatar_admin_step() ) : ?>

			<?php wp_nonce_field( 'bp_avatar_upload' ); ?>
			<p><?php _e( 'Click below to select a JPG, GIF or PNG format photo from your computer and then click \'Upload Image\' to proceed.', 'buddypress' ); ?></p>

			<p id="avatar-upload">
				<input type="file" name="file" id="file" />
				<input type="submit" name="upload" id="upload" value="<?php _e( 'Upload Image', 'buddypress' ); ?>" />
				<input type="hidden" name="action" id="action" value="bp_avatar_upload" />
			</p>

			<?php /* ToDo: function for bp_get_blog_has_avatar
			if ( bp_get_user_has_avatar() ) : ?>
				<p><?php _e( "If you'd like to delete your current avatar but not upload a new one, please use the delete avatar button.", 'buddypress' ); ?></p>
				<p><a class="button edit" href="<?php bp_avatar_delete_link(); ?>" title="<?php _e( 'Delete Avatar', 'buddypress' ); ?>"><?php _e( 'Delete Blog Avatar', 'buddypress' ); ?></a></p>
			<?php endif; */ ?>

		<?php endif; ?>

		<?php if ( 'crop-image' == bp_get_avatar_admin_step() ) : ?>

			<h5><?php _e( 'Crop Your New Avatar', 'buddypress' ); ?></h5>

			<img src="<?php bp_avatar_to_crop(); ?>" id="avatar-to-crop" class="avatar" alt="<?php _e( 'Avatar to crop', 'buddypress' ); ?>" />

			<div id="avatar-crop-pane">
				<img src="<?php bp_avatar_to_crop(); ?>" id="avatar-crop-preview" class="avatar" alt="<?php _e( 'Avatar preview', 'buddypress' ); ?>" />
			</div>

			<input type="submit" name="avatar-crop-submit" id="avatar-crop-submit" value="<?php _e( 'Crop Image', 'buddypress' ); ?>" />

			<input type="hidden" name="image_src" id="image_src" value="<?php bp_avatar_to_crop_src(); ?>" />
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />

			<?php wp_nonce_field( 'bp_avatar_cropstore' ); ?>

		<?php endif; ?>

	</form>

<?php else : ?>

	<p><?php //_e( 'Your avatar will be used on your profile and throughout the site. To change your avatar, please create an account with <a href="http://gravatar.com">Gravatar</a> using the same email address as you used to register with this site.', 'buddypress' ); ?></p>

<?php endif; ?>

<?php do_action( 'bp_after_blog_avatar_upload_content' ); ?>

Functions (by now in bp-custom.php)

into bp-blogs-functions.php:

function blogs_avatar_upload_dir( $blog_id = 0 ) {
	global $bp;

	if ( !$blog_id )
		$blog_id = bp_action_variable( 0 );

	$path    = bp_core_avatar_upload_path() . '/blog-avatars/' . $blog_id;
	$newbdir = $path;

	if ( !file_exists( $path ) )
		@wp_mkdir_p( $path );

	$newurl    = bp_core_avatar_url() . '/blog-avatars/' . $blog_id;
	$newburl   = $newurl;
	$newsubdir = '/blog-avatars/' . $blog_id;

	return apply_filters( 'blogs_avatar_upload_dir', array( 'path' => $path, 'url' => $newurl, 'subdir' => $newsubdir, 'basedir' => $newbdir, 'baseurl' => $newburl, 'error' => false ) );
}

into bp-blogs-screens.php:

/**
 * Show the blogs change avatar template
 *
 * @since BuddyPress (1.7)
 *
 * @return If we shouldn't be here
 */
function bp_blogs_screen_blog_avatar() {

	if ( !bp_is_current_action( 'blog-avatar' ) )
		return false;

	// If the logged-in user doesn't have permission or if avatar uploads are disabled, then stop here
	if ( ( !bp_is_my_profile() && !is_super_admin() ) || (int) bp_get_option( 'bp-disable-avatar-uploads' ) )
		return false;

	$bp = buddypress();

	// If the group admin has deleted the admin avatar
	if ( bp_is_action_variable( 'delete', 1 ) ) {

		// Check the nonce
		check_admin_referer( 'bp_blog_avatar_delete' );

		if ( bp_core_delete_existing_avatar( array( 'item_id' => bp_action_variable( 0 ), 'object' => 'blog' ) ) ) {
			bp_core_add_message( __( 'Your avatar was deleted successfully!', 'buddypress' ) );
		} else {
			bp_core_add_message( __( 'There was a problem deleting that avatar, please try again.', 'buddypress' ), 'error' );
		}
	}

	if ( ! isset( $bp->avatar_admin ) ) {
		$bp->avatar_admin = new stdClass();
	}

	$bp->avatar_admin->step = 'upload-image';

	if ( !empty( $_FILES ) ) {

		// Check the nonce
		check_admin_referer( 'bp_avatar_upload' );

		// Pass the file to the avatar upload handler
		if ( bp_core_avatar_handle_upload( $_FILES, 'blogs_avatar_upload_dir' ) ) {
			$bp->avatar_admin->step = 'crop-image';

			// Make sure we include the jQuery jCrop file for image cropping
			add_action( 'wp_print_scripts', 'bp_core_add_jquery_cropper' );
		}

	}

	// If the image cropping is done, crop the image and save a full/thumb version
	if ( isset( $_POST['avatar-crop-submit'] ) ) {

		// Check the nonce
		check_admin_referer( 'bp_avatar_cropstore' );

		$args = array(
			'object'        => 'blog',
			'avatar_dir'    => 'blog-avatars',
			'item_id'       => bp_action_variable( 0 ),
			'original_file' => $_POST['image_src'],
			'crop_x'        => $_POST['x'],
			'crop_y'        => $_POST['y'],
			'crop_w'        => $_POST['w'],
			'crop_h'        => $_POST['h']
		);

		if ( !bp_core_avatar_handle_crop( $args ) ) {
			bp_core_add_message( __( 'There was a problem cropping the avatar.', 'buddypress' ), 'error' );
		} else {
			bp_core_add_message( __( 'The new blog avatar was uploaded successfully.', 'buddypress' ) );
		}
	}

	do_action( 'blogs_screen_blog_admin_avatar', bp_action_variable( 0 ) );

	bp_core_load_template( apply_filters( 'blogs_template_blog_admin_avatar', 'members/single/blogs/admin' ) );
}
add_action( 'bp_screens', 'bp_blogs_screen_blog_avatar', 5 );

into bp-blogs-template.php (at the end):

/** 
 * bp_blogs_blog_avatar_button()
 *
 * Output button for changing the blog avatar in a loop
 *
 * @param array $args Custom button properties
 */
function bp_blogs_blog_avatar_button( $args = '' ) {
	echo bp_get_blogs_blog_avatar_button( $args );
}
	/**
	 * bp_get_blogs_blog_avatar_button()
	 *
	 * Return button for changing the blog avatar in a loop
	 *
	 * @param array $args Custom button properties
	 * @return string
	 */
	function bp_get_blogs_blog_avatar_button( $args = '' ) {
		
		// maybe not the best way and place for the condition... ?
		if( bp_is_my_profile() || is_super_admin() ) {
			
			$defaults = array(
				'id'                => 'blog_avatar',
				'component'         => 'blogs',
				'must_be_logged_in' => true,
				'block_self'        => false,
				'wrapper_class'     => 'blog-button blog-avatar',
				'link_href'         => bp_displayed_user_domain() . bp_get_blogs_slug() . '/blog-avatar/' . bp_get_blog_id(),
				'link_class'        => 'blog-button blog-avatar',
				'link_text'         => __( 'Change Blog Avatar', 'buddypress' ),
				'link_title'        => __( 'Change Blog Avatar', 'buddypress' ),
			);
	
			$button = wp_parse_args( $args, $defaults );
		
			// Filter and return the HTML button
			return bp_get_button( apply_filters( 'bp_get_blogs_blog_avatar_button', $button ) );
		}
	}
	add_action( 'bp_directory_blogs_actions', 'bp_blogs_blog_avatar_button' );

ToDos:

• Include in blogs create process
• Delete Screen
• Change bp_get_blog_avatar

[wdfee]

I forgot to mention, what my code does:

• A Button "Change Blog Avatar" is added to ech blog inside the blogs loop in the users profile (My Sites).
• The user can upload an avatar for that blog, crop and so on the same way as profile or group avatar.

So this could be another picture of the author OR a logo - whatever the user wants it to be...

[boonebgorges]

wdfee - Thanks for this. It looks like a pretty straightforward port of group avatars. Let's look at this for 1.8.

[mercime]

There was a plugin released recently ​http://buddydev.com/buddypress/add-avatars-to-your-blogs-on-buddypresswordpress-multisite-network/ FYI

[imath]

I'm not sure a Site's profile photo should be set in front-end. In this part, all site's the user's contributed to are listed (see bp_blogs_get_allowed_roles(). Today the site's avatar is the profile picture of an Admin, so just like the Site's title, it's something that should only be editable by the Site's Admins. As a user if i was seeing in my front-end profile the list of the sites i contribute to with for some sites a button (i'm an admin) to set the profile photo and for others no button (i'm not an admin), i'd be confused. All avatars on BuddyPress are set on a single item screen.

To test the different filters in #6290, i've quickly built a "Site's profile photo" feature. I'm targeting the options-general.php Administration screen. Why? Because it's the place where you set the site's title, the description which are the main describing fields that are synchronized as BuddyPress blogmetas using hooks on update_option_blogname and update_option_blogdescription. So it seems logic to me to set the site's profile photo here.

Clicking on the edit link will launch the Uploader Window

Once the file is uploaded, the crop step would happen etc.

[DJPaul]

Moving to a smaller milestone so we can discuss if a site logo is something we want to do, or perhaps, whether we should.

[r-a-y]

Related: #6544.

[slaFFik]

Fixed in #6544.