Adobe Experience Manager Sites & More

RobertBailey201 · 5/31/18

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

<tabs

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

jcr:primaryType="nt:unstructured"

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

size="L">

<personalization

jcr:primaryType="nt:unstructured"

jcr:title="Personalization"

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

<column

jcr:primaryType="nt:unstructured"

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

<section_personalization

cq:showOnCreate="{Boolean}true"

jcr:primaryType="nt:unstructured"

jcr:title="Page Personalization"

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

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

RobertBailey201 · 5/31/18

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

RobertBailey201 · 5/31/18

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>

Adobe Experience Manager Sites & More

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

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe