Community Groups Thumbnail

[alistairp781078]

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?

[aponnusa]

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

[alistairp781078]

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

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.

[alistairp781078]

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?

[aponnusa · Accepted solution]

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

As you can see there are two steps

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

Thanks

[alistairp781078]

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

[alistairp781078]

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?