Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Implementing image resource delegate similar to teaser core component in custom component, but giving broken image with warning in error logs. What am I missing here?

Avatar

Level 2

I am trying to implement image resource delegate concept (from teaser core component) in one of our custom component. So that we can adapt to image core component as use its description and other properties. I tried to achieve by placing the fileupload in dialog of custom component similar to teaser. Backend logic works fine. Used similar way of creating properties. But still image was seen broken and below warning in local AEM instance. What am I missing here? Can you help?

 

Warning:

11.04.2022 20:11:54.408 *WARN* [[0:0:0:0:0:0:0:1] [xxxxxxxxxxxxxxx] GET /content//Testpage/_jcr_content/root/container/container/testcomp.coreimg.jpeg/xxxxxxxxxxxxx/testimage.jpeg HTTP/1.1] io.wcm.caconfig.extensions.persistence.impl.ToolsConfigPagePersistenceStrategy Ignoring reference to /conf/test/settings from /conf/test/settings - Probably misconfigured as it ends with '/settings'

 

Html view source of custom component: (broken image)

<div>
<div data-cmp-lazythreshold="0" data-cmp-src="/content/test/Testpage/_jcr_content/root/container/container/testcomp.coreimg{.width}.jpeg/xxxxxxxxxx/lava-testimage.jpeg" data-asset="/content/dam/test/test.jpg" data-asset-id="xxxxxxxxxxxxxxxxxxxxxx" data-title="Gray lava rock formation" id="image-7940c95054" class="cmp-image" itemscope="" itemtype="xxxxxxxxxxxxxxxxxx">
<img src="/content/test/Testpage/_jcr_content/root/container/container/testcomp.coreimg.jpeg/xxxxxxxxxxxx/testimage.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Gray lava rock formation" title="test formation">
<meta itemprop="caption" content="test formation">
</div>

</div>

 

Below broken image :

soorab_1-1649743546240.png

Html view source of teaser core component: (image working)

<div class="cmp-teaser__image-desktop">
<div data-cmp-lazythreshold="0" data-cmp-src="/content/test/Testpage/_jcr_content/root/container/container/teaser.coreimg{.width}.png/xxxxxxxxxxxxx/testimage.png" data-asset="/content/dam/test/testimage.png" data-asset-id="xxxxxxxxxxxxxxxxxxxxxx" data-title="test title" id="image-3b4d0ca2a4" class="cmp-image" itemscope="" itemtype="xxxxxxxxxxxxxxxxxxxxxxxx">
<img src="/content/test/Testpage/_jcr_content/root/container/container/teaser.coreimg.png/xxxxxxxxxxxx/testimage.png" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="test title">
</div>

</div>

 

Model from core teaser for reference of backend logic used similarly for custom component:

AbstractImageDelegatingModel - For ImageResource field

 

Custom component:

soorab_2-1649743589680.png

Teaser core component:

soorab_3-1649743605453.png

Note:

I have manually edited above for organization security reasons. Please ignore any typo, names, extensions errors or any text mismatch in screenshots vs code. I tried to give exact details where ever possible.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

You can ignore 

io.wcm.caconfig.extensions.persistence.impl.ToolsConfigPagePersistenceStrategy Ignoring reference to /conf/test/settings from /conf/test/settings - Probably misconfigured as it ends with '/settings'

Its look like supertype for custom component is missing, please refere Teaser Implementation at

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

 



Arun Patidar

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

Hi,

You can ignore 

io.wcm.caconfig.extensions.persistence.impl.ToolsConfigPagePersistenceStrategy Ignoring reference to /conf/test/settings from /conf/test/settings - Probably misconfigured as it ends with '/settings'

Its look like supertype for custom component is missing, please refere Teaser Implementation at

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

 



Arun Patidar

Avatar

Level 2

Thanks for replying. We tried this for multifield but still same issue, anything need to be further added?

Below is item0 of multifield.

data-cmp-src="/content/xxxxxxxxxxxx/item0.coreimg{.width}.png/xxxxxxxxxxx/xxxxxxxxxxxxx.png

Avatar

Community Advisor

Can you check image quality from design dialog/policy?

 



Arun Patidar

Avatar

Community Advisor

Sharing a blog that explains how to use the Image Delegation for adaptive images, similar to Teaser component

 

https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/

 

I hope it helps .


Aanchal Sikka