Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • CodeMaster2008 151 posts 184 karma points
    Apr 07, 2010 @ 01:09

    Allow users to change the website logo


    I already went through lots of topics talking about uploading and using images and found and all of them has usefull information however I still can't figure out a good way of doing what i need:

    I'm importing a HTML layout to umbraco.
    Here is how the designer added the logo:

    <h1 id="logo" class="fl"></h1>

    And here is the css class:

    #logo {
     width: 270px;
     height: 50px;
     background: url(../images/logo.png) no-repeat;

    Now the challenge:

    - The end user have to be able to change the logo using the umbraco interface.
    - I'd like to keep things as close as possible to the original design, so when he provide an update/fix it will be easier for me to import the update.

    If I upload the logo under "Media" and add a referene to it on the css, something like "media/2/logo.png" I still have problems because i believe the number "2" is an Id and will change if the user remove and add the logo again. Also, I won't be able to use the same css on other websites.

    I noticed people talking about create a "images" folder under the root folder but i believe they are talking about the ftp client option right? Because i don't see an option to create a folder under the "Content" node.

    I'm very sure it's something really easy but sisnce I'm new to how things work on Umbraco I'm probably missing something.
    Thanks in advance.

  • Dany Wu 81 posts 114 karma points
    Apr 07, 2010 @ 04:47
    Dany Wu

    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.


  • CodeMaster2008 151 posts 184 karma points
    Apr 07, 2010 @ 08:44

    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>

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

    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.

  • Sebastiaan Janssen 4890 posts 14567 karma points MVP admin hq
    Apr 07, 2010 @ 08:52
    Sebastiaan Janssen

    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 (a month's subscription is only €19 and you can cancel after the first month).

  • Sebastiaan Janssen 4890 posts 14567 karma points MVP admin hq
    Apr 07, 2010 @ 08:56
    Sebastiaan Janssen

    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.

  • CodeMaster2008 151 posts 184 karma points
    Apr 07, 2010 @ 09:16

    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.

  • CodeMaster2008 151 posts 184 karma points
    Apr 07, 2010 @ 09:21

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

  • Dany Wu 81 posts 114 karma points
    Apr 07, 2010 @ 09:23
    Dany Wu

    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)

  • Dany Wu 81 posts 114 karma points
    Apr 07, 2010 @ 09:25
    Dany Wu

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

Please Sign in or register to post replies

Write your reply to: