HOW TO: Fetch ValueMap values in sightly for a custom component included in dialog of another component

[kumarsampath_r]

Short question: What would be the HTL version of

<%
  ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
  String imageSource = vm.get("value", String.class);
%>

Explanation:

I have a custom component - customImageComponent whose

sling:resourceSuperType="granite/ui/components/coral/foundation/form/field"

and has its render.jsp as :

<%@include file="/libs/granite/ui/global.jsp" %>
<%@page session="false" import="com.adobe.granite.ui.components.Field" %>
<%
    ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
  String imageSource = vm.get("value", String.class);
%>
<div>
  <img style="width:100%" id="imageId" src="<%=imageSource%>" onload="return imageClicked(event);" onclick="return imageClicked(event);">
</div>

And this component is being used in dialog of another component in addition to being used in a few pages

                    <imagePreview
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="group/components/customImageComponent"
                        fieldDescription="Leave empty to use the Default text"
                        fieldLabel="Hotel Name"
                        name="imageURL"/>

Now I am trying to switch to HTL and do away with render.jsp.

In the model, I have:

@Inject
@Named("imageURL")
protected String imageURL;

This works perfectly fine when the component is used in a page. But fails to get imageURL where the component is being used in the dialog. I understand that @Inject is trying to find the property at the resource under dialog. Is there a way where I can configure it to fetch from the page even when the component is used in dialog.