Cover Image Size

[Quint]

Hello,

It appears that the image is uploaded at 625 x 225 px. This would be fine on mobile phone; however, on a tablet or desktop, the image is blurry. Could you provide me with the code and what file to place the code so that the original image is used?

Cheers,

Quint

[Anve S.]

HI @quint ,

The cover image is stretching the image throughout the cover image area , that is causing it to get blurred. For a better looking image try uploading image sized 1050 x 400 .

Regards
Anve

[Aaron]

I’ve made sure to only upload photos that are 1050×400, but they still stretch depending on browser width. Is there a way I can ‘block’ the cover photo, so that it doesn’t stretch at all, it just stays static. (This would create bars on either side, but that is ok.)

[Carlos]

I’m also having this same problem and it is quite annoying. I’m uploading images at the recommended values (1050×400) but it appears to be uploading the image only at 625×225 and stretching it. It looks really bad on PC @ 1080p. How can I ensure it uploads it at the size I am using and uses that image instead of the 625×225 size?

[Carlos]

I want to note that this is happening for cover photos on the home page slide, group cover photo, and profile cover photo.

[Aaron]

Still no love on the cover photos or blog images. Honestly I’m about to lose my mind with these things. I have tried EVERY POSSIBLE IMAGE RESOLUTION, and they are all blurry. Please revisit this thread.

[Anonymous]

Hi @carlossanchezjrgmail-com & @aaronmcnany, I have noted it and include it in our todo list our developer will check it that what causing error there and hopefully will try to fix it asap.

Regards

[Carlos]

Thank you! It would be very much appreciated. 🙂

[Anonymous]

🙂

[Aaron]

This is exactly what is happening to me as well–the photos are being displayed as 625×225, and they look terrible. Is there ANYTHING you can do to fix this soon? It’s honestly a pretty big deal…it makes the site look terrible when the images are all blurry. Below is an example of a photo that I uploaded as 1050×400, but now is being displayed as 625×225 being stretched to size. Please help!

[Anonymous]

Hi @aaronmcnany, Please add the following css to set the cover image..

.bb-cover-photo .holder {
    background-size: 100% auto !important;
}

Regards

[Aaron]

It’s doing the same thing–uploaded a 1050×400 image as well as a 3648 × 2048 (image below), and it’s still very blurry. It’s not uploading with the correct resolution.

[Varun Dubey]

Hi @aaronmcnany @carlossanchezjrgmail-com @quint

If you need to increase cover image resolution you can add following function inside child theme functions.php
You can play with width as per your requirement, keep the height same 300

function bb_cover_image( $settings = array() ) {
    $settings['width']  = 1200;
    $settings['height'] = 300;
 
    return $settings;
}
add_filter( 'bp_before_xprofile_cover_image_settings_parse_args', 'bb_cover_image', 10, 1 );
add_filter( 'bp_before_groups_cover_image_settings_parse_args', 'bb_cover_image', 10, 1 );

Regards
Varun Dubey

[Aaron]

Seems to be working!! Thank you!

[Anonymous]

Glad 🙂