I'm not an expert in Umbraco so I'm sure there may be a very efficient way of doing this.

First of all, I am assuming by "umbraco interface" you mean the backend? If that's the case, how about creating a macro with a media picker property, and using inline style for that <h1> element? Then you can insert the macro in the middle of the inline style and select the appropriate media item.

Once a Media node has been created you don't really have to remove and add the logo again. You can edit the node, remove the file, and upload a new one, all still referenced by the same media node. The macro should render the correct path to the file.

DISCLAIMER: I haven't actually tried this - it's just something I would give a go to see if it works. I hope I haven't misunderstood your requirements.

Cheers,
D.

Hi Dany,

Thanks for the info.
Just to make things more clear, i wan't the end user to change the logo via a property available under the home page, not through a rich text editor.

Based on your idea, here is what i did:

I created a macro with a parameter called "LogoId". The parameter type is "text" (i didn't find a media picker type on the list).
Here is what the macro looks like

<xsl:variable name="logoid" select="/macro/LogoID"/>
<xsl:variable name="logourl" select="umbraco.library:GetMedia($logoid, 0)"/>

<h1 id="logo" class="fl" style="background-image: url({$logourl}) no-repeat;"></h1>

After that, i created a property on the document type (MasterPage) called "LogoSite" with type set as "Media Picker". This property will allow the end user to select/change the logo on a specific tab of the home page.
A added the macro to the master page template and passed the page property as a parameter, like this:

<div class="spaceBottom box565 fl">
    <umbraco:Macro LogoID="[#SiteLogo]" Alias="LogoRender" runat="server"></umbraco:Macro>
</div>

And here is the final render:

<div class="spaceBottom box565 fl">
    <h1 id="logo" class="fl" style="background-image: url(/media/2/logo.png270509912png) no-repeat;" />
</div>

The only thing i don't get here is why it's rendering "logo.png270509912png" instead of "logo.png".
Is a browser supposed to recognize it as an image? Because Firefox isn't.

That's how I'd do it Danny, although I'm not a big fan of inline styles.

CodeMaster: I think what you could probably use is a crash course in how Umbraco works, for this problem, you could go and read the excellent blog post of Lee Kelleher on how to get media items in XSLT. But I can really recommend you have a look at umbraco.tv (a month's subscription is only €19 and you can cancel after the first month).

D'oh I took too long writing my reply, didn't see your second post CodeMaster! ;)

Instead of $logourl, try: $logourl//data[@alias='umbracoFile'])

You're outputting all of the properties of the media item now by selecting the value of the media node.

I finally got it by making a little change on the macro:

<xsl:variable name="logourl" select="umbraco.library:GetMedia($logoid, 1)/data [@alias = 'umbracoFile']"/>

Now the render looks correct to me:

 <h1 id="logo" class="fl" style="background-image: url(/media/275/logo.png) no-repeat;" />

However, it's still not showing the logo. I believe it could be a path problem but, if i try the url bellow, the logo is there.
http://mydomain.com/media/275/logo.png

Just changed the css from "background-image" to "background" and it's now working.
Thanks a lot guys.

Ah... I understand. You don't need parameters on the macro - just use the MediaPicker property on the DocumentType. In your selectors I think you need to use

<xsl:variable name="logoid" select="number(./data [@alias = 'LogoSite'])"/>
<xsl:variable name="logourl" select="umbraco.library:GetMedia($logoid,0)/data[@alias='umbracoFile']"/>

I hope I've understood you correctly now. This way logourl should give you the right URL to the image file. This is all assuming you're not using the new XML in 4.1 :o)

D'oh! You guys beat me to it :o)

is working on a reply...