How to create a component for image and video support and render it on page | Community
Skip to main content
Level 2
May 20, 2024
Solved

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

  • May 20, 2024
  • 1 reply
  • 725 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by sarav_prakash

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/default-components-foundation#video. 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-develop/overview

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-videos-b06dc7cd49cc

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

 

Hope this helps you. 

1 reply

sarav_prakash
Community Advisor
sarav_prakashCommunity AdvisorAccepted solution
Community Advisor
May 20, 2024

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/default-components-foundation#video. 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-develop/overview

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-videos-b06dc7cd49cc

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

 

Hope this helps you. 

Level 2
May 21, 2024

Thankyou i have already created this .