1

How do I get the url of an image selected using a media picker in umbraco - I have found the umbraco documentation which highlights that the return value of the media picker is the ID of the item picked. But surely this would be what you use to add images to your template?

I want to do ...

<div class="title" style="background-image:url(@Umbraco.Field("mediaPicker"))">
   <h1>...@Umbraco.Field("pageTitle")</p>
</div>

Thanks

KlydeMonroe
  • 197
  • 2
  • 4
  • 18

3 Answers3

4

As per the Umbraco Documentation you have two options, my advice would be to go with the first because I do believe that support for dynamics will be gone in a future version.

1. Typed

@if (Model.Content.HasValue("caseStudyImages"))
{
    var caseStudyImagesList = Model.Content.GetPropertyValue<string>("caseStudyImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var caseStudyImagesCollection = Umbraco.TypedMedia(caseStudyImagesList).Where(x => x != null);

    foreach (var caseStudyImage in caseStudyImagesCollection)
    {      
        <img src="@caseStudyImage.Url" style="width:300px;height:300px" />      
    }                                                               
}

2. dynamic

@if (CurrentPage.HasValue("caseStudyImages"))
{
    var caseStudyImagesList = CurrentPage.CaseStudyImages.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var caseStudyImagesCollection = Umbraco.Media(caseStudyImagesList);

    foreach (var caseStudyImage in caseStudyImagesCollection)
    {
        <img src="@caseStudyImage.Url" style="width:300px;height:300px" />
    }
}

The id is what is used to get the media object back as a TypedMedia object, from there you have access to the image url.

ProNotion
  • 3,662
  • 3
  • 21
  • 30
  • Thanks for this - I will see if I can get it to work - Is there not away you can get the url of the image using the @Umbraco.NiceUrl the same way you are able to obtain the url of a node selected through a media picker? - @Umbraco.NiceUrl(Model.Content.GetPropertyValue("contentPicker")) – KlydeMonroe Jun 21 '16 at 10:57
  • I've never tried it it that way but `NiceUrl` only wants a NodeId which is what you will be passing it if you have the media picker set to single item so you might be able to. – ProNotion Jun 21 '16 at 15:51
  • 1
    Always check as well if you get a valid typed image before use, just in case its not set or picked before you attempt to use any of its values, just a tip – denford mutseriwa Jun 23 '16 at 01:13
2

You could use the Umbraco.Media() which is a dynamic just like Umbraco.Content()

<div class="title" style="background-image:url(@Umbraco.Media(CurrentPage.MediaPicker).Url)">
   <h1>...@CurrentPage.PageTitle</p>
</div>
Morten OC
  • 1,784
  • 2
  • 23
  • 30
1

Easy way to show images:

//Get the ID of the Field
var mediaId = Umbraco.Field("NameOfYourField");
//Get the MediaType to Write the URL
var media   = Umbraco.Media(mediaId.ToString());
//Salve the Path into the Image
var image   = media.Url;

<img src="@image">

Simple and easy.

Leonardo Moura
  • 11
  • 3