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,
Solved! Go to 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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
This is a good response - build the component dialog to have one mobile image and the other for desktop.
Views
Replies
Total Likes
HI Ganesh,
Thanks for response, I am using AEM6.1, can I use this approach in AEM6.1 touch ui.
Regards,
Sunil
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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!
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Thanks everyone
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies