New to the community? Start here

Changes regarding the buddypress profile pic

Hi!

I want to make some changes in my site regarding how the profile pic is handled (since I have buddypress incorporated, I’m guessing this part is handled by bp):

1-Right after logging in, the user can see a mini profile pic. I’d like to allow users to change it by clicking on it. It can redirect to the page where the user uploads his pic -I’m probably going to change the bp permalinks to look like something customized for my site, but right now it’s /members/username/profile/change-avatar/

2-I want to remove the text displayed at the page mentioned above. The text is this one: “Your profile photo will be used on your profile and throughout the store. If there is a Gravatar associated with your account email we will use that, or you can upload an image from your computer.”.

3-I want to have the Select File button to look like the Upload Image bp button.

4-Depending on the size of the image, it surpasses the borders of the page -this happens right after the user uploads it, when he’s going to crop it.

The support access is active and you guys already have my FTP login data (it has Tyler’s name in the subject line of the email). You can either perform these changes there or give me the instructions to do so, whatever you guys think it’s best.

Thanks.

Sat, 18 Oct 2014 18:20:07
  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi, Gabriel!

    For issue #2, try this in your custom CSS: 

    .profile p:first-child {
    
display: none;
    
}

    For issue #3, try this: 

    #avatar-upload input{
    
background: #fff;
    
border: 1px solid #ccc;
    
color: #777;
    
font-size: .8rem;
    
cursor: pointer;
    
outline: 0;
    
padding: 4px 10px;
    
text-align: center;
    
text-decoration: none;
    
}

    For the first issue, you’re going to need to wrap the avatar element in the template files with a conditional HTML statement to change the link behavior. Like so:

    profile/change-avatar”>AVATAR CODE

    Hope this helps!

  • Wheel of Commerce
    • WordPress Warrior

    Hi! First of all, thanks for the help.

    1-How do I do that? Having in mind that my whole experience with coding is to change what I already have -I’ve never built code from scratch.

    2-That text is still there.

    3-The button still doesn’t have the same look as the one beside it. If it can’t be changed, that’s ok, no big deal; I just thought it’d be something simple to do.

    4-Any way to fix this 4th issue I’ve mentioned?

    Thanks again. :slight_smile:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Gabriel!

    #1 – I totally forgot to wrap that in code tags, so it mangled, sorry!

    Here’s the code again:

    <a href="<?php echo bp_loggedin_user_domain() ?>profile/change-avatar">AVATAR CODE</a>

    That code should wrap around the code that displays the avatar code on your profile pages. But, knowing your site has a few whistles and bells hard coded in, I suspect this may be harder than it appears.

    #2 and #3: Try adding !important before the semi-colons in each line. The first set should hide the first thing wrapped in p tags, and the second is the exact CSS for your other button, so both should work, if they aren’t being overwritten by another bit of CSS.

    Thanks!

  • Timothy
    • Chief Pigeon

    Hey Gabriel,

    As mentioned in the chat, I removed that text for you. I used:

    .profile p:only-of-type{
    
display:none;
    
}

    The other issue you mentioned about the buttons, we didn’t really have time in the chat but can you go over exactly what you want there. Perhaps include a screenshot if that’s cool, this should help me see what you want to achieve.

    Take care.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi, Gabriel!

    Did Tim’s code help with hiding that text?

    For the button, try removing lines 5-7 on teh CSS I gave you. That should at the very least give you a button the same size, color, and font size as the other button.

    I’ve just scanned every single line of code in BuddyPress, but I can not find where the link to the profile page is added to the avatar. There were three threads on the buddypress forums with a similar question, but all were unanswered. I found the code above in a stack overflow thread, but as it turns out, it’s no longer applicable to how BuddyPress was made.

    For your fourth issue, do you have upload limits in place? Preventing users from uploading large files should prevent them from uploading oversized images that don’t fit in the crop tool.

    Thanks, Gabriel!

  • Wheel of Commerce
    • WordPress Warrior

    Hi! Thanks for answering.

    For the fourth issue, isn’t there a way to accommodate any image size in the screen that appears right after choosing the file? This way users can use any size of image and it would still fit the borders of the theme.

    Changing the subject, any idea of when somebody can answer my two other threads?

    https://wpmudev.com/forums/topic/redirect-to-login-page-when-username-or-password-are-wrong#post-759494

    https://wpmudev.com/forums/topic/first-of-all-support-access-is-granted-so-you-guys-can#post-759591

    Thanks again.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi Gabriel!

    Told you we’d get to you. : )

    Actually, no, because of math. If an image is say, 4000px by 4000px, which isn’t out of the question for a lot of high res images, there’s no way to make it display in a monitor that’s say 1440 x 900px, it’d be like trying to fit an elephant into a Chevy Volt. On a more practical take, you don’t want to be responsible for storing a gigantic image file that’s only going to be showing at 100 px square.

    As I’ve mentioned, we answer threads from oldest to newest, when we aren’t answering new questions on the front line. It has been very busy recently, so our backfeeds are longer than normal. We answer your questions, and other member’s questions as fast as we can. As you’ve discovered, you can sometimes speed up that process by asking the chat moderator to bump you to the front of the line when you ask questions in our Live Chats, but otherwise, know that your wait means we’re trying to give every single member the same level of personalized attention as we give you.

    Have a great Saturday, Gabriel, I’m sure I’ll see your other threads before the end of my shift.

  • Wheel of Commerce
    • WordPress Warrior

    Page with the issue (you have to access my wp dashboard and deactivate the ultimate coming soon page plugin -support access is active):

    http://www.wheelofcommerce.com/members/username/profile/change-avatar/

    *replace “username” with your username

    Here’s what I’m talking about (screenshot):

    http://minus.com/i/pgrSMFeR2p7S

    What I want is to automatically adjust the image, so it fits the theme’s borders, without changing the size of the image that will be uploaded; I just want to adjust it when it’s displayed at the upload page, so it fits the borders -I don’t want to resize the actual image size. I that’s not possible, I’d like to know what size do I have to input at Settings > Media, so the image doesn’t overlay the borders.

    Thanks.

  • Wheel of Commerce
    • WordPress Warrior

    Michael Bissett gave me the code below, that allows large images to be uploaded without them surpassing the borders of the theme. It applies a scroll bar to large images, so users can see all of it.

    .jcrop-holder {
    
overflow-y: scroll;
    
max-width: 450px;
    
max-height: 220px !important;
    
}

    Any way to have the whole image adjusted without having the scroll bars at it? I want the image to fit in those borders, but I don’t want to change the actual image size, if you know what I mean.

    Thanks.

  • Jack Kitterhing
    • Code Norris

    Hi there @Gabriel,

    Hope you’re well today and thanks for your question! :slight_smile:

    To clarify, do you wish to remove the cropping step all together within BuddyPress, or do you want to keep the cropping step, but auto crop to a specified size for the avatar?

    Please advise.

    Thanks!

    Kind Regards

    Jack.

  • Wheel of Commerce
    • WordPress Warrior

    I think the best way to explain myself is through an example: I want to have the same “resizing” effect we see on google images when we search for an image, it’s large, but when we click on it to see, it’s displayed shorter -the image itself is not resized, it’s just the way it’s displayed. If there’s a way for the profile pic to be displayed like that at the upload page, the scroll bars for large pics wouldn’t be necessary. The cropping tool stays, though, in case the user wants just a part of the pic.

    Thanks.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey Gabriel!

    Okay, so you don’t want the image resized, but you want it resized to fit the browser window when a user uploads a large image file. I think I understand you now.

    Your best bet would be to create a max size for the uploaded avatar source image. To do that, since I don’t have support access right now, so I can’t see your front page, you’ll want to navigate to that page and upload an image.

    When it’s displaying in the edit image field, right click it and choose “inspect element.”

    This should give you the name of the element. Then add the following to your custom CSS, replacing the parts indicated with your specific values:

    ELEMENT NAME {

    max-width: UPPER IMAGE WIDTH LIMIT;

    max-height: UPPER IMAGE HEIGHT LIMIT;

    }

    What this will do is limit the display size of the image to less than the listed parameters. It won’t change the file size of the original image, or the dimensions of the original image, but it will display in a way that fits your screen size.

    Hope this helps!

  • calvinrogercanas
    • New Recruit

    Hello @Gabriel

    I hope you are well today!

    I am happy to do the changes for you. :slight_smile: I get that you want the image to keep the size but just resize it when needed.

    For example: Image is 1000 x 1000 – if you want to use it for thumbnail view so you just need to resize it but the image’s original size is still 1000 x 1000. Correct me if I am wrong. :smiley:

    In order for me to do that, Could you grant support access from the dashboard plugin. See https://wpmudev.com/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Hoping to solve the problem in no time!

    Best Regards,

    Calvin

  • Wheel of Commerce
    • WordPress Warrior

    Ok, I give up, it’ll be faster if you guys do it, haha; I’ve tried to inspect the element as said by Michelle, but I tested for two different images and the values I’m getting for height and width are different, so I’m obviously doing something wrong here.

    Support access is active. The code below is the last one I’ve input at that custom CSS panel -it’s the one that put the scroll bars in large images when uploading a profile pic. If possible, I’d like this new CSS to be added at that panel too, since it shows all the CSS modifications in an easy to spot way. It can just replace the code below, since this one won’t be necessary anymore.

    .jcrop-holder {
    
overflow-y: scroll;
    
max-width: 450px;
    
max-height: 220px !important;
    
}

    Thanks.

  • calvinrogercanas
    • New Recruit

    Hello @Gabriel

    Hope you’re well today?

    After finding the script use for the image cropping functionality. I found the plugin’s homepage then I read a page where the same issue like yours happen. http://deepliquid.com/content/Jcrop_Sizing_Issues.html. I can do this by editing javascript files but I need to access your site thru FTP.

    Can you please send in:

    – In the subject field add “Attn:Calvin Canas”

    – Link back to this thread

    – Include admin/network access

    – Include FTP

    On the contact form, select “I have a different question“, this ensures it comes through and gets assigned to me.

    https://wpmudev.com/contact/

    Looking forward for your reply and I hope we can solve this one in no time.

    Best Regards,

    Calvin

  • Wheel of Commerce
    • WordPress Warrior

    Hi, man!

    I’m trying to solve a weird problem I’m gaving first -seems like my site has been hacked, but I’m not really sure. As soon as this more urgent issue is solved, I’ll get back here. Btw, you guys already have my FTP login data, I’ve sent it with Tyler’s name in the subject field like 2 months ago -WPMU staff has access my site through FTP several times since then.

    Thanks.