Profile Cover Plugin

[sharmstr]

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.

COPY CODE

#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.

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[davidoryang]

Just installed it
It is such a great enhancement to the monotonous look. 🙂
I’m looking forward to the completion of that To-do list

[davidoryang]

One thing though…
It seems to have an effect on BuddyPress Groups. The group avatar has been reduced a bit (as with the profile), but its top half is now out of line with the container.
Is it possible to have the plugin’s functionality fully extended to groups as well?

[sharmstr]

Yeah, that’s next. I forgot to put it on the todo list. Should be easy enough.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Parkproductions]

Looks good sharmstr, I will likely implement it once you get the cropping function, as I finally got my site stable enough to start advertising.

[daltontastic]

It would be awesome if you added Sweetdate support

[sharmstr]

I dont use Sweetdate.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Checking this out @sharmstr

[sharmstr]

Cool. I’m working on getting it to work with groups now. The main issue being that rtMedia doesnt have a ‘set featured’ for groups :/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Nice work @sharmstr , I have some issues where the image isn’t really behind the profile picture, it’s more above it. Otherwise it’s looking good!

Attachments:

You must be logged in to view attached files.

[Splendor]

Sorry, and yes it doesn’t take out the whole space in the element..

Attachments:

You must be logged in to view attached files.

[sharmstr]

@splendor: The avatar should be sitting half way into the cover image. That’s how I coded it. Can you explain what you mean in the second post (whole space in the element).

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Attached is an update that should target the profile screens only. Groups should be unaffected now until I have a chance to add them in.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Splendor]

Sorry @sharmstr , I mean that there is a gap between the breadcrumbs above and a gap in between the sidebar on the right side. You can see that on the second image where the thin lines are..

[Splendor]

Also I believe that is would be better to have the profile cover goes down and stop before the navigation icon or only to where the profile picture ends. That will save space and also what I know of, many people don’t like to scroll, they want everything in near distance.

[sharmstr]

Yep. The cover container is the same width and has the same “padding” that the default kleo header has. I didnt change that. There’s going to be a gap above and to the sides because its sitting inside the ‘template-page col-xx tpl-right’ div. See screenshots for better explanation. I’ve added a border to the default kleo header to illustrate this.

To expand on your other question about the avatar being below the cover, you can adjust its position by overriding the css. Specifically

COPY CODE

.bp-user #buddypress #item-header-avatar {
	margin-top: -50px !important;

}

Increase the -50px to whatever suits you. MAKE SURE YOU HAVE THE UPDATED PLUGIN FILES INSTALLED.

The reason I chose to hold the cover in its own div above the avatar instead of having the avatar sit inside the cover div is because it scales better.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[sharmstr]

Also I believe that is would be better to have the profile cover goes down and stop before the navigation icon or only to where the profile picture ends. That will save space and also what I know of, many people don’t like to scroll, they want everything in near distance.

You can adjust the height in the css to stop below the profile picture by using the css I provided above. The problem with having it go to just above the nav menu is the text color. You have no idea what color the cover image will be, so setting the text so it legible for every possible image color is impossible. You’d have to perhaps but a background color on those text containers (user-nicename, activity, last-update) See screenshot.

Again I wrote this for my site and thought I’d share. Feel free to change it to anything you want, but I dont have a ton of time to devote to customizing it for everyone’s taste. I need to get my site launched 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Splendor]

I Yes, I understand that @sharmstr. Thank you for your time and effort for making this. It was only a suggestion about the profile cover placement. I can do some of the fixes myself with the code above and more css to it. Mostly is the white color that solves that problem, and surely a little background color also.

[Splendor]

By the way, What was your css code the latest image?

[sharmstr]

I was setting the background on the ‘col-sm-12’ div.

COPY CODE

#buddypress div#item-header {
   background: url(xxxx);
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Sorry, not on the col-sm-12 div. The item-header div.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Ok, i was trying highering to the margin-top: -100px !important; but it stays at -50..

[sharmstr]

Ah. Yeah, that image was only an example of what I as talking about. You cant set it with the plugin.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

@sharmstr, I would to ask a questions about your mypost plugin. Can you please tell me which parts I need to comment for making it work not only for authors, for all levels?

[sharmstr]

@splendor moving post plugin question over to that topic https://archived.seventhqueen.com/forums/topic/show-posts-in-profile-hack

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

Nice plugin, however, I am not getting those results, I used the original as well as the updated plugin and each time I had the following issues.

1. When cover was manually uploaded the width/height was 100px and centered behind the main user avatar.
2. (rtMedia Pro) When I select set as cover no image was set and the height (the space between the avatar and the main site menu) become 0px

Same results in Chrome, FF and IE. I am running WP 4.0 BP 2.0.2 rtMedia (base) 3.7.8 and rtMedia Pro 2.5.2 with nothing especially relevant running in the child theme.

[sharmstr]

What’s your featured image size set to in rtMedia -> image sizes? Do you have “enable json api” turned on in rtMedia -> Other Settings? Can I have a link to your site so I can see what’s happening?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Kieran]

This reply has been set as private.

[sharmstr]

@kieran – I cant see private replies. I’m just a user on this forum like you.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

Hi sharmstr,

Would you think this hook would be a great add-on to add to my website (as you have seen by yourself? 😉 )

[sharmstr]

@Majestic: Sure 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

@kieran – Got your response notification.

FYI json api is off and featured is on default 100 x 100 so that may be the issue

LOL That’s definately the issue for “When cover was manually uploaded the width/height was 100px and centered behind the main user avatar.” Come on man. Read my instructions up top… “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.” 🙂

I’m heading over to your site now.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

@kieran – can’t get into your site to check it out.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

Hi sharmstr,

I was trying to get the profile cover working on my website. Please check the following screenshot: http://prntscr.com/4kt7v3

The profile cover is limited to the div of the profile image.

[Mj]

Nevermind, I had to change the featured image size to 800×300: http://prntscr.com/4kt8dj

🙂

[Mj]

Oh and when are you able to add jQuery? 🙂

[sharmstr]

@woekerzee I dont have an ETA. Its not high on my priority list.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Hi @sharmstr

Would it be possible to add full width to this? Are they some restriction when to it comes to the way the theme is coded?

[sharmstr]

Just change your buddypress pages (or just your member profile) layout to full width. You’ll also want to make sure that rtMedia featured size is wide enough if you have cropping turned on.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Splendor]

Yes, I know that. But want it to expand out of the box.. I you could point me in the right direction would be great.. Thank you for answering my questions @sharmstr

[Author]

Posts