Expand my Community achievements bar.

SOLVED

How to create a component for image and video support and render it on page

Avatar

Level 2

which can support both Image and Video, using file upload
field and render it on page.

1 Accepted Solution

Avatar

Correct answer by
Level 4

You dont need to create, just reuse existing wcm core components. 

Here are your OOTB options

  1. Image component - allows to drag-n-drop DAM assets OR you can upload images from file upload and render https://www.aemcomponents.dev/content/core-components-examples/library/core-content/image.html
  2. Foundation Video component - There is a legacy foundation video component https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/authoring/siteandpage.... However this is not recommended and AEM recommends to use Embed 
  3. Embed Component - This is recommended approach to embed videos https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html
  4. WKND - Refer to https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...

If you still want to develop custom component only instead of reusing ootb cookies, then refer to some tutorials that ll guide you creating new video/image component

https://www.youtube.com/watch?v=lUaNiO3dOrM

https://medium.com/activate-aem/aem-integration-with-dynamic-media-and-smart-crop-enablement-for-vid...

https://www.youtube.com/watch?v=fNVsxkicUzg

 

Hope this helps you. 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 4

You dont need to create, just reuse existing wcm core components. 

Here are your OOTB options

  1. Image component - allows to drag-n-drop DAM assets OR you can upload images from file upload and render https://www.aemcomponents.dev/content/core-components-examples/library/core-content/image.html
  2. Foundation Video component - There is a legacy foundation video component https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/authoring/siteandpage.... However this is not recommended and AEM recommends to use Embed 
  3. Embed Component - This is recommended approach to embed videos https://www.aemcomponents.dev/content/core-components-examples/library/core-content/embed.html
  4. WKND - Refer to https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...

If you still want to develop custom component only instead of reusing ootb cookies, then refer to some tutorials that ll guide you creating new video/image component

https://www.youtube.com/watch?v=lUaNiO3dOrM

https://medium.com/activate-aem/aem-integration-with-dynamic-media-and-smart-crop-enablement-for-vid...

https://www.youtube.com/watch?v=fNVsxkicUzg

 

Hope this helps you.