Umbraco 4.9 Display Media Picker Image in Template

Question

I'm trying to allow content editors to be able to choose the main banner image on a page by having it chosen through a Media Picker property.

I've tried the standard inline XSLT of:

<umbraco:Item runat="server" field="banner" xslt="concat('&lt;img src=&quot;', umbraco.library:GetMedia({0},0)/umbracoFile, '&quot; /&gt;')" xsltDisableEscaping="true" />

But in my simple template of:

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<header class="home-header">
    <div class="logo-wrapper">
        <umbraco:Item runat="server" field="banner" xslt="concat('&lt;img src=&quot;', umbraco.library:GetMedia({0},0)/umbracoFile, '&quot; /&gt;')" xsltDisableEscaping="true" />
    </div>
</header>
</asp:Content>

The rendered HTML comes out at:

<header class="home-header">
    <div class="logo-wrapper">

    </div>
</header>

I've read about using a macro to render images but my Umbraco knowledge is limited. If someone could provide steps for actually adding an XSLT macro, I'd be happy to try that out.

Unfortunately we are stuck on Umbraco v4.9 for now too so no <umbraco:Image /> tag for me.

Answer 1

I suggest you use ac# Umbraco macro instead of xslt. Umbraco 4.9 can do that. An macro can in a differt file or simple use a inline macro:

<umbraco:Macro  runat="server" language="cshtml">   
    @if (@Model.visual != "")
    {
        <img src="@Model.Media("banner", "umbracoFile")" class="foto" />
    }
</umbraco:Macro>

Same as <img src="@node.Media("banner", "umbracoFile")" />

Answer 2

If anyone else finds this and you are not using MVC you can use this approach inside your template to get the image path you selected from the media picker

<umbraco:Item field='headerImage' runat='server'xslt='umbraco.library:GetMedia({0},true())/umbracoFile'xsltDisableEscaping='true'></umbraco:Item>

Where headerImage is the alias for your attribute name in your document type. This will render something like "/media/1002/sample.jpg" for instance