Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Joel Hammond 3 posts 23 karma points
    Mar 12, 2014 @ 20:21
    Joel Hammond
    0

    How to get media image url in a template

    I'm using Umbraco 6.1 and have the following code in a template:

    <div style="background-image:url(/images/photo.jpg);">

    Instead of hard coding the image url, I've created a property on the Document Type called "headerPhoto" of type "Media Picker".  How do I write the above div tag to use the Content headerPhoto url instead of the hard coded value?

    Copy Link
  • Yasir Butt 162 posts 372 karma points
    Mar 12, 2014 @ 21:21
    Yasir Butt
    0

    you can use one of them

    <div style="background-image:url(@Umbraco.Media(Model.Content.GetPropertyValue("headerPhoto")).Url);">
    <div style="background-image:url(@Umbraco.Media(CurrentPage.headerPhoto).Url);">
    Copy Link
  • Joel Hammond 3 posts 23 karma points
    Mar 12, 2014 @ 21:51
    Joel Hammond
    0

    I'm trying this, but the code is rendered literally.  When I view the page in a browser and view source, I get the same code.  It's not replacing it with a URL.

     

    Copy Link
  • Yasir Butt 162 posts 372 karma points
    Mar 12, 2014 @ 22:02
    Yasir Butt
    0

    ok! i have not tested it but you can try this

    var bgImage = Umbraco.Media(Model.Content.GetPropertyValue("headerPhoto"))
    <divstyle="background-image:url(@bgImage.Url);"></div>
    Copy Link
  • Joel Hammond 3 posts 23 karma points
    Mar 13, 2014 @ 02:20
    Joel Hammond
    0

    var bgImage = Umbraco.Media(Model.Content.GetPropertyValue("headerPhoto"))

     

    <divstyle="background-image:url(@bgImage.Url);"></div>

    I tried this but it is still getting rendred literally.  Both lines of code.  Any other ideas?  I'm new to Umbraco, but I thought there would be a macro to generate the image path.

    This is the result I'm trying to acheive:

    <div class="nav-backed-header parallax" style="background-image:url(/media/1031/building.jpg);">

    Copy Link
  • Fuji Kusaka 2203 posts 4220 karma points
    Mar 13, 2014 @ 05:38
    Fuji Kusaka
    0

    Hi Joel,

    Try this instead 

    @{
    if(Model.Content.HasValue("headerPhoto")){
        var bgImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("bgImage")); 
    <div class="nav-backed-header parallax" style="background-image:url(@bgImage.GetPropertyValue("umbracoFile"))">
    }   
}
    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies