Two different images in image component

[varuns46785756]

Hi,

I need to be able to have both a mobile and desktop version of each image within the image component. I need to give option to select (drag and drop) two different image for desktop and mobile in image component.Can I add two drop section in Image component one for desktop image and one for mobile image.

Please suggest.

Regards,

[arunpatidar]

Hi,

Are you using classic UI or touch UI? Which Image Components are you referring here?OOTB?

If you want to update OOTB image components you can override(copy from /libs/ to /apps/) and modify but the impacting will be global.

You can check Responsive Design for Web Pages  also for Touch UI if helps.

You can also check Layout mode also to show hide components based on devices.

Thanks
Arun

[GaneshM]

Hi Varun,

Yep, you can have two image canvas in single component. you can refer below snippet to achieve

Note: Assuming you are using AEM 6.3 and the snippet have individual tabs for images.

Caveat : You can't crop the image because Touch UI allows only inline editing.

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

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

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

            <tabs

                jcr:primaryType="nt:unstructured"

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

                maximized="{Boolean}true">

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

                    <desktoplogo

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Desktop Image"

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

                        margin="{Boolean}true">

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

                            <column

                                jcr:primaryType="nt:unstructured"

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

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

                                    <file

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

                                        allowUpload="{Boolean}false"

                                        fileNameParameter="./desktoplogo/fileName"

                                        fileReferenceParameter="./desktoplogo/fileReference"

                                        mimeTypes="[image]"

                                        name="./desktoplogo/file"/>

                                </items>

                            </column>

                        </items>

                    </desktoplogo>

                    <mobilelogo

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Mobile Image"

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

                        margin="{Boolean}true">

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

                            <column

                                jcr:primaryType="nt:unstructured"

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

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

                                    <file

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"

                                        allowUpload="{Boolean}false"

                                        fileNameParameter="./mobilelogo/fileName"

                                        fileReferenceParameter="./mobilelogo/fileReference"

                                        mimeTypes="[image]"

                                        name="./mobilelogo/file"/>

                                </items>

                            </column>

                        </items>

                         </items>

            </tabs>

        </items>

    </content>

</jcr:root>

Thanks!

[smacdonald2008]

This is a good response - build the component dialog to have one mobile image and the other for desktop.

[varuns46785756]

HI Ganesh,

Thanks for response, I am using AEM6.1, can I use this approach in AEM6.1 touch ui.

Regards,

Sunil

[smacdonald2008]

His example is all granite - "granite/ui/components/coral/foundation/tabs. Its all Touch UI.

[varuns46785756]

Hi Ganesh,

What about component html part , for me I have created two sets of code in component html class one for desktop and one for mobile but image rendering is not working for me, only first image is displaying.Please suggest.

Regards

[GaneshM]

Hi Varun,

I'm not sure about your ask, I assuming couple of things 1. Image rendering 2. Image editing

1. We used media CSS to show the image only on mobile or small viewport ( you can check your interactive team). The css determine the image. Please have look at OOTB adaptive image component, you will get an idea.

2. Touch UI OOTB crop doesn't support multi image crop, because image editing is inline in Touch UI.

Hope it helps.

Thanks!

[edubey · Accepted solution]

Things you need to make it work:-

1. Have two drag and drop fields in component dialog- yes you can have it

2. Component - HTML  + CSS which takes these images as input.

3. Make sure CSS displays image based on viewport

4. Go to Desktop view you should see desktop image

5. Go to Mobile view you should see mobile image

This all should be enough for this use case.

[varuns46785756]

Thanks everyone