displaying images from a multiple media picker

Jeremy Wiersma 37 posts 134 karma points

Aug 17, 2014 @ 14:21

Alright, I give up, after four days of trying.

I have installed Umbraco 7.1.4 and getting images to display is so difficult it's simply rediculous... but... I have no choice now but to find out why it's not working as a deadline is fast approaching.

Now this could be something really simple I realise... but no amount of research throughout these forums and Stack Overflow primarily has been helpful, and trial and error has failed to. In essense this has simply been soul destroying.

BTW: As of 4 hours ago this issue was working... until when trying to figure out why I could not get Cropped Images to work on another page (hint: another topic being created shortly), and the fix appeared to be updating the Image Processor, said update broke that too... No wait I just got the image back... but it's still not cropped. Ugh.

The biggest problems I've found trying to figure this out is documentation or answers that are for old versions, or most often just don't quite go far enough to set the context of the code being suggested - before and after the core answer has been provided. This leaves beginners like me not quite knowing if I can, should, or are using @model or @model.content or @fieldname or @Umbraco.Field, etc.

Anyway, here's what I'm trying to do;

Display via a Partial View a set of images from the current page's Multiple Media Picker field ("propHeroSlider")

And so far this is what DID work until my ImageProcessor update killed it;

@if (Model.Content.HasValue("propHeroSlider"))
{
    var heroBannerList = Model.Content.GetPropertyValue<string>("propHeroSlider").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var heroBannerCollection = Umbraco.TypedMedia(heroBannerList).Where(x => x != null);
    foreach (var heroBanner in heroBannerCollection)
    {
        <li><img src="@heroBanner.Url" alt="@heroBanner.Name" /></li>
    }
}

Which now results in this error:

System.NotSupportedException: Cannot resolve a Url for a media item when there is no 'umbracoFile' property defined.

Then I tried this;

@if (Model.Content.HasValue("propHeroSlider"))
{
    var heroBannerList = Model.Content.GetPropertyValue<string>("propHeroSlider").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var heroBannerCollection = Umbraco.TypedMedia(heroBannerList).Where(x => x != null);
    foreach (var heroBanner in heroBannerCollection)
    {
        var heroBannerFile = Umbraco.Media(heroBanner.Id);
        <li><img src="@heroBannerFile.umbracoFile" alt="@heroBanner.Name" /></li>
    }
}

Which gave me:

<li><img alt="hero-banner-02.jpg" src=""></li>

Hmmm... ok...

Then I tried another sample of code I found just now which is;

@if (Model.HasValue("propHeroSlider"))
{
    foreach (var heroBanner in Model.GetProperty("propHeroSlider").Value.Split(','))
    {
        <li><img src="@Model.MediaById(@item).umbracoFile" alt="" /></li>
    }
}

But that throws up...

Umbraco.Web.Models.RenderModel does not contain a definition for HasValue... blah blah

Alright I'll try Model.Content etc. instead but of course none of the methods etc. above work either. Fixing all the errors ends up with the code that used to work as above... well USED TO... sigh.

Seriously... how on earth can I simply display a set of images from a Multiple Media Picker!?

Flag this post as spam?

Displaying images from a Multiple Media Picker