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.

Jeroboam

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

Chalybite

Im using umbraco 7. and I totaly forgot this question I asked this for some time ago so I actually figured out this on my own, I found out that the multiple image picker get a string with id's so then I knew i could just seporated with ',' so I did like you described just split the string with every ',' and then loop the list. But thanks for replaying anyway maybe it will help another one some time . – Jeroboam

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

Emanuel

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/

Kyat

Im trying to get images out from a multiple image picker. but thanks for the link anyway maybe I can learn something there too need all the knowledge I can get on the filed ! – Jeroboam

If you query the value of the image picker you will probably get in return a string of ID's (that you selected) that represent the selected node id's. Having those id's, query those to get the path, or some other property that you need from them. – Kyat

yes I get a string of id's. then im asking how to query them to the path ? – Jeroboam

Hi, it's a media node right? You can use the Umbraco Helper if you are in version6: @Umbraco.TypedMedia(idofyournode) (razor-ish) or uQuery: Media yourMediaNode = umbraco.uQuery.GetMedia(idofyournode); – Kyat