Difference in Component on Local SDK vs RDE

[_CL]

Hey guys,

I have been tweaking the OTB teaser component and been trying to validate it on my local and RDE.

The local output is as below -

While on RDE the image tag in HTML is not loading as seen below -

We're pushing the code with aio-plugin and the changes are reflecting promptly but the HTML for image which is defined in Sightly as below is coming in local but not RDE

<div class="image-container">
   <div class="teaser-image">
      <sly data-sly-call="${imageTemplate.image @ teaser=teaser}"></sly>
   </div>
</div>

Any pointers for the same?

[TarunKumar]

Hi @_CL ,

Inspect the image element in RDE and see what you are seeing for image url if AEM is shortening the image src path on publish environment, you can confirm that by looking at Day CQ Link checker Transformer on the OSGI configs.

Then you need to match those rule with a rewrite or a mapping in dispatcher

RewriteCond %{REQUEST_URI} !^/apps
RewriteCond %{REQUEST_URI} !^/bin
RewriteCond %{REQUEST_URI} !^/content
RewriteCond %{REQUEST_URI} !^/etc
RewriteCond %{REQUEST_URI} !^/home
RewriteCond %{REQUEST_URI} !^/libs
RewriteCond %{REQUEST_URI} !^/saml_login
RewriteCond %{REQUEST_URI} !^/system
RewriteCond %{REQUEST_URI} !^/tmp
RewriteCond %{REQUEST_URI} !^/var
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg)$
RewriteRule ^/(.*)$ /content/${CONTENT_FOLDER_NAME}/$1 [PT,L]

-Tarun

[_CL]

The image tag itself is not rendering - The problem I think is not related to the image URL.

[arunpatidar]

Hi @_CL 
The image tag will render only if there is an image imageResource either from DAM or from page properties

<sly data-sly-template.image="${@ teaser}">
<div class="cmp-teaser__image" data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource @ wcmmode=disabled}"></div>
</sly>

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

[_CL]

@arunpatidar- the issue's due to the inherit feature image from page being selected even while I have dropped the photo as @Rohan_Garg has suggested. Ideally if the checkbox is enabled and the image is dropped - shouldn't it choose the selected image as the one with higher precedence?

[Rohan_Garg · Accepted solution]

Can you send your dialog.xml and the dialog screenshots?
Like @arunpatidar mentioned you want to check whether the checkbox for "Inherit featured image from page" is selected or not. Ideally if you are configuring the image then it should be unchecked.

Hope this helps!
Rohan Garg

[_CL]

The issue is due to the checkbox for inheriting image being selected - Since no image is present it doesn't render any image. But my query is if the image is not present and we have manually inserted the image shouldn't that take a higher priority in terms of inheritance?

[arunpatidar]

HI @_CL 
The priority is decided in the implementation, here : https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...