Umbraco 4.9 Display Media Picker Image in Template

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.

Solution

I suggest you use a c# 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")" />