Extend Community Group

[alistairp781078]

Would someone be able to help me extend and override part of the community group component.

I would like to show a different sized image in the component and it is currently restricted to width 170 height 90.

There is this line in the following class com.adobe.cq.social.group.client.impl.CommunityGroupImpl

... this.imageURL = (groupImage == null ? this.clientUtils.externalLink("/etc/clientlibs/social/hbs/communitygroups/images/default.png", Boolean.valueOf(false)) : this.clientUtils.externalLink(groupImagePath + "." + "thumb" + "." + "90" + "." + "170" + "." + System.currentTimeMillis() + ".jpg", Boolean.valueOf(false))); ...

Is it possible to override this variable to remove the selectors in the URL?

Cheers, Alistair

[Bertrand_de_Coa]

hello Alistair

a simple option would be to overlay [0], specifically the .scf-group-image  class

Bertrand

[0] /libs/social/group/components/hbs/communitygroups/clientlibs/communitygroups.css

[alistairp781078]

Hi Bertrand,

We've had a look at overriding the width and height in that CSS class but because the image URL contains those selectors, any manipulation of the image to make it bigger pixelates it.

One of your colleagues suggested a solution using Javascript in here: http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/aem-communities.topic.h...

The solution was to rewrite the URL in the DOM by targeting the CSS class and removing the selectors from it. The problem we found with this was that the image renders twice and there's a short moment between where you can see the smaller version of the image before the URL is rewritten. Whilst this isn't terrible we were looking for a solution where the URL for the image didn't contain those height and width selectors in the first place, hence overriding the Java code.

Alistair

[aponnusa · Accepted solution]

Hi,

You might have to extend the component /libs/social/group/components/hbs/communitygroups/communitygroup

If you look at the HBS file - /libs/social/group/components/hbs/communitygroups/communitygroup/communitygroup.hbs, you will find 

<img class="scf-group-image" src="{{imageURL}}"></img>

Unfortunately, the backend code appends a selector .thumb.90.170 to the imageURL. One option is fix the backend to return a URL with bigger values for image size. The other option is to do something like this

<img class="scf-group-image" src="{{id}}/../photos/image.thumb.<width>.<height>.jpg"></img>

Thanks