Profile Cover Plugin

I wrote a plugin that adds the ability for users to set a profile cover. I wrote this for my personal use, but feel free to use it. Keep in mind that I wont be offering a ton of support. Its the first release so there might be some issues. Install like you would any other plugin by uploading the zip and activating “Buddypress Profile Cover”.

The plugin does a few things

1 – Adds a new submenu item in your profile settings called ‘Change Cover’

2 – Adds an rtMedia uploader to the Change Cover page.

3 – Automatically sets the uploaded image to your profile cover. (Note: I’m still sorting out the jQuery to auto display the new image. For now, users will see their new cover once they navigate to a new page or refresh the current page.)

4 – If you have rtMedia Pro, users will be able to set their profile cover from their media tab by hovering over the image.

5 – Adds a “Add cover image” button above the users avatar if they don’t have one set. This is only displayed if the user is looking at their own profile.

The plugin works by adding a new div above the users avatar. I have the div height set to 300px. You can change that by adding the following to style.css in kleo-child.

#profile-cover-wrapper {
	max-height: 300px;
}

I have made the avatar a bit smaller and also hid the “show more/less” toggle. (thanks to @Parkproductions for the display ideas.)

Here’s the tricky part. I have yet to figure out a way to add an image crop function to ensure the uploaded image will fit nicely. rtMedia has a setting for Featured Image size. You need to set that. If you stick with the 300px height, make sure the Featured Image size is also 300px. rtMedia also gives you the option to crop the image. My advice for now is to play with turning that off and on to see what you like best. Make sure you test landscape and portrait images. Once you decide on your settings, you can add instructions (tips) for the user to follow if you’d like. To do this, I’ve created an admin menu wp-admin -> settings -> bp profile cover. Add your instructions and they will print out just above the profile cover uploader. An example of this would be

Cover photos look best if you upload an image that is 800px wide by 300px tall.

To do:
1 – Add jQuery to auto display new cover
2 – Ability to unset profile cover via profile settings. (Currently can only be done in lightbox or, for rtMedia Pro, from image hover.)
3 – Hook into rtMedia image crop functions…. maybe.