How to show umbraco multiple media picker images on page with a macro

Question

Hello stackoverflow people hope you can help me with maybe a simple question, but couldn't find a solution elsewhere and I have just been working with umbraco for a week now and have never used the mvc part before so all is new for me.

So the big problem is how I make a macro to show these images I choose from the multiple media picker the macro should just end with showing.

<img src="img1.gif" height="50" width="50">
<img src="img2.gif" height="50" width="50">

And so on depending on how many images there is. (the size is just an exempel)

I tryed somthing like this

 @var selectedMedia3 = @Library.MediaById(Model.mainImage);
      <img src="@selectedMedia3.umbracoFile" width="@selectedMedia3.umbracoWidth" height="@selectedMedia3.umbracoHeight" alt="@selectedMedia3.Name"/>                       
    }

But I dont know how to parse the id of the image to the macro. and when I choose more than one file I need a loop, but dont know how to loop the multiple media picker data, so im a little lost by now.

Answer 1

Are you able to let us know what version of Umbraco you are using. Umbraco has gone through a number of fundemental changes in various version over recent years. The below code should guide you in the right direction for Umbraco 7 Multiple Image picker with the propertyAlias partnersLogos.

    @if (Model.Content.HasValue("partnersLogos"))
    {
        var partnersImagesList =  Model.Content.GetPropertyValue<string>("partnersLogos").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
        var partnersImagesCollection = Umbraco.TypedMedia(partnersImagesList).Where(x => x != null);
        foreach (var partnerImage in partnersImagesCollection)
        {
            <img src="@partnerImage.Url" alt="partners logo" />
        }
    }

Answer 2

If anyone makes the same mistake as me and doesn't realise that there is a difference between the now obsolete media picker and the new media picker "Umbraco.MediaPicker2" (true from at least 7.6.1) then please read the documentation on Umbraco's web site.

https://our.umbraco.org/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Media-Picker2

@{
    var typedMultiMediaPicker = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("sliders");
    foreach (var item in typedMultiMediaPicker)
    {
        <img src="@item.Url" style="width:200px"/>
    }
}

Answer 3

I'm not really sure if you question is how to setup MVC within umbraco or getting values from an image picker.

But if you want to start up with MVC in umbraco check this out: http://24days.in/umbraco/2013/creating-reusable-code-in-mvc-apps/