AEM6.4 - How to create a component with images in different tabs and also which should behave adaptive?

[shiv_0506]

Hi I need to create a custom component like Billboard which will have Textfiield, RichText pathfield and most importantly  images in different tabs in Coral UI.

For example:

Tab1-

         Textfiield , adaptive image,Richtext

Tab2

        Textfiield, adaptive image1,  adaptive Image2

Tab3

        Textfiield , adaptiveImage1, adaptive Image2, RichText

This should be adaptive and behave as AEM 6.4 core v2 image component.

I have added the image field as below in the Dialog

          <tab2

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Tab2"

                        sling:resourceType="granite/ui/components/coral/foundation/container"

                        margin="{Boolean}true">

                    <items jcr:primaryType="nt:unstructured">

                        <columns

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

                                margin="{Boolean}true">

                            <items jcr:primaryType="nt:unstructured">

                                <columns

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/coral/foundation/container"

                                        margin="{Boolean}true">

                                    <items jcr:primaryType="nt:unstructured">

                                        <menuItem

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldDescription="Enter Main Menu Item Text"

                                                fieldLabel="Menu Item"

                                                name="./menuItemText"

                                                required="{Boolean}true"/>

                                        <file

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/form/fileupload"

                                                autoStart="{Boolean}false"

                                                class="cq-droptarget"

                                                fileNameParameter="./fileName"

                                                fileReferenceParameter="./fileReference"

                                                mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff]"

                                                multiple="{Boolean}false"

                                                name="./file"

                                                title="Upload Image Asset"

                                                uploadUrl="${suffix.path}"

                                                useHTML5="{Boolean}true"/>

                                    </items>

                                </columns>

                            </items>

                        </columns>

                    </items>

                </tab2>

[arunpatidar]

Hi,

What you do mean by adaptive images? Are you trying to reuse image field in another tab, if image change in one of the tab , it should reflect both the tabs?

If Yes, you can achieve this by using granite type include, include has path property which should have value to item node which is being reused e.g. in TAB3 if I want to reuse TAB2 Text item then path property will have /apps/AEM63App/components/forum/billboard/cq:dialog/content/items/tab2/items/column/items/fieldset/items/column/items/text

Include — Granite UI 1.0 documentation

e.g.

More info :

Touch UI - Reuse Dialog Field

Thanks

Arun

[shiv_0506]

Hi Arnup,

No, I am not referring to the reuse of field from one tab to another.
When I upload the Image in the dialog , it should render as adaptive Image in the page like below based on the Rendition of the screen.

/content/wknd/en/restaurants/best-roasters/_jcr_content/root/image.coreimg.480.jpeg/1528110675751.jpeg (For Mobile)

/content/wknd/en/restaurants/best-roasters/_jcr_content/root/image.coreimg.1024.jpeg/1528110675751.jpeg (For Desktop)

and so on.

[arunpatidar]

Hi,

When you upload image it will be added as file.sftmp and not uploaded and dam and rendition workflow won't triggered to create renditions.

Using browse to insert an image in AEM component.

But if you are using dam images which have renditions, you can use media queries

for more detail check Responsive Design for Web Pages  

Thanks

Arun

[shiv_0506]

Hi Arnup,

Thanks for your reply.  I feel , the pointers provided by you will help me.

Responsive Design for Web Pages .  To get the images in adaptive format, I think I need to use Adaptive Image Component Servlet which will provide me the required renditions and I can render it based on the screen size.

[Lokesh_Shivalingaiah]

Hi Shiv,

Either you can use servlet to give you the right rendition or use the media query to include the right rendition file.