Extend Community Group | Community
Skip to main content
A
alistairp781078
Level 4
December 13, 2016
Solved

Extend Community Group

  • December 13, 2016
  • 3 replies
  • 2351 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by aponnusa

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

3 replies

B
Adobe Employee
bdcAdobe Employee
Adobe Employee
December 15, 2016

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

A
alistairp781078Author
Level 4
December 16, 2016

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.html/forum__haix-we_are_currentlytry.html

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

A
Adobe Employee
aponnusaAdobe EmployeeAccepted solution
Adobe Employee
January 17, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...