I have created an hero image component in AEM 6.3 which is a baked in component in a template
<template data-sly-template.content="">
<div data-sly-resource="${'hero-image' @resourceType='/apps/my-project/components/general/hero-image'}"></div>
<div data-sly-resource="${'primaryLayout' @resourceType='wcm/foundation/components/parsys'}"></div>
<div data-sly-resource="${'secondaryLayout' @resourceType='wcm/foundation/components/parsys'}"></div>
</template>
Above is the content.html of my template.
<sly data-sly-use.hero="com.my-project.core.models.HeroImageModel"
data-sly-test.empty="${!hero.url}"
data-sly-use.template="core/wcm/components/commons/v1/templates.html"
data-sly-call="${template.placeholder @ isEmpty=empty}">
empty
</sly>
<sly data-sly-test="${!empty}">
<div class="jumbotron jumbotron-fluid" style="height:400px;width:100%;background-size: cover;background: url('${hero.url @ context='uri'}') no-repeat;">
<div class="container col-md-offset-1">
<div class="col-md-6 feature-promo" style="margin-top: 100px;">
<h2>${hero.title} || ${currentPage.parent.title} <i class="fa fa-angle-double-right"></i></h2>
</div>
</div>
</div>
</sly>
Above is my hero-image.html
<?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:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="hero-image"
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"
type="nav">
<items jcr:primaryType="nt:unstructured">
<tab1
jcr:primaryType="nt:unstructured"
jcr:title="General"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
autoStart="{Boolean}true"
cq-msm-lockable="/file"
fieldLabel="Image"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./image"
sizeLimit="100000000"
text="Upload Image"
uploadUrl="/content/dam"
required="{Boolean}true"
uploadUrlBuilder=""/>
<title
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Title"
jcr:primaryType="nt:unstructured"
name="./title"/>
<alt-text
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Alt Text"
jcr:primaryType="nt:unstructured"
required="{Boolean}true"
name="./altText"/>
</items>
</column>
</items>
</tab1>
</items>
</tabs>
</items>
</content>
</jcr:root>
Above is my cq dialog
In the dialog I'm configuring the img but nothing is happening . no image is generated while authoring. I have tried giving a static img uri still nothing.
what am I doing wrong?
