Umbraco V5 Example - Media Picker

MediaPicker.cshtml

@inherits PartialViewMacroPage
@using Umbraco.Cms.Web
@using Umbraco.Cms.Web.Macros
@using Umbraco.Framework


@{
    //Output an image from the media picker

    //Property alias of mediaPicker
    var mediaPickerPropAlias = String.IsNullOrEmpty(Model.MacroParameters.mediaPickerPropAlias) ? "myMediaPickerPropertyAlias" : Model.MacroParameters.mediaPickerPropAlias;

    //Check that the property has a hiveID stored
    if (!String.IsNullOrEmpty(DynamicModel[mediaPickerPropAlias]))
    {
        //Get the image URL
        //The HiveID of the selected media item from the media picker
        //Then the string property alias of the upload data type on the media type
        var imageURL = Umbraco.GetMediaUrl(DynamicModel[mediaPickerPropAlias], "uploadedFile");

        //Get the name of the media item
        var mediaName = Umbraco.GetDynamicContentById(DynamicModel[mediaPickerPropAlias]).Name;
       
        
        <img src="@imageURL" alt="@mediaName" />
    }
    else
    {
        <p>No media HiveID present</p>
    }
}

Excellent example. Just a question. Is there any change to retrieve also the alternative text from the media name and provide the img tag with the alt attribute?

Hey Jorge, do you want the alt tag to be the name of the media item/node in the media section?

yes, unless it can be provided by the media picker.
And thanks a lot for this examples :)

Updated the example to show the name

Nice work, Warren!

I do wonder why you use the longer (and uglier?) DynamicModel[mediaPickerPropAlias] instead of the shorter (and prettier?) DynamicModel.MediaPickerPropAlias

Am I missing a reason to use one syntax or the other?

cheers,
doug.

Hi Doug,
I will try and explain the reason why I use the DynamicModel[mediaPickerPropAlias] as opposed to DynamicModel.mediaPickerPropAlias

Without the square brackets and using the dot notation, the Razor script will try to look for a property with the alias of mediaPickerPropAlias on my current page document type.

Instead we want to access the property where the property alias is equal to the value stored in our variable called mediaPickerPropAlias which may have the value of 'siteLogo' for example.

So we need to tell Razor we want to retrieve the value stored in the siteLogo property but for it to differentiate between the two we wrap our variable name in square brackets for it to work.

I hope that makes sense, if not just shout :)
Warren

I copied your code and become this error back:

The model item passed into the dictionary is of type 'Umbraco.Cms.Web.Model.Content', but this dictionary requires a model item of type 'Umbraco.Cms.Web.Model.PartialViewMacroModel'.

Any solution?

Hello,
Where did you paste this to, directly in a template?
As this needs to be a partial view macro found in the developer section of Umbraco.

Warren

Okey now i did it like this:

@inherits RenderViewPage
@using System.Web.Mvc.Html;
@using Umbraco.Cms.Web;
@{
Layout = "main.cshtml";
}

@section Content
{
< h3>@umbraco.Field("pageTitle")</ h3>
< p>@umbraco.Field("bodyText")< /p>

<img src="@Umbraco.Field("picture").Url" />

}

You are currently using the snippet in the wrong place and trying to put it inside a template directly, which is not what this snippet above is designed to do as it supposed to be inserted as a macro onto the template, passing in a macro parameter which is the property alias of the media picker on the current page/document type.

However if you want a snippet to use directly on your template use the following:

//Media picker (pass hiveID from media picker property
//and the upload ptoperty alias on media type
//default image media type uses the 
//alias 'uploadedFile' for the upload property
<img src='@Umbraco.GetMediaUrl(DynamicModel.picture, "uploadedFile")' />

I build a Document type with the Property 'Media Picker'. In my code, i can give out the URL from the image.
But if i set the Codesnippet, which gives me the url, in to the . There will come no image.

 src="@Umbraco.Field("picture", encoding: global::Umbraco.Cms.Web.UmbracoRenderItemEncodingType.Url)" 

It gives me this:

 src="media%24empty_root%24%24_p__nhibernate%24_v__guid%24_15c6c8dd425146b1bc469fec00b94f68" 

But it doesn't show me the image.

Have you a solution?

thanks :-)

You cannot use the Umbraco.Field() helper for what you are trying to do.
You need to use the snippet I pasted in the previous comment:

//Media picker (pass hiveID from media picker property
//and the upload ptoperty alias on media type
//default image media type uses the 
//alias 'uploadedFile' for the upload property
<img src='@Umbraco.GetMediaUrl(DynamicModel.picture, "uploadedFile")' />

As the property of the alias of 'picture' is a media picker it stores the HiveId (the unique ID to the media item) which in this case is the following value:
media%24empty_root%24%24_p__nhibernate%24_v__guid%24_15c6c8dd425146b1bc469fec00b94f68

As this is an ID and not the actual image path, you need to use the Umbraco.GetMediaUrl() helper
The first parameter we pass into it is the HiveId so in your case it is:
DynamicModel.picture

The second parameter we pass in the property alias string of the upload property that contaisn the image.
As you used a media picker to pick an image media type. The image media type in the settings section has a property with the alias of "uploadedFile" which is an uploader datatype.

So if you use the snippet above it should work for you.
I hope this makes sense why you cannot use Umbraco.Field.

Warren

I was looking for this answer and found this:

//Upload property type on document type
<img src='@Umbraco.GetMediaUrl(DynamicModel.Id, "yourImagePropertyName")' / >

@pepeortiz yes that is also correct but your method is using an Image Upload field with the alias yourImagePropertyName on the current document type.

<img src='@Umbraco.GetMediaUrl(DynamicModel.picture, "uploadedFile")' />

The way above is using a media tree picker property on the current document type which has the alias of picture which stores the ID to the media item stored in the media section. If an image node from the media section was selected then it has a property on that media type which is an upload field which has the property alias of uploadedField

I hope this makes sense the two different approaches.
One is for an upload field on the current document type and the other is using a media picker on the document type