Skip to:
Content
Pages
Categories
Search
Top
Bottom

Cover Image and Profile Pic Blur


  • gooalgenie
    Participant

    @gooalgenie

    4 years, 5 months ago

    Hey Guys,

    Wordpress version: 5.4.2
    Buddypress Version: 6.1.0

    (Themes and plugins are all up to date. All the buddy press features are working fine except the below two issue)

    Yes I face the same issue with twenty, twenty themes.
    Website URL: gooalgenie.com

    Issue

    I am Facing the issue with Cover Image and Profile Pic looking Blur

    Solution Tried did not affect:

    Tried following Code for CSS:

    #buddypress #item-header-cover-image #item-header-avatar img.avatar {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; 
    }
    #buddypress #header-cover-image {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; 
    }

    Even tried each Image rendering values but no luck.

    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;

    /* Global values */
    image-rendering: inherit;
    image-rendering: initial;
    image-rendering: unset;

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

  • Carlen
    Participant

    @carlen

    4 years, 4 months ago

    I am not sure what this may be for you, but I know that usually this is because the thumbnail version of the profile pic is being pulled and not the full version.

    It would be a php issue in the theme, not a css issue.


    Varun Dubey
    Participant

    @vapvarun

    4 years, 4 months ago

    @gooalgenie You can define avatar image sizes inside the child theme functions.php or at bp-custom.php

    Customizing BuddyPress Avatars

    The cover image default size can also be updated using the following ref.

    BuddyPress Cover Images


    gooalgenie
    Participant

    @gooalgenie

    4 years, 4 months ago

    Hey @carlen & @Vap Varun,

    Thanks for reply @Carlen – Yup it seems PHP issue


    @Varun     – Thanks for providing me both the docs, I tried both of them it made no effect blurness still exists. Except for cover Image I have not provided specific width as provided in example width: 1170 rest all options I tried.

    Thanks,
    Vicky


    Varun Dubey
    Participant

    @vapvarun

    4 years, 4 months ago

    @gooalgenie after adding code, it will be visible on a new avatar and cover images.

    function your_theme_xprofile_cover_image( $settings = array() ) {
    $settings['width']  = 1170;
    $settings['height'] = 250;
 
    return $settings;
}
add_filter( 'bp_before_members_cover_image_settings_parse_args', 'your_theme_xprofile_cover_image', 10, 1 );

    You can changes values for width and height as per your requirement. For testing code, you can also use code snippet plugin and add code inside it


    gooalgenie
    Participant

    @gooalgenie

    4 years, 4 months ago

    Hey @VapVarun,

    Thanks a ton for help – Yup it seems to be working, Applying width solves blur issue.


    gooalgenie
    Participant

    @gooalgenie

    4 years, 4 months ago

    Hey @VapVarun,

    Do you have solution for this too, if you do help me on this too.

    Nav and Sub Nav Ajax

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.

Topic Info

Topic Tags

Skip to toolbar