How do I extend the core teaser with an additional image?
I have a need to add an extra image field to Teaser components. Basically, I am trying to create a By Line type effect that can be added to teasers.
The problem I am having is that both the Teaser and By Line components are inheriting from the core Image Component via their sling super type. I want to add an additional field to my teasers dialog that lets be specify byline type properties, like so:
<icon
jcr:primaryType="nt:unstructured"
jcr:title="Icon"
sling:resourceType="granite/ui/components/coral/foundation/container"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<icontitle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Icon Title"
fieldLabel="Icon Title"
name="./icontitle"/>
<iconsubtitle
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldDescription="Icon Description"
fieldLabel="Icon Subtitle"
useFixedInlineToolbar="{Boolean}true"
name="./iconsubtitle"/>
<iconfile
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
allowUpload="{Boolean}true"
fileNameParameter="./iconName"
fileReferenceParameter="./iconReference"
mimeTypes="[image]"
name="./iconfile"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
</items>
</column>
</items>
</columns>
</items>
</icon>
This allows the dialog to work and the user can upload two different files... but how do I take the file that is being uploaded and render an Image component with it in sightly? What is the proper java syntax for getting ahold of an instance of Image.class so that I can hand it off to sightly for rendering?
For instance, I have created a custom Teaser model in my project, and am trying to inject the image:
@586265
@2434638("resource")
@Named("iconfile")
protected Resource iconfileResource;
@ValueMapValue(name = "iconName")
public String iconName;
When I do this, iconfileResource is pointing to "/content/<mysite>/pattern-library/home/teaser/jcr:content/root/container/container/container_335852323_/teaser/iconfile", and iconName is "a11y.svg" (the name of the icon I drag/dropped from my file system into the dialog).
How do I get the URL (and alt text?) of the image that is uploaded... or better yet, how do I convert it to an instance of a core Image component and send that to sightly for rendering?