Clearing hard-coded sizes from Avatars

Resolved

(@theotherdon)

I want to clear the hard-coded height & width from avatar images, so I can control them with CSS.

I have this code in my WP template:

<?php echo get_avatar( get_the_author_meta( 'ID' ), $size = '', $default = '', $alt = '', $args = array( 'class' => 'pti-author-mug' ) ); ?>

Which returns, in the post:

<img src="http://mysite.org/wp-content/uploads/ultimatemember/2/profile_photo-190x190.jpg?1679782731" class="gravatar avatar avatar-96 um-avatar um-avatar-uploaded" width="96" height="96" alt="Tess Intern" data-default="http://mysite.org/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg" onerror="if ( ! this.getAttribute('data-load-error') ){ this.setAttribute('data-load-error', '1');this.setAttribute('src', this.getAttribute('data-default'));}">

Because there are um-avatar and um-avatar-uploaded classes, I assume UM is filtering the output of get_avatar. After some rummaging around, I added the following to my functions.php file:

// add_action("init", "um_101821_one_user_avatar_compatibility");
function um_080621_one_user_avatar_compatibility(){
    remove_filter( 'get_avatar', 'um_get_avatar', 99999, 5 );
    remove_filter( 'get_avatar_url', 'um_filter_get_avatar_url', 20, 3 );
    remove_filter( 'avatar_defaults', 'um_avatar_defaults', 99999 );
}

// Remove height/width attributes on avatar img tags.

function myscript_remove_dimensions_avatars( $avatar ) {
    $avatar = preg_replace( "/(width|height)=\'\d*\'\s/", "", $avatar );
    return $avatar;
}

add_filter( 'get_avatar', 'myscript_remove_dimensions_avatars', 10 );

but this seems to have no effect. Am I missing something?

This topic was modified 3 years, 2 months ago by theotherdon.

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Support Yurii
(@yuriinalivaiko)

3 years, 2 months ago
Hello @theotherdon

You can use CSS code to change the visible size of an image, but the physical size of an image cannot be zero.

Use a CSS code snippet to change a visible profile photo size. You don’t need to remove the height and width attributes, because CSS code has greater priority than attributes.
```
img.avatar.um-avatar{
	width: 150px;
	height: 150px;
}
```
The profile is responsive, so you can configure visible profile photo size for different devices.
```
/* profile photo size for large devices (Desktop) */
.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
	top: calc(-150px/2 - 5px);
	width: 150px;
	height: 150px;
	max-width: 150px;
	box-sizing: content-box !important;
}
/* profile photo size for medium devices (Tablet) */
.uimob960.um.um-profile .um-header .um-profile-photo .um-profile-photo-img,
.uimob800.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
	top: calc(-150px/2 - 5px) !important;
	width: 150px !important;
	height: 150px !important;
	max-width: 150px !important;
}
/* profile photo size for small devices (Mobile) */
.uimob500.um.um-profile .um-header .um-profile-photo .um-profile-photo-img,
.uimob340.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
	top: calc(-150px/2 - 5px) !important;
	width: 150px !important;
	height: 150px !important;
	max-width: 150px !important;
}
```
The physical size of an image cannot be zero. The function get_avatar( $user_id, $size ) uses the default value 96 if the $size parameter is empty. See https://developer.ww.wp.xz.cn/reference/functions/get_avatar/

You must pass the physical size of the profile photo to the $size parameter. The Ultimate Member plugin creates these images by default: 40px, 80px, 190px. You can use settings to change default sizes or add more sizes, see https://docs.ultimatemember.com/article/1542-profile-photo-size

So, for example, you can create an image with a physical size of 500×500 and use CSS code to display it as a 250×250 image on the screen.

Regards
Thread Starter theotherdon
(@theotherdon)

3 years, 2 months ago
@yuriinalivaiko –

Thanks for the quick reply!
```
#info img.avatar.um-avatar {margin-left: 0rem;
	margin-right: 4rem;
	width:Calc(30vw - 4rem) !important;
	height:Calc(30vw - 4rem) !important;
	border: 1px solid var(--ln-color);
}
```
Works as desired. I guess I’m better-off setting the size to something like 512, then letting the CSS scale the image down, rather than scaling a 96-pixel image up.

Now, I would much rather have rectangular images, than square ones–but I understand that issue belongs to Gravitar, not UM. So that work-around is for another day.

Thanks again for your help. I’m sure I’ll be back with more questions another time.

–don
Plugin Support Yurii
(@yuriinalivaiko)

3 years, 2 months ago

Hi @theotherdon

Yes, the Ultimate Member plugin makes the profile photo thumbnails square for compatibility. There is no easy way to change the aspect ratio for the profile photo.

Yes, the image is blurry if an image with small physical size is enlarged with CSS. We recommend using images with the same physical and visible sizes, or images with the physical size greater than the visible size. But don’t make profile photos too big because this will influence the performance.

Regards

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Clearing hard-coded sizes from Avatars’ is closed to new replies.