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.

Solution 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" />
        }
    }

Solution 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"/>
    }
}