BuddyDev

Search

[Resolved] Avatar full width on mobile only

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 11, 2020 at 10:08 am #27299

    Hi Brajesh, I would like my avatars to be full width in the header on mobile, but not on tablets and desktop. It might be possible to achieve with a Media Query, but I was thinking if there was a smarter solution e.g. adding other definitions to the code below?
    Another issue is the differen’t mobile screen sizes.

    What is the best solution in your opinion?

    Regards
    Carsten

    if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
    define( 'BP_AVATAR_THUMB_WIDTH', 100 ); //change this with your desired thumb width
 
if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
    define( 'BP_AVATAR_THUMB_HEIGHT', 133); //change this with your desired thumb height
 
if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
    define( 'BP_AVATAR_FULL_WIDTH', 768 ); //change this with your desired full size, well I changed it to 260 :)
 
if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
    define( 'BP_AVATAR_FULL_HEIGHT', 1021 ); //change this to default height for full avatar
  • Keymaster
    (BuddyDev Team)
    Posts: 24599
    Brajesh Singh on January 11, 2020 at 7:27 pm #27306

    Hi Carsten,
    Thank you for the question.

    Media query is your best option here. BuddyPress only recognizes thumb/full,so you can only specify these 2 sizes.

    You may use wp_is_mobile() is php code and show full image there instead of the thumbnail. If you are not comfortable with php, using media query seems the right solution.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 13, 2020 at 10:49 am #27317

    Hi Brajesh, thanks for your clarification about avatars.

    I solved it by using Media Queries

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 13, 2020 at 3:57 pm #27320

    Hi Brajesh, I found an issue when defining the BP_AVATAR_FULL_WIDTH / BP_AVATAR_FULL_HEIGHT in the code above.

    It a user wants to change avatar on mobile, the image in the ‘avatar-to-crop’ window is overflowed and not showing the full image, making it impossible to add and crop an image on mobile.

    FULL_WIDTH / BP_AVATAR_FULL_HEIGHT set to 200

    https://imgur.com/eLrQig4

    FULL_WIDTH / BP_AVATAR_FULL_HEIGHT set to 700

    https://imgur.com/7uMEMIU

    Is there a solution to this?

    Regards
    Carsten

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 13, 2020 at 8:59 pm #27321

    Hi, I’m seeking the right solution for showing thump and full size avatars, and the question is: do I need the code below. If I remove it, and add a Media query like this, what will happen then?

    Will BuddyPress then only recognize the thumb size and enlarge this to full size with bad resolution as a result?

    @media (max-width: 700px) { #buddypress div#item-header img.avatar {

    width: 100%;
    }
    }

    The code in question:

    if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) )
    define( 'BP_AVATAR_THUMB_WIDTH', 120 ); //change this with your desired thumb width
 
if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
    define( 'BP_AVATAR_THUMB_HEIGHT', 120); //change this with your desired thumb height
 
if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) )
    define( 'BP_AVATAR_FULL_WIDTH', 700); //change this with your desired full size,weel I changed it to 225,300 :)
 
if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) )
    define( 'BP_AVATAR_FULL_HEIGHT', 700); //change this to default height for full avatar

    Regards
    Carsten

  • Keymaster
    (BuddyDev Team)
    Posts: 24599
    Brajesh Singh on January 14, 2020 at 6:33 pm #27329

    If you do not use the code, your images will be stretched to fill the size, which will make the quailty of the image bad.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 14, 2020 at 6:41 pm #27332

    Hi Brajesh, yes I discovered the consequences of not using the code.

    Uploading a profile image from the phone, is an important feature on a social network page. Is there any solution to the crop image issue on phone, when full avatar size is larger than 200-300px ?

    Regards
    Carsten

  • Keymaster
    (BuddyDev Team)
    Posts: 24599
    Brajesh Singh on January 17, 2020 at 8:25 pm #27375

    Hi Carsten,
    There is no simple solution for this as the co-ordinates are used in cropping.
    You can define custom avatar size on mobile using wp_is_mobile() though.

    Regards
    Brajesh

  • Participant
    Level: Yogi
    Posts: 1112
    calu on January 17, 2020 at 8:45 pm #27381

    Hi Brajesh, thanks for your feedback, I found a compromise, by setting the size for the full avatar to 355px., according to the crop frame by using the inspector. In fact, there are no reason for a bigger avatar, since I only have full frame avatar on the phone.

    Thanks again

    Regards
    Carsten

  • Keymaster
    (BuddyDev Team)
    Posts: 24599
    Brajesh Singh on January 19, 2020 at 6:33 pm #27395

    Hi Carsten,
    Thank you for sharing. I am glad that you found a balance.

    Regards
    Brajesh

The topic ‘ [Resolved] Avatar full width on mobile only’ is closed to new replies.

This topic is: resolved