looping through media picker with multiple items

Japheth Kosgei 7 posts 37 karma points

May 06, 2015 @ 10:30

Looping through Media Picker with multiple items

Hi guys,

So this is my first post on Umbraco forums - aplogies in advance if my question sounds stupid OR if I don't frame it right... (ALSO AMAZING PLUGIN LEBLENDER IS - thanks lecoati team).

I have added a media picker (with selection of multiple items enabled) to my grid... I need to enable user to upload videos in multiple formats for a carousel am working on and I would like to access URLs of all the videos selected per media picker.

I am basing my solution on the Carousel view example that comes with Leblender. After tinkering around, I have below code working for me where "video" is my media picker property alias. My question is; is this the best way of doing this? I feel it's too verbose... Maybe someone has a more elegant solution? Thanks!

Side Question: Also which is the best way to customize CSS used by le blender to display in the grid? I am very new to Umbraco's GRID data type as it is and I can't wrap my head around it...

@{
if(item.GetValue<string>("video") != "" && item.GetValue<string>("video") != null){
    var vidList = item.GetValue<string>("video").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
        var vidListCollection = Umbraco.TypedMedia(vidList).Where(x => x != null);
        foreach(var vid in vidListCollection){
                                    <h1>@vid.Urlh1>
                                }
                            }
    }

Copy Link

Alex Skrypnyk 6182 posts 24283 karma points MVP 8x admin c-trib

May 06, 2015 @ 11:39

Hi Japheth,

Welcome to our community ) 1) You can get video URLs like that:

var videoUrl = item.GetPropertyValue<string>("video");
                if (!string.IsNullOrWhiteSpace(videoUrl))
                {
                    var vidList = videoUrl.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);

                    var vidListCollection = Umbraco.TypedMedia(vidList);

                    if (vidListCollection != null)
                    {
                        foreach (var vid in vidListCollection)
                        {
                            <h1>@vid.Url</h1>
                        }
                    }
                }

Also you can write your own property value converter, documentation here : https://our.umbraco.org/documentation/extending-umbraco/property-editors/value-converters-v7

http://www.theoutfield.net/blog/2013/04/strongly-typed-property-values-using-property-editor-value-converters-in-umbraco

Thanks, Alex

Copy Link

Japheth Kosgei 7 posts 37 karma points

May 06, 2015 @ 12:36

Thanks Alex! That works perfectly :) Unfortunately I do not have enough Karmas yet to upvote your answer but thanks :p

Copy Link

Amir Khan 1289 posts 2746 karma points

May 15, 2015 @ 22:27

Does this work with the current version of LeBlender? I'm using the new Media Picker with multiple images allowed and I get the following error:

'Lecoati.LeBlender.Extension.Models.LeBlenderValue' does not contain a definition for 'GetPropertyValue' and the best extension method overload 'Umbraco.Web.PublishedContentExtensions.GetPropertyValue<T>

-Amir

Copy Link

Japheth Kosgei 7 posts 37 karma points

May 21, 2015 @ 11:52

Hi Amir, yes it works with latest version.

I could be wrong (especially since i haven't looked at the documentation before answering you) but my crystal balls tell me LeBlender exposes its own model to the partial view (BlenderModel). I think this model doesn't have a definition of 'GetPropertyValue' as Umbraco Render Model does. What exactly are you trying to achieve? List images? perhaps you could try something like below. Let me know if this helps :)

@inherits UmbracoViewPage<Lecoati.LeBlender.Extension.Models.LeBlenderModel>

@if (Model.Items.Any()){ 
    foreach (var item in Model.Items){
        if(item.GetValue<string>("imagePropertyName") != "" && item.GetValue<string>("imagePropertyName") != null){
            //do something with your image...
        }

    }
}

Copy Link

Amir Khan 1289 posts 2746 karma points

May 21, 2015 @ 16:55

HI Japeth, the issue I was having I think (in addition to the GetPropertyValue issue) is that it was stored as CSV. Here's what ended up working for me.

var item = Model.Items.ElementAt(0);
        
        var imageList = item.GetValue<string>("multiImageSlider");
        if (!string.IsNullOrWhiteSpace(imageList))
                {
                    var vidList = imageList.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);

                    var vidListCollection = Umbraco.TypedMedia(vidList);

                    if (vidListCollection != null)
                    {
                        foreach (var vid in vidListCollection)
                        {
                            <li><img src="@vid.Url"></li>
                        }
                    }
                }
        }

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Looping through Media Picker with multiple items