how to get media image url in a template

Press Ctrl / CMD + C to copy this to your clipboard.

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

0

How to get media image url in a template

Templates and document types

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 161 posts 371 karma points

Mar 12, 2014 @ 21:21

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

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 161 posts 371 karma points

Mar 12, 2014 @ 22:02
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

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

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

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?