Tip: Remove crop of group cover photo and set a bigger height while making them responsive

[Bizz]

As you may or may not be aware the cover photos for the groups headers are cropped to a height of 160px so here is a bit of code to remove the crop so you can have a bigger sized picture, also some css which helps make them responsive.

First we add some code to our Social Site Builder > Custom Code > End Of Page to remove the crop

<script>
// Remove group header crop
x$(document).ready(function() {
x$('.groupHeader.groupHeader-coverPhoto').each(function() {
var removegroupHeaderCrop = x$(this).css('background-image');
x$(this).css('background-image', removegroupHeaderCrop.replace(/\&height=\d+\&crop=\d+\%\d+\A\d+/, ''));
});
});
</script>

Next we add some css to our design studio custom css, the Padding Bottom of 25% is what controls the height so you can adjust that to smaller or bigger depending on how big you want them

.groupHeader-coverPhoto {
padding-bottom: 25%!important;
height: 0!important;
position:relative
}

Extra tip

If you only want to change a particular group you can do so just by adding the page name at the start, so for instance my groups are called Groups and the page I want to change is Demo so the could would look like this and the part in bold is the part added

.page-groups-demo .groupHeader-coverPhoto {
padding-bottom: 25%!important;
height: 0!important;
position:relative
}

 

Hope you find it useful

Bizz :-)

[Fernando Bisbal]

Thank you very much I have applied it to my website and now it is much better

[⚡JFarrow⌁]

Wow..  cool idea!   I may try this.     Wonder if the same could be done for the funny crop of member profiles...thanks Bizz

 

[Alex - Rosas † Negras]

thank you so much !!!!!!!! amazing is perfect you are a genius

[Cindy Dean Mccoy]

All I can find is adding is a group image.  Where is it you can add a group cover?  Is ti the huge white space under the group image?

[Max Ning Support]

Hi Cindy,

Please, make sure that this checkbox is enabled for the Group Hub in your Social Site Manager - Site & Pages
Screenshot - https://take.ms/fv7I0

Then, you'd be able to add a cover photo to your group while editing the group - https://take.ms/DtVgG

Hope this helps!

Kind regards,
The Ning Team

[Cindy Dean Mccoy]

Thank you! Thank you! Thank you!  I knew that dead space at the top was for something.  I just could not figure out for what.  Now I can have pretty covers on my groups!