No problem Brajesh, Yes, when I first read it, I tested that hook out, I thought that hook was the answer and then you just need to add the error message. When I read it again, I realisd I misundrstood and couldn’t edit my reply. Thank you very much for looking into this. You are the best.

As for the image, if you want a full screen image, I would recommend 1500px by 500px as this is the same image dimensions as twitter and there are a lot of free 1500px x 500px images available on the internet for users to use. And I can set it in a way where it always takes up the full screen, and to make it respond beautifully.

I have a very keen eye on design, and I’m always asking questions on forums on how to do the most advanced designs. I’ve come up with a great solution with just a little bit of CSS code.

Firstly, I use an image tag in my template ‘‘ $cover_image_url = bp_attachments_get_attachment( 'url', array( 'item_id' => bp_displayed_user_id() ) ); to handle the cover image. But I assume you are using the default CSS ‘backgound-image: url();’ to handle the cover image, this requires different CSS because we have to open the container, and in a way to make it responsive. I was just testing this out, and I’ve got it.

check out this 1500px x 500px image – remember to make your window screen smaller to check out the results on different screen sizes:

http://codepen.io/anon/pen/YybyRq?editors=110

To make a backgound-image: url(); responsive, we need to open up the container so it responds, for a 1500px x 500px image, this is padding-bottom: 33.30%;

When we get to smaller screen sizes (such as 600px), if the image starts to look small, we can change it more to a 3:2 ratio simply by making the padding-bottom slightly bigger 40% as I done. Just let background-size: cover; and background-position: center; take care of the rest. For desktop screen the height is too big so we make it smaller by just setting a height on the container, again letting again letting background-size: cover; and background-position: center; take care of it.

Finally, it gets even better, if there is a cropping feature (like the one I first mentioned), a user can upload any size they like, and let the cropper crop it 3:1, even if is a small image like 600px x 200px, the CSS I provided will stretch the image and ensure it will always be full width with a 3:1 responsive design, with the exact same results as if it was 1500px by 500px. Here is another example of the same CSS code, but with a small 600px x 200px:
http://codepen.io/anon/pen/jboZXM?editors=110
it produces the same results (but it just stretches it for desktop screen, making it a bit blurry, but users will have that recommended message to follow for the best quality). This is why it would also be cool for a cropping feature like the avatar crop.

Hope you like this design, you don’t have to use it but might give you some ideas for your theme.

Thanks Brajesh.

On the cover image page, there is only a recommended message before a user uploads anything, it says “For better results, make sure to upload an image that is larger than 1200px wide, and 400px tall.”

This is just a recommended message and doesn’t prevent a user from uploading a smaller image. Is this the message you meant? Because I’ve also still got a fresh WP multisite and BP install, with all plugins removed (except for BuddyPress) and it is not preventing a user from uploading a small dimension image. Is this something that can be turned on do you know?

Thanks. I meant to say the activity action type, not the scope. But ‘mpp_media_upload’ is working for the action type too. I’m not a great coder, I just have some coding and BuddyPress knowledge to enhance my theme, I removed the activity sub menu filter on the main activity page and managed to come up with something like the code below, and it now all works great, unless you notice anything wrong with it:

/**
* Filter activity loop
*
* Display just the activity updates (with media) on front-page from the logged in user and
* from who a logged in user is following
*/
function cm_activity_filter( $retval ) {

if ( bp_is_activity_front_page() ) {
$retval[‘scope’] = ‘following,just-me’;
$retval[‘action’] = ‘activity_update,mpp_media_upload’;
}

return $retval;
}
add_filter( ‘bp_after_has_activities_parse_args’, ‘cm_activity_filter’ );

• This reply was modified 9 years, 1 month ago by Andy.