Umbaco Archtype rendering images (MediaPicker2)

Question

I'm building a image slider using Archtype in Umbraco.

I was using umbraco 7.5.9 and Umbraco.MediaPicker when I started this but in the mean time I started a new project with the newest version Umbraco (7.6.2) which uses Umbraco.MediaPicker2

It was no problem rendering images with the old MediaPicker but with the MediaPicker2 it seems impossible.

Here is my setup.

The Archtype:

Here is the partial view that rendered the old MediaPicker

<div class="fullWidthSlider">
    @foreach (var image in @CurrentPage.SliderImages)
    {
        <div>Id: @image.GetValue("image")</div>@*Line added for debug*@
        var media = @Umbraco.Media(image.GetValue("image"));
        <img src="@media.Url" />
    }
</div>

This used to work for the old Media picker and the @image.GetValue returned int id. But with the new MediaPicker2 it returns Umbraco.Core.Udi[]

If I foreach through the properties of the archtype with the code below I get this result (see below code)

@foreach (var fieldset in Model.Content.GetPropertyValue<ArchetypeModel>("sliderImages"))
{
    foreach(var prop in fieldset.Properties){

        <p>@prop.Alias - @prop.Value</p>

    }
}

href -

altText - alt test

image - umb://media/c33bfe07a82b4df18a79db154139cb91

href -

altText - Fjall

image - umb://media/40d5778d34bb4035b5146c901de75212

Can anyone tell me how I can render image from this data.

Thanks

Answer 1

I just went on a roller-coaster figuring this out!

You can get an IPublishedContent from your image string using this code:

// Your string which is retrieved from Archetype.
var imageString = "umb://media/c33bfe07a82b4df18a79db154139cb91";

// Get the guid from this string.
var imageGuidUdi = GuidUdi.Parse(imageString);

// Get the ID of the node!
var imageNodeId = ApplicationContext.Current.Services.EntityService.GetIdForKey(guidUdi.Guid, (UmbracoObjectTypes)Enum.Parse(typeof(UmbracoObjectTypes), guidUdi.EntityType, true));

// Finally, get the node.
var imageNode = Umbraco.TypedMedia(imageNodeId.Result);

Check out this thread on Our Umbraco which covers this issue.

I used this comment to figure out how to get the ID from the image's guid.

---

It looks like Umbraco HQ is pushing for people to use the new ModelsBuilder with typed models. I'm not sure if Archetype is supported by the ModelsBuilder which is why there's so much trouble.

I personally use Nested Content on all of my projects as it performs the same functionality but (IMO) is better supported by Umbraco because it uses Document Types to store repeatable content schema. Because of this, it can then easily be mapped to IPublishedContent and therefore is supported by the ModelsBuilder!