Tips and Tricks HQ Support Portal › Forums › WP eMember › WP eMember Tweaks › Changing dimensions of gravatar
Tagged: change profile image size, square gravatar
- This topic has 9 replies, 6 voices, and was last updated 3 years, 10 months ago by jeffeinstein.
-
AuthorPosts
-
February 20, 2012 at 9:39 am #5597johnw1965Member
Where would I go to change the default dimensions of the members’ gravatar?
I need them to be width=100px and height=140px
I know from http://codex.wordpress.org/Using_Gravatars
that I can use something like
<img alt='' src='http://gravatarurl_or_default_url' class='avatar avatar-$size' height='$size' width='$size' />
Where would I tweak this code in the eMember files?
February 20, 2012 at 10:58 am #42162blatternetMemberOn my new “login center” I display some useful infos for my members. There I use the new shortcode to display the picture of a member:
[wp_eMember_user_details user_info="profile_picture"]
Then I just adjust the size of the picture in my style.css:
.eMember_custom_profile_picture {
width: 100px;
height: 100px;
}I’m not sure if this is the answer to your question, but perhaps it helps.
February 20, 2012 at 11:48 pm #42163adminKeymaster@blatternet, Thank you for sharing your suggestion. That is a nice way to do it.
@johnw1965, profile picture image displayed in the “Edit Profile” page has an ID of “emem_profile_image”. You can target that from the CSS file and change the dimension like the following:
#emem_profile_image{
width: 100px;
height: 140px !important;
}July 8, 2020 at 11:45 pm #42164clearscopedesignParticipantCan you please tell me – is there a way to make it so that the eMember profile image that members upload to their profile can be automatically made to be of square dimensions?
July 9, 2020 at 3:23 am #42165wzpModeratorThere is no “easy way” to force cropping during the upload process. However, through the magic of CSS, you can do the cropping.
#emem_profile_image{
width: 300px;
height: 300px !important;
object-fit:cover;
}In this example, the image will crop 150px from the center of the image.
You can also do this…
#emem_profile_image{
width: 300px;
height: 300px !important;
object-fit:cover;
border-radius:50%;And you will get a circle
July 10, 2020 at 4:34 am #42166clearscopedesignParticipantThank you – what if the profile image needs to be the width of its container, rather than have a fixed width, such as when it appears in bbPress forum posts? In other words for it to be mobile responsive that way. Is there a way to do this without specifying a fixed width for the image?
July 10, 2020 at 9:33 pm #42167wzpModeratorTry using percentages instead of “px” (pixel) units.
January 18, 2021 at 9:34 am #82342jeffeinsteinParticipantHello,
I’m using eMember Prodile Extended to generate a user directory with links to member detail pages such as [as2ac.com/vendor-detail?member_id=34] How do I change the profile image size? I need to make it larger. Thanks for your help, as always.
Jeff
January 18, 2021 at 4:32 pm #82343wzpModeratorThe dimensions have been hard coded into the addon.
********** WARNING: Running With Scissors Ahead **********
********** WARNING: Running With Scissors Ahead **********- Backup the addon file: detailed_profile.php
- Now edit the file detailed_profile.php and look for the following line:
$profile_img_tpl = '<img src="_%img_url%_" height="100" width="100" />';
- Now change the height and width values to whatever you need, and then save the file.
January 19, 2021 at 4:51 am #82357jeffeinsteinParticipantThank you! Worked great! [as2ac.com/vendor-detail?member_id=34]
- Backup the addon file: detailed_profile.php
-
AuthorPosts
- You must be logged in to reply to this topic.