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.

Jan Bluemink · Accepted Answer · 2015-03-30T11:13:14.047

1

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")" />

edited Mar 30 '15 at 11:13

answered Mar 30 '15 at 11:02

Jan Bluemink

3,467
1
21
35

Is there a way to add a parameter for the field name? For instance my field is called "banner" in this instance but I'd like to make it reusable for all images. – brimble2010 Mar 30 '15 at 11:04
It is also possible to make a function @functions {public static string getmyimage( ..... I think this way is possible to give a parameter, an alternative a macro with a parameter. it is easy to do, there a sample macro in Umbraco, just go to the developer sectie en create a Scripting file, ( checkmark the Create Macro) and the macro is available in you template (press the insert macro button) – Jan Bluemink Mar 30 '15 at 11:33
I've made my macro: `@string id = Parameter.MediaId; ` But it tells me: `Invalid expression term 'string'` – brimble2010 Mar 30 '15 at 11:49
Never mind, I just put it in one line: `` – brimble2010 Mar 30 '15 at 12:02
concerning inline macro's, I try to avoid them: http://blog.dampee.be/post/2013/01/11/Umbraco-and-embedded-macro-scripts.aspx – dampee Mar 30 '15 at 17:35

score 0 · Answer 2 · answered Nov 03 '15 at 13:02

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

Umbraco 4.9 Display Media Picker Image in Template

2 Answers2