Two different images in image component

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

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!

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

HI Ganesh,

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

Regards,

Sunil

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

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

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!

Thanks everyone