Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Hero Image component not working

Vinit_Pillai
Level 3
Level 3

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?

1 Accepted Solution
Suraj_Kamdi
Correct answer by
Community Advisor
Community Advisor

@Vinit_Pillai 

background: url(${properties.fileReference @ context='styleString'}) no-repeat; 

View solution in original post

1 Reply
Suraj_Kamdi
Correct answer by
Community Advisor
Community Advisor

@Vinit_Pillai 

background: url(${properties.fileReference @ context='styleString'}) no-repeat; 

View solution in original post