Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
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>