Support Image and Video in OTB AEM Teaser Component

[_CL]

hey guys,

I have a requirement to basically create a teaser component from both image and video in AEM.

The OTB teaser component works very well for images. But not sure what's the best approach to do when it comes to supporting video too.

I was thinking creating a new component which has sling:resourceSuperType pointing to the parent teaser. And then this component can have its own video tab for dialog and a checkbox for media type based on which sightly can be conditional.

But the default "Asset" tab for Images is still rendered in that case.

I think it might be because of a tight coupling between Teaser and Image as seen from below configs -

imageDelegate - core/wcm/components/image/v3/image

sling:resourceSuperType - core/wcm/components/image

I had an alternate idea to let use the OTB Teaser for Image and then create a "Teaser Video" component just for the video.
Anyways, what's the best approach to go ahead with for teaser with both video and image?

[arunpatidar · Accepted solution]

Hi @_CL 
You can extend the Teaser component and update the existing Assets tab, you can rename the Title but you have to keep the node name same.

https://github.com/adobe/aem-core-wcm-components/blob/d2a7b02405db241fadbad02a4878f8770b36e246/conte... 

you need to add image as before and add video as new node, you can also change the ordering of elements

Please check https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/pla... 

[_CL]

so the idea is to have 2 tabs - one default one "Asset" which can cater to "Image" and the other one for "Video"
But then we have to add a drop-down to show hide these tabs which means there would be another tab required

[Rohan_Garg]

Hey @_CL,

Creating a separate component seems to be an overkill - using Sling resource merger to extend the teaser and add provision for video seems to be the best way as suggested by @arunpatidar

As for ImageDelegate if you check Teaser Component Documentation :-
Image Delegate - Informational display indicating to which component the Teaser delegates image handling.

Hope this helps!