Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Two different images in image component

varuns46785756
Level 5
Level 5

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,

1 Accepted Solution
edubey
Correct answer by
Level 10
Level 10

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.

View solution in original post

0 Replies
Arun_Patidar
Community Advisor
Community Advisor

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
Level 3
Level 3

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
Level 10
Level 10

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

varuns46785756
Level 5
Level 5

HI Ganesh,

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

Regards,

Sunil

smacdonald2008
Level 10
Level 10

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

varuns46785756
Level 5
Level 5

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
Level 3
Level 3

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
Correct answer by
Level 10
Level 10

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.

View solution in original post