Skip to:
Content

Opened 5 years ago

Last modified 8 months ago

#192 assigned enhancement

Blog Avatars

Reported by: trent Owned by: boonebgorges
Milestone: Future Release Priority: minor
Severity: normal Version:
Component: Blogs Keywords: has-patch needs-testing
Cc: jvinch@…, jay.collier@…, info@…, mercijavier@…

Description

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.

Change History (20)

comment:1 trent5 years ago

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

comment:2 jvinch5 years ago

  • Cc jvinch@… added

-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.

comment:3 trent5 years ago

  • Milestone set to Future Enhancements

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

comment:4 tekanji5 years ago

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.

comment:5 owrede5 years ago

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.

comment:6 anonymous5 years ago

  • Milestone Future Enhancements deleted

Milestone Future Enhancements deleted

comment:7 DJPaul5 years ago

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

comment:8 cnorris234 years ago

  • Milestone set to Future Release

comment:9 cnorris233 years ago

  • Component set to Blogs
  • Keywords needs-patch added; blog avatar removed

comment:10 DJPaul2 years ago

  • Severity set to normal

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

comment:11 boonebgorges2 years ago

  • Keywords 1.7-early added
  • Owner changed from apeatling to boonebgorges
  • Status changed from new to assigned

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.

comment:12 jcollier2 years ago

  • Cc jay.collier@… added

comment:13 boonebgorges21 months ago

  • Keywords 1.7-early removed

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.

comment:14 wdfee15 months ago

  • Cc info@… added

comment:15 wdfee15 months ago

  • Keywords has-patch needs-testing added

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

comment:16 wdfee15 months ago

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...

comment:17 boonebgorges15 months ago

  • Milestone changed from Future Release to 1.8

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

comment:18 mercime11 months ago

  • Cc mercijavier@… added

comment:19 boonebgorges10 months ago

  • Keywords needs-patch removed
  • Milestone changed from 1.8 to Future Release
Note: See TracTickets for help on using tickets.