Expand my Community achievements bar.

SOLVED

How to add image selector or image picker to AEM 6.3 page properties?

Avatar

Level 4

Hi All,

How do I add an image selector or image picker to AEM 6.3 page properties?

I have attached example page properties below.

Thank you for your help.

__________________________________________________________________

<?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"

    jcr:title="Page"

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

    extraClientlibs="[cq.common.wcm,core.wcm.components.page.v1.editor,cq.wcm.msm.properties]"

    helpPath="https://www.adobe.com/go/aem_cmp_page_v1"

    mode="edit">

    <content

        granite:class="cq-dialog-content-page"

        jcr:primaryType="nt:unstructured"

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

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

            <tabs

                granite:class="cq-siteadmin-admin-properties-tabs"

                jcr:primaryType="nt:unstructured"

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

                size="L">

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

                    <personalization

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Personalization"

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

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

                            <column

                                jcr:primaryType="nt:unstructured"

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

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

                                    <section_personalization

                                        cq:showOnCreate="{Boolean}true"

                                        jcr:primaryType="nt:unstructured"

                                        jcr:title="Page Personalization"

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

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

                                            <variable1

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 1"

                                                name="./variable1"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable1"/>

                                            </variable1>

                                            <variable2

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 2"

                                                name="./variable2"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable2"/>

                                            </variable2>

                                            <variable3

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 3"

                                                name="./variable3"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable3"/>

                                            </variable3>

                                            <variable4

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 4"

                                                name="./variable4"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable4"/>

                                            </variable4>

                                            <variable5

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 5"

                                                name="./variable5"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable5"/>

                                            </variable5>

                                            <variable6

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 6"

                                                name="./variable6"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable6"/>

                                            </variable6>

                                            <variable7

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 7"

                                                name="./variable7"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable7"/>

                                            </variable7>

                                            <variable8

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldLabel="Variable 8"

                                                name="./variable8"

                                                renderReadOnly="{Boolean}true">

                                                <granite:data

                                                    jcr:primaryType="nt:unstructured"

                                                    allowBulkEdit="{Boolean}true"

                                                    cq-msm-lockable="variable8"/>

                                            </variable8>

                                        </items>

                                    </section_personalization>

                                </items>

                            </column>

                        </items>

                    </personalization>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>

1 Accepted Solution

Avatar

Correct answer by
Level 4

Resolved.  Thanks.

<pathbrowser1

    jcr:primaryType="nt:unstructured"

    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

    fieldLabel="Path Browser 1"

    name="./pathbrowser1"

    rootPath="/content">

    <granite:data

        jcr:primaryType="nt:unstructured"

        enable-path-browser-preview="{Boolean}true"

        preview-url="$path.thumb.319.319.png"/>

</pathbrowser1>

View solution in original post

1 Reply

Avatar

Correct answer by
Level 4

Resolved.  Thanks.

<pathbrowser1

    jcr:primaryType="nt:unstructured"

    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"

    fieldLabel="Path Browser 1"

    name="./pathbrowser1"

    rootPath="/content">

    <granite:data

        jcr:primaryType="nt:unstructured"

        enable-path-browser-preview="{Boolean}true"

        preview-url="$path.thumb.319.319.png"/>

</pathbrowser1>