How do I extend the core teaser with an additional image?

[dylanmccurry]

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:

    @inject
    @Via("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?

[Kiran_Vedantam]

Hi @dylanmccurry 

You can use the file upload resource type and add an img tag in HTL to display the image.

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

Hope it helps!

Thanks,
Kiran Vedantam

[dylanmccurry]

Hi Kiran,

Do you have an example of how to do this?  That documentation doesn't specify how to send the resource to sightly, just the properties of the dialog field.

Additionally, in case the user picks a dam asset, is there a way I can grab the alt text from that asset to also render in sightly?

[Nupur_Jain · Accepted solution]

Hi @dylanmccurry 

You can use core Image Model Directly in your sightly given these two thing:

1. You need to Supertype to Core Image Component. I guess you are already doing that is supertyping to core/wcm/components/image/v1 or core/wcm/components/image/v2

2. You can only use existing Model if property name and filename variable matches to what defined in image component dialog that is in path /apps/core/wcm/components/image/v2/image/cq:dialog/content/items/tabs/items/asset/items/columns/items/column/items/file 

3. You can then directly call data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image" in your htl file and use any getters defined in https://github.com/adobe/aem-core-wcm-components/blob/213eb0289aaeb9318fe2c7a15e88743251304063/bundl...

Here, there are almost all getters for uploaded or dam image.

Now, As you are saying you have two images in dialog and 1st Image in your dialog that you have not mentioned here matches the fields of image component dialog and you can change name and fileReference properties of this ICON image, then there is no option but to implement the whole logic yourself in new model.

For this, you should follow https://github.com/adobe/aem-core-wcm-components/blob/213eb0289aaeb9318fe2c7a15e88743251304063/bundl... and https://github.com/adobe/aem-core-wcm-components/blob/213eb0289aaeb9318fe2c7a15e88743251304063/bundl... for implemetation and logic on getting image properties for both uploaded or dam image.

Hope it helps

Thanks

Nupur