How to display avatars in normal theme at 125px?
-
I’d like to display an avatar in a member theme that is not in the buddypress folder.
I’m aware that the location of files has changed recently, but what do I need to import (if libraries / functions are needed) and what do I need to call to display the current buddypress user pic at 125px — Specifically the author of the current post (in a loop).
$authorpic = get_avatar( get_the_author_id(), $size = ‘125’ );
This works, but doesnt size to 125 pix. Whats the proper way?
-
I’m not 100% sure but I think you should assign a .css class to the image and then specify the height and width in the rules.. example:
#img.avatar_big {
margin: 0px;
padding: 0px;
height: 125px;
width: 125px;
border: 1px solid #FFFFFF;Let me know if it works!
Dont let css/html do resizing, it just looks bad.
<?php echo bp_core_fetch_avatar( 'item_id=' . get_the_author_id() . '&type=full&width=125&height=125' ) ?>BuddyPress 1.1.x only.
@Xevo.. that’s true.. But it seems that wordpress/buddypress does something special when you resize using .css.. the avatar actually gets loaded in the size you specify in the .css… if you view the image it’s the same size (so not the original size of the image which gives bad results quality/data wise)
Wordpress /buddypress does not do anything special to images.By default the avatars are saved as square(same height and width),so if you keep the ratio,the image looks good as it gets scaled down by css,otherwise say you make the height and width different ,It gets stretched.just for clarification
BuddyPress creates two images for avatars. 150×150 and 50×50. Any other sizes you see are scaled by CSS.
If you really know what you are doing, you can define these with custom values in wp-config.php to change the real sizes of the files that are created, but I am not sure of any side effect that may occur.
define( ‘BP_AVATAR_THUMB_WIDTH’, 50 );
define( ‘BP_AVATAR_THUMB_HEIGHT’, 50 );
define( ‘BP_AVATAR_FULL_WIDTH’, 150 );
define( ‘BP_AVATAR_FULL_HEIGHT’, 150 );
If you are going to do this make sure you test extensively on a sandbox install first!
@Branjesh: Ah ok
Learned something new then.. Thanks for clarifying
In the moment, I do what Andy has offered above.
Members:
<?php echo bp_core_fetch_avatar(
'item_id=' . get_the_author_id() . '&type=full&width=100&height=100' ) ?>Groups:
<?php echo bp_core_fetch_avatar( 'item_id=' . bp_get_the_site_group_id()
. '&object=group&type=full&width=100&height=100' ) ?>Just I think this is the same as doing it in the css.
I like to know how to change the original size at the moment when its created.
But I don’t want to define these with custom values in wp-config.php.
I’m looking for a solution to have control of the Avatar size in custom components.
for example: In the bp-events Plugin, I would like to change the Avatar format to a Flyer format.
Most of the Event Flyer, people want to upload, do not feed the Avatar size from Buddypress.
So they just get a cuted piece of there flayer.
I relay would like to change this.
At the moment only square avatars are allowed, and they are all cropped to two sizes. A while back I put together a patch that would allow non-standardized avatar sizes, but the problem then is what to do with the gravatars.
This *might* be something we revisit for the core later, but wouldn’t make a bad external plugin either. Hm.
I’d be interested in different sizes of avatars in buddypress, personally I don’t like or use gravatars, so don’t have a problem with that.
Besides, in the Netherlands nobody actually uses gravatar, since everyone uses Hyves (famous dutch social network) to blog and do other stuff.
Using the function (in 1.1) works.
Using the CSS only (in 1.0) doesn’t.
Thanks!
Anyplace where all new / common theme functions are described (with a rundown of each option and real world examples)?
@ John James Jacoby,
I had a look in the bp-events-avatar.php to understand more what’s going on there.
I’m thinking the avatar part could be like it is now.
It would be enough, if the original resized image would be available.
I did some changes to the bp-events-avatar.php and make a plugin from it.
For the moment, I will use the modified functions in custom components until you offer a better way to do it. I think it would be really great if the original resized image would be saved by the core.
Be careful!
This Plugin is just a play around on a fun buddypress installation.
<?php
/*
Plugin Name:bp-events-avatar
Description: This plugin add a template tag bp_event_flyer() to display the event flyer
Version: 0.0.1
License: GPL
*/
function bp_event_flyer( $args = '' ) {
echo bp_get_event_flyer( $args );
}
function bp_get_event_flyer( $args = '' ) {
global $bp, $events_template;
$defaults = array(
'type' => 'org',
'width' => 'auto',
'height' => 'auto',
'class' => 'avatar',
'id' => false,
'alt' => __( 'Event avatar', 'bp-events' )
);
$r = wp_parse_args( $args, $defaults );
extract( $r, EXTR_SKIP );
/* Fetch the avatar from the folder, if not provide backwards compat. */
if ( !$avatar = bp_event_fetch_avatar( array( 'item_id' => $events_template->event->id, 'object' => 'event', 'type' => $type, 'avatar_dir' => 'event-avatars', 'alt' => $alt, 'css_id' => $id, 'class' => $class, 'width' => $width, 'height' => $height ) ) )
$avatar = '<img src="' . attribute_escape( $events_template->event->avatar_thumb ) . '" class="avatar" alt="' . attribute_escape( $events_template->event->name ) . '" />';
return apply_filters( 'bp_get_event_flyer', $avatar );
}
/*
Based on contributions from: Beau Lebens - http://www.dentedreality.com.au/
Modified for BuddyPress by: Andy Peatling - http://apeatling.wordpress.com/
*/
/***
* Set up the constants we need for avatar support
*/
if ( !defined( 'BP_AVATAR_THUMB_WIDTH' ) )
define( 'BP_AVATAR_THUMB_WIDTH', 50 );
if ( !defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
define( 'BP_AVATAR_THUMB_HEIGHT', 50 );
if ( !defined( 'BP_AVATAR_FULL_WIDTH' ) )
define( 'BP_AVATAR_FULL_WIDTH', 150 );
if ( !defined( 'BP_AVATAR_FULL_HEIGHT' ) )
define( 'BP_AVATAR_FULL_HEIGHT', 150 );
if ( !defined( 'BP_AVATAR_ORIGINAL_MAX_WIDTH' ) )
define( 'BP_AVATAR_ORIGINAL_MAX_WIDTH', 450 );
if ( !defined( 'BP_AVATAR_ORIGINAL_MAX_FILESIZE' ) )
define( 'BP_AVATAR_ORIGINAL_MAX_FILESIZE', get_site_option( 'fileupload_maxk' ) * 1024 );
if ( !defined( 'BP_AVATAR_DEFAULT' ) )
define( 'BP_AVATAR_DEFAULT', BP_PLUGIN_URL . '/bp-xprofile/images/none.gif' );
if ( !defined( 'BP_AVATAR_DEFAULT_THUMB' ) )
define( 'BP_AVATAR_DEFAULT_THUMB', BP_PLUGIN_URL . '/bp-xprofile/images/none-thumbnail.gif' );
function bp_event_fetch_avatar( $args = '' ) {
global $bp, $current_blog;
$defaults = array(
'item_id' => false,
'object' => 'user', // user OR group OR blog OR custom type (if you use filters)
'type' => 'thumb',
'avatar_dir' => false,
'width' => false,
'height' => false,
'class' => 'avatar',
'css_id' => false,
'alt' => __( 'Avatar Image', 'buddypress' ),
'no_grav' => false // If there is no avatar found, return false instead of a grav?
);
$params = wp_parse_args( $args, $defaults );
extract( $params, EXTR_SKIP );
if ( !$item_id ) {
if ( 'user' == $object )
$item_id = $bp->displayed_user->id;
else if ( 'group' == $object )
$item_id = $bp->groups->current_group->id;
else if ( 'blog' == $object )
$item_id = $current_blog->id;
$item_id = apply_filters( 'bp_core_avatar_item_id', $item_id, $object );
if ( !$item_id ) return false;
}
if ( !$avatar_dir ) {
if ( 'user' == $object )
$avatar_dir = 'avatars';
else if ( 'group' == $object )
$avatar_dir = 'group-avatars';
else if ( 'blog' == $object )
$avatar_dir = 'blog-avatars';
$avatar_dir = apply_filters( 'bp_core_avatar_dir', $avatar_dir, $object );
if ( !$avatar_dir ) return false;
}
if ( !$css_id )
$css_id = $object . '-' . $item_id . '-avatar';
if ( $width )
$html_width = " width='{$width}'";
else
$html_width = ( 'thumb' == $type ) ? ' width="' . BP_AVATAR_THUMB_WIDTH . '"' : ' width="' . BP_AVATAR_FULL_WIDTH . '"';
if ( $height )
$html_height = " height='{$height}'";
else
$html_height = ( 'thumb' == $type ) ? ' height="' . BP_AVATAR_THUMB_HEIGHT . '"' : ' height="' . BP_AVATAR_FULL_HEIGHT . '"';
$avatar_folder_url = apply_filters( 'bp_core_avatar_folder_url', get_blog_option( BP_ROOT_BLOG, 'siteurl' ) . '/' . basename( WP_CONTENT_DIR ) . '/blogs.dir/' . BP_ROOT_BLOG . '/files/' . $avatar_dir . '/' . $item_id, $item_id, $object, $avatar_dir );
$avatar_folder_dir = apply_filters( 'bp_core_avatar_folder_dir', WP_CONTENT_DIR . '/blogs.dir/' . BP_ROOT_BLOG . '/files/' . $avatar_dir . '/' . $item_id, $item_id, $object, $avatar_dir );
/* If no avatars have been uploaded for this item, display a gravatar */
if ( !file_exists( $avatar_folder_dir ) && !$no_grav ) {
if ( empty( $bp->grav_default->{$object} ) )
$default_grav = 'wavatar';
else if ( 'mystery' == $bp->grav_default->{$object} )
$default_grav = BP_PLUGIN_URL . '/bp-core/images/mystery-man.jpg';
else
$default_grav = $bp->grav_default->{$object};
if ( $width ) $grav_size = $width;
else if ( 'full' == $type ) $grav_size = BP_AVATAR_FULL_WIDTH;
else if ( 'thumb' == $type ) $grav_size = BP_AVATAR_THUMB_WIDTH;
if ( 'user' == $object ) {
$ud = get_userdata( $item_id );
$grav_email = $ud->user_email;
} else if ( 'group' == $object || 'blog' == $object ) {
$grav_email = "{$item_id}-{$object}@{$bp->root_domain}";
}
$grav_email = apply_filters( 'bp_core_gravatar_email', $grav_email, $item_id, $object );
$gravatar = apply_filters( 'bp_gravatar_url', 'https://secure.gravatar.com/avatar/' ) . md5( $grav_email ) . '?d=' . $default_grav . '&s=' . $grav_size;
return apply_filters( 'bp_core_fetch_avatar', "<img src='{$gravatar}' alt='{$alt}' id='{$css_id}' class='{$class}'{$html_width}{$html_height} />", $params );
} else if ( !file_exists( $avatar_folder_dir ) && $no_grav )
return false;
/* Set the file names to search for to select the full size or thumbnail image. */
$avatar_name = ( 'org' == $type ) ? '-bporg' : '-bpthumb';
$avatar_name = ( 'full' == $type ) ? '-bpfull' : $avatar_name;
$legacy_user_avatar_name = ( 'full' == $type ) ? '-avatar2' : '-avatar1';
$legacy_group_avatar_name = ( 'full' == $type ) ? '-groupavatar-full' : '-groupavatar-thumb';
if ( $av_dir = opendir( $avatar_folder_dir ) ) {
while ( false !== ( $avatar_file = readdir($av_dir) ) ) {
if ( preg_match( "/{$avatar_name}/", $avatar_file ) || preg_match( "/{$legacy_user_avatar_name}/", $avatar_file ) || preg_match( "/{$legacy_group_avatar_name}/", $avatar_file ) )
$avatar_url = $avatar_folder_url . '/' . $avatar_file;
}
}
closedir($av_dir);
return apply_filters( 'bp_core_fetch_avatar', "<img src='{$avatar_url}' alt='{$alt}' id='{$css_id}' class='{$class}'{$html_width}{$html_height} />", $params );
}
function bp_events_delete_existing_avatar( $args = '' ) {
global $bp;
$defaults = array(
'item_id' => false,
'object' => 'user', // user OR group OR blog OR custom type (if you use filters)
'avatar_dir' => false
);
$args = wp_parse_args( $args, $defaults );
extract( $args, EXTR_SKIP );
if ( !$item_id ) {
if ( 'user' == $object )
$item_id = $bp->displayed_user->id;
else if ( 'group' == $object )
$item_id = $bp->groups->current_group->id;
else if ( 'blog' == $object )
$item_id = $current_blog->id;
$item_id = apply_filters( 'bp_core_avatar_item_id', $item_id, $object );
if ( !$item_id ) return false;
}
if ( !$avatar_dir ) {
if ( 'user' == $object )
$avatar_dir = 'avatars';
else if ( 'group' == $object )
$avatar_dir = 'group-avatars';
else if ( 'blog' == $object )
$avatar_dir = 'blog-avatars';
$avatar_dir = apply_filters( 'bp_core_avatar_dir', $avatar_dir, $object );
if ( !$avatar_dir ) return false;
}
if ( 'user' == $object ) {
/* Delete any legacy meta entries if this is a user avatar */
delete_usermeta( $item_id, 'bp_core_avatar_v1_path' );
delete_usermeta( $item_id, 'bp_core_avatar_v1' );
delete_usermeta( $item_id, 'bp_core_avatar_v2_path' );
delete_usermeta( $item_id, 'bp_core_avatar_v2' );
}
$avatar_folder_dir = apply_filters( 'bp_core_avatar_folder_dir', WP_CONTENT_DIR . '/blogs.dir/' . BP_ROOT_BLOG . '/files/' . $avatar_dir . '/' . $item_id, $item_id, $object, $avatar_dir );
if ( !file_exists( $avatar_folder_dir ) )
return false;
if ( $av_dir = opendir( $avatar_folder_dir ) ) {
while ( false !== ( $avatar_file = readdir($av_dir) ) ) {
if ( ( preg_match( "/-bpfull/", $avatar_file ) || preg_match( "/-bpthumb/", $avatar_file ) || preg_match( "/-bporg/", $avatar_file ) ) && '.' != $avatar_file && '..' != $avatar_file )
@unlink( $avatar_folder_dir . '/' . $avatar_file );
}
}
closedir($av_dir);
@rmdir( $avatar_folder_dir );
do_action( 'bp_core_delete_existing_avatar', $args );
return true;
}
function bp_events_avatar_handle_crop( $args = '' ) {
global $bp;
$defaults = array(
'object' => 'user',
'avatar_dir' => 'avatars',
'item_id' => false,
'original_file' => false,
'crop_w' => BP_AVATAR_FULL_WIDTH,
'crop_h' => BP_AVATAR_FULL_HEIGHT,
'crop_x' => 0,
'crop_y' => 0
);
$r = wp_parse_args( $args, $defaults );
extract( $r, EXTR_SKIP );
if ( !$original_file )
return false;
if ( !file_exists( WP_CONTENT_DIR . '/' . $original_file ) )
return false;
if ( !$item_id )
$avatar_folder_dir = apply_filters( 'bp_core_avatar_folder_dir', WP_CONTENT_DIR . dirname( $original_file ), $item_id, $object, $avatar_dir );
else
$avatar_folder_dir = apply_filters( 'bp_core_avatar_folder_dir', WP_CONTENT_DIR . '/blogs.dir/' . BP_ROOT_BLOG . '/files/' . $avatar_dir . '/' . $item_id, $item_id, $object, $avatar_dir );
if ( !file_exists( $avatar_folder_dir ) )
return false;
require_once( ABSPATH . '/wp-admin/includes/image.php' );
require_once( ABSPATH . '/wp-admin/includes/file.php' );
/* Delete the existing avatar files for the object */
bp_core_delete_existing_avatar( array( 'object' => $object, 'avatar_path' => $avatar_folder_dir ) );
/* Make sure we at least have a width and height for cropping */
if ( !(int)$crop_w )
$crop_w = BP_AVATAR_FULL_WIDTH;
if ( !(int)$crop_h )
$crop_h = BP_AVATAR_FULL_HEIGHT;
/* Set the full and thumb filenames */
$full_filename = wp_hash( $original_file . time() ) . '-bpfull.jpg';
$thumb_filename = wp_hash( $original_file . time() ) . '-bpthumb.jpg';
$org_filename = wp_hash( $original_file . time() ) . '-bporg.jpg';
/* Crop the image */
$full_cropped = wp_crop_image( WP_CONTENT_DIR . $original_file, (int)$crop_x, (int)$crop_y, (int)$crop_w, (int)$crop_h, BP_AVATAR_FULL_WIDTH, BP_AVATAR_FULL_HEIGHT, false, $avatar_folder_dir . '/' . $full_filename );
$thumb_cropped = wp_crop_image( WP_CONTENT_DIR . $original_file, (int)$crop_x, (int)$crop_y, (int)$crop_w, (int)$crop_h, BP_AVATAR_THUMB_WIDTH, BP_AVATAR_THUMB_HEIGHT, false, $avatar_folder_dir . '/' . $thumb_filename );
rename (WP_CONTENT_DIR . $original_file, $avatar_folder_dir . '/' . $org_filename );
/* Remove the original */
@unlink( WP_CONTENT_DIR . $original_file );
return true;
}
?>
- The topic ‘How to display avatars in normal theme at 125px?’ is closed to new replies.
