Hi,
I have a component (say a carousel) to build. This Carousel can have (for example) 'n' number of images (1 for mobile and 1 for desktop) and each image/slide has rich text separate for mobile version and desktop version, links etc.. This makes it difficult to author everything in dialog.
So, I would like to create a configuration page where users can drag and drop a component. This component is ONE slide of the carousel. This contains richtext, links etc.. Thus authors can drag and drop any number of components.
My question is,
1. Where (path) should this page be created ?
2. How do I add a button on the actual carousel component to open this page ? (Say, I have cq:editConfig on the component. So, I need to add a button next to Edit called "Config" whcih should open this configuration page. Path to this page can be set in the Carousel dialog)
3. How to read configuration data from this page
Please guide me and correct me if I'm on wrong direction
Thanks,
Solved! Go to Solution.
Yes, there are multiple ways of creating this. I think the best is always to keep the author experience in the component vs sending them to a different page/section of AEM. You could have different configuration per type of breakpoint either with TABS (if the 'n' is fixed), or with multi-fields (if 'n' is variables). Also, you should look into separating the 'data' from the 'asset', in the sense that the image should be the same, or associated to the same asset.
For example, in the case of the carousel: You could have a tab with a multifield for each slide, with three sets of fields one for the image reference, one for the desktop data, and one for the mobile data. For each new slide, you allow the user to 'add' a new set of fields that repeats to 'n'. You can even allow the author to change the order with up/down arrows.
In this setup, you should create a rendition specifically for the mobile breakpoint (create renditions either with with a workflow manually triggered or when asset is uploaded, up to you) and have the carousel serve the image rendition that corresponds to the breakpoint that the user is in (ie mobile, tab, desktop). With this, by default the image would be the same, but the author can overwrite the rendition in the DAM if the image needs to be different, and the links/text would be specific to each breakpoint.
Yes, there are multiple ways of creating this. I think the best is always to keep the author experience in the component vs sending them to a different page/section of AEM. You could have different configuration per type of breakpoint either with TABS (if the 'n' is fixed), or with multi-fields (if 'n' is variables). Also, you should look into separating the 'data' from the 'asset', in the sense that the image should be the same, or associated to the same asset.
For example, in the case of the carousel: You could have a tab with a multifield for each slide, with three sets of fields one for the image reference, one for the desktop data, and one for the mobile data. For each new slide, you allow the user to 'add' a new set of fields that repeats to 'n'. You can even allow the author to change the order with up/down arrows.
In this setup, you should create a rendition specifically for the mobile breakpoint (create renditions either with with a workflow manually triggered or when asset is uploaded, up to you) and have the carousel serve the image rendition that corresponds to the breakpoint that the user is in (ie mobile, tab, desktop). With this, by default the image would be the same, but the author can overwrite the rendition in the DAM if the image needs to be different, and the links/text would be specific to each breakpoint.
Hi,
I agree with al.ber.to, you should really care about the authoring experience. Try to have it all inside the page and do not create a dedicated page, if you don't want to reuse the carousel.
kind regards,
Jörg
Views
Replies
Total Likes
You can design this component in multiple ways !
Having a configuration setup can also be done. I can also sugest
Carousel component dialog having 2 tabs. one for desktop and another for mobile. Each tab has a multifield with the properties for the image (image, text, link etc). This way author can configure separately
Views
Replies
Total Likes
Thanks al.ber.to for the help !
Views
Replies
Total Likes
Views
Like
Replies