BuddyDev

Search

[Resolved] Browse profile pic and crop fixed and broken!

Tagged: , , , ,

  • Participant
    Level: Master
    Posts: 163
    Audiomonk on July 5, 2018 at 6:51 am #16130

    It’s regarding this problem.

    https://buddydev.com/support/forums/topic/no-option-to-save-profile-photo-cropping-doesnt-work-either/

    Eventually I had to hire someone to fix that, I recently swapped themes and ran into the same problem again. I spent two days experimenting with CSS to repair it. BUT it broke the layout on the activity and friends screens.

    I can’t follow what files I need to copy to my theme to customise the templates, I edited a couple directly after taking backups.

    The problem is this code

    
.bp-screen-reader-text {
    clip: auto;

    height: 1px;
    overflow: visible;
    position: absolute!important;
    width: 100px;
    word-wrap: normal!important;
}

    This is how I finally managed (along with editing BP template css) to fix the issue of no browse button for the profile upload, and to get the crop button showing afterward.

    How can I add this so it only loads on the profile page? Normally I’d have a page ID I could use in CSS, but I can’t get one for this as it’s dynamically created.

    The cover image tab, also recommends sizes that are too big for my theme also, don’t know how to fix that.

    I just don’t get why all these issues after I changed my theme, it’s a good theme, well written (Generatepress)

  • Participant
    Level: Master
    Posts: 163
    Audiomonk on July 6, 2018 at 6:29 am #16147

    Steps to help me.. 🙂

    1) Could you explain what I have to folders I have to copy to my theme folder (child theme) so I can work on things without breaking buddypress/mediapress

    2) Could you explain for the CSS how it displays the browse button when changing profile pic, this is the root of the problem. The fix that I apply to display that breaks the display on the activity screen and the friends screen.

    3) On the cover image upload tab, there’s a message that advises “images must be larger than …..” the image sizes it shows are too big to show on my site. How can I alter that message to show the correct sizes for my site.

    The browse button disappearing has happened with three themes now, and I see from the Buddypress forum it’s a common problem without much of an explanation or solution. So maybe this will be the fix for a few people.

  • Keymaster
    (BuddyDev Team)
    Posts: 24212
    Brajesh Singh on July 6, 2018 at 11:29 am #16153

    Hi Audiomonk,

    The problem is not related to MediaPress.

    The cover/profile images are part of BuddyPress core. It was for clarification.

    Now, coming to the issue, I don’t see “bp-screen-reader-text” as a reason of problem. If it is, It is very strange.

    Here is how template overrides work in BuddyPress

    Copy xyz.php from buddypress/bp-templates/{template-pack-name}/buddypress to yourchildtheme/buddypress/xyz.php

    You have to maintain the hierarchy here. For example, buddypress/bp-templates/{template-pack-name}/buddypress/members/index.php goes to yourchild theme/buddypress/members/index.php

    Where the templates packs available with BuddyPress are ‘bp-legacy’ or ‘bp-nouveau’

    Now, for the avatar/coverimages, you will need to override assets/_attachments/cover-images or avatars.

    Regards
    Brajesh

  • Participant
    Level: Master
    Posts: 163
    Audiomonk on July 7, 2018 at 6:57 am #16170

    Hi,

    Thanks for the explanation of how the template copying works, I understand it now, was a bit hard to follow on the Buddypress docs.

    The screen reader css, when altered stops the submit button from being hidden on the profile and cover image sections. Because the URL is dynamic for those sections, I can’t apply specific CSS via a page ID, so when I apply my fix to it, it breaks the layout of other pages.

    It stops the functionality of profile and cover images completely if there’s no submit button.

  • Participant
    Level: Master
    Posts: 163
    Audiomonk on July 7, 2018 at 7:40 am #16171

    <input id="html5_1chppsu451rgan5lgr7pe71ke4f" type="file" style="/* font-size: 999px; *//* opacity: 0; */position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;" accept="">

    This is from Chrome inspection tools, for the submit button. opacity: 0? I disable that and the button appears, it’s in the wrong place, but it appears and works.

    I searched through css and the templates for this line, can’t find it to be able to reset opacity. Why is font size set to 999px ?

  • Keymaster
    (BuddyDev Team)
    Posts: 24212
    Brajesh Singh on July 7, 2018 at 7:59 am #16174

    Hi Audiomonk,

    That is a generated file input.

    Can you please provide me a temporary login(normal subscriber user) and link me to the page having issue.

    I can check and should be able to help.

    Thank you
    Brajesh

  • Participant
    Level: Master
    Posts: 163
    Audiomonk on July 7, 2018 at 8:06 am #16175
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24212
    Brajesh Singh on July 7, 2018 at 8:11 am #16177
    This reply has been marked as private.
  • Participant
    Level: Master
    Posts: 163
    Audiomonk on July 7, 2018 at 8:12 am #16178
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24212
    Brajesh Singh on July 7, 2018 at 8:14 am #16179
    This reply has been marked as private.

The topic ‘ [Resolved] Browse profile pic and crop fixed and broken!’ is closed to new replies.

This topic is: resolved