Expand my Community achievements bar.

SOLVED

Image not displaying when content fragment component is adapted to Image.class

Avatar

Level 2

Hi!

We are working with Content Fragments Models and Content Fragment Component (from core components 2.5)  in AEM Sites 6.5 and 6.4. We have our models defined and as you know Content Fragment Component is not able to render images of the assets selected or set in the "Content Reference" data type, since this is a requiriment from our project, we are taking the path of the asset selected and adding a property "fileReference" to our content fragment component resource inside a page:

1824367_pastedImage_0.png

We have our sling model defined:

  1. @Model
  2.         adaptables = {SlingHttpServletRequest.class}, 
  3.         resourceType = {ContentFragmentExt.RESOURCE_TYPE}, 
  4.         defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL 
  5.  
  6. public class ContentFragmentExt
  7.     
  8.     private static final Logger log = LoggerFactory.getLogger(ContentFragmentExt.class); 
  9.     protected static final String RESOURCE_TYPE = "project/components/content/contentfragment"
  10.  
  11.     @Self 
  12.     private SlingHttpServletRequest request; 
  13.      
  14.     @OSGiService 
  15.     private ModelFactory modelFactory; 
  16.  
  17.     private Image image; 
  18.      
  19.     @Inject 
  20.     private Resource resource; 
  21.    
  22.     @PostConstruct 
  23.     private void init() { 
  24.         image = modelFactory.getModelFromWrappedRequest(request, resource, Image.class); 
  25.     } 
  26.      
  27.     /**
  28.      * @return the Image Sling Model of this resource, or null if the resource cannot create a valid Image Sling Model.
  29.      */ 
  30.      public Image getImage() { 
  31.          return image; 
  32.      }

In our image.html, we are using the resource of our proxy image component:

  1. <template data-sly-template.element="${@ element='the element value'}"  data-sly-use.obj="${'project.sites.core.models.ContentFragmentExt'"> 
  2.     <div data-sly-resource="${ obj.Image @ resourceType = 'project/components/content/image'}"> 
  3.     </div> 
  4. </template>


However, in the page, the asset is not loading:

1824638_pastedImage_14.png
We are using the ModelFactory in the component created as test from wknd tutorial and is working correctly with the same asset, is there a restriccion from the Image class to work with Content Fragment Component?  The reason that we are going on this direction is because we need all the data displayed by the Image component of the asset for our analytics, and we can't use a simple <img src="image path from fragment"> 
Apologies for the long post, do you have any recommendation? is this possible?
Thank you !

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

CF stores data in binary of html, not as node and property.

you can try but it seems it is not possible in with sling adaptions.



Arun Patidar

View solution in original post

2 Replies

Avatar

Level 3

In all the years I have worked with AEM, i have not seen this use case.

Avatar

Correct answer by
Community Advisor

CF stores data in binary of html, not as node and property.

you can try but it seems it is not possible in with sling adaptions.



Arun Patidar