AEM6.4 - How to create a component with images in different tabs and also which should behave adaptive? | Community
Skip to main content
S
shiv_0506
Level 2
June 11, 2018

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

  • June 11, 2018
  • 1 reply
  • 7116 views

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>

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    1 reply

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    June 11, 2018

    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

    Arun Patidar
    S
    shiv_0506Author
    Level 2
    June 11, 2018

    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
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    June 11, 2018

    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

    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...