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

Learn More

View all

Sign in to view all badges

Hero Image component not working

Avatar

Avatar
Validate 10
Level 1
pillaivinit
Level 1

Likes

0 likes

Total Posts

30 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 10
Level 1
pillaivinit
Level 1

Likes

0 likes

Total Posts

30 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Applaud 5
Affirm 1
View profile
pillaivinit
Level 1

07-12-2020

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?

View Entire Topic

Avatar

Avatar
Springboard
MVP
Suraj_Kamdi
MVP

Likes

142 likes

Total Posts

155 posts

Correct Reply

41 solutions
Top badges earned
Springboard
Validate 1
Establish
Contributor
Ignite 3
View profile

Avatar
Springboard
MVP
Suraj_Kamdi
MVP

Likes

142 likes

Total Posts

155 posts

Correct Reply

41 solutions
Top badges earned
Springboard
Validate 1
Establish
Contributor
Ignite 3
View profile
Suraj_Kamdi
MVP

08-12-2020

@pillaivinit 

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