Community Groups Thumbnail | Community
Skip to main content
A
alistairp781078
New Participant
October 4, 2016
Solved

Community Groups Thumbnail

  • October 4, 2016
  • 6 replies
  • 2617 views

We are currently trying to shift around some of the items in the community groups component view. One of the things we're looking to change is the size of the thumbnail for each group; we would like to make them bigger. As far as I can see, this image is pulled in from a field in the JSON:

"imageURL":"/content/forums/forum-name/photos/image.thumb.90.170.${some-id}.jpg"

Is it possible to access the full size of the image so that we can resize it as we see fit rather than being given a fixed size thumbnail? Could we amend the JSON to do this and if so, what URL can we use for the original size of the image?

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

Sorry I missed that detail in my response. Yes you need to remove the ${some-id} as well from the url. You can use img selector or not use that and  ../photos/image should work.

To override JSON, there is a sample at - https://github.com/Adobe-Marketing-Cloud/aem-scf-sample-components-extension/tree/master/bundles/aem-scf-extensions/src/main/java/com/adobe/aem/scf/extensions

As you can see there are two steps

  1. Override or extend component POJO - Example
  2. Map your new component - Example

Thanks

6 replies

A
alistairp781078Author
New Participant
December 12, 2016

Sorry for digging up an old thread.

I've been looking at the implementation I did of the Javascript fix that was suggested by aponnusa. I've found that on a publisher it only works for users who are administrators. If I log in as a normal user (e.g. a member of a group), the image doesn't re-render with the intercepted code. Is there any obvious reason why this is happening and if so, is there a potential workaround?

A
alistairp781078Author
New Participant
October 12, 2016

Thanks for the links, I will have a look at building that project.

A
aponnusaAccepted solution
Employee
October 10, 2016

Hi

Sorry I missed that detail in my response. Yes you need to remove the ${some-id} as well from the url. You can use img selector or not use that and  ../photos/image should work.

To override JSON, there is a sample at - https://github.com/Adobe-Marketing-Cloud/aem-scf-sample-components-extension/tree/master/bundles/aem-scf-extensions/src/main/java/com/adobe/aem/scf/extensions

As you can see there are two steps

  1. Override or extend component POJO - Example
  2. Map your new component - Example

Thanks

A
alistairp781078Author
New Participant
October 10, 2016

I've had another look at implementing the JS code and it's worked; I just had to tweak the scf-group-image class to remove the fixed height and width. Thanks for your help with this!

I was also able to get the full size image using the img selector in the url and removing the id, e.g. ../photos/image.img.jpg

Just out of interest, do you know if there is any documentation on how to override the JSON in case that's something we would be interested in doing in the future?

A
alistairp781078Author
New Participant
October 10, 2016

I can have a look at implementing the JS solution, however, I'm still not able to generate a URL for the full size image.

My original URL is:

http://localhost:4502/content/website/en/home/take-part/forums/birds-2/photos/image.thumb.90.170.1476111505035.jpg

As expected, this shows a small version of the image I am using. I've removed the thumb.90.170 selectors and get the following error message:

Internal error (no Exception to report)

RequestURI=/content/en/home/take-part/forums/birds-2/photos/image.1476111505035.jpg

Servlet= org.apache.sling.servlets.get.DefaultGetServlet

Any ideas on why this might be happening? I've attached a screenshot of the paths in the repository.

A
aponnusa
Employee
October 7, 2016

Hi,

The API will have to be modified to do this. If you want to control it using JS you can acess the full size image as /content/forums/forum-name/photos/image.${some-id}.jpg

ie You can remove the .thumb.<width>.<height> selector

What I might do is, after the page loads - we remove the selectors from the generated markup. Either on pages document load or override component JS view

//Get the image urls var imgUrls = $CQ(".scf-communitygroups-list .scf-group-image"); for (var i=0; i < imgUrls.size(); i++) { var imgStringUrl = $CQ(imgUrls[i]).attr("src"); //Remove everything after the first dot imgStringUrl = imgStringUrl.replace(/\..*/,''); console.log(imgStringUrl); $CQ(imgUrls[i]).attr("src", imgStringUrl); }

Let us know if you are OK with JS option. else, I can help you with on how to override the backend json

Thanks

Terms & ConditionsAccessibility statement

Loading footer...