reverse children of media folder

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 09:03

Reverse Children of Media Folder

Hello. I am creating a Gallery in Umbraco 8.

I want to reverse the order of the images in my media-folder.

I have the following Code in Umbraco 8 in an Partial View. The Model of the Partial View is IPublishedContent.

@{
    var images = Model.Images;
}
<section class="padding">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Bilder</h2>
                <div class="line primaryborder marginbottom"></div>
            </div>
            <div class="col-12">
                <div class="lg-gallery" id="macy-container">
                    @foreach (var item in images.Children)
                    {
                        if (item.ContentType.Alias == "Folder")
                        {
                            foreach (var subitem in item.Children)
                            {
                                <a href="@subitem.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@subitem.Id">
                                    <div class="imgwrap">
                                        <img src="@subitem.Url?anchor=center&mode=crop&width=300" />
                                        <div class="overlay">
                                            <img src="/_img/gallery.svg" />
                                        </div>


                                    </div>

                                </a>
                            }
                        }
                        else
                        {
                            <a href="@item.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@item.Id">
                                <div class="imgwrap">
                                    <img src="@item.Url?anchor=center&mode=crop&width=300" />
                                    <div class="overlay">
                                        <img src="/_img/gallery.svg" />
                                    </div>
                                </div>
                            </a>
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</section>

Now i want to reverse the Images in "item.Children", how can i achieve this?

or i can sort it by NodeId Reverse, but i dont know how.

Please help me

Kind regards

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Apr 23, 2019 @ 09:09

...as simple as?

item.Children.Reverse()

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 09:21

Thanks for your answer

I already tried this i got the error:

'No overload for method 'Reverse' takes '0' arguments'

what am i doing wrong?

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 23, 2019 @ 09:33

As an alternative to .Reverse(), you could use something like the following:

item.Children.OrderByDescending(x => x.SortOrder)

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 09:34

Thanks for your answer.

Now i get this error:

CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type.

Is there a problem because it is dynamic? how can i avoid this?

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Apr 23, 2019 @ 09:37

It's more than likely you are hitting a NULL at some point. Either an empty Folder, or Image. Simplify your code, and introduce any inner loops/foreachs's only when you are confident the outer one works :-)

      @if (images != null && images.Any())
        { 
                foreach (var item in images.Reverse())
                {
                       <p>@item.Name</p>

                }
         }
         else
         {
             <p>Empty</p>
         }

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 09:45

Thanks for your answer.

I don't think im hitting a NULl but i tried it now, but there is another error now.

@using Umbraco.Core.Models.PublishedContent;

@{
    var images = Model.Images;
}
<section class="padding">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Bilder</h2>
                <div class="line primaryborder marginbottom"></div>
            </div>
            <div class="col-12">
                <div class="lg-gallery" id="macy-container">
                    @if (images != null && images.Any())
                    {
                        foreach (var item in images)
                        {
                            if (item.ContentType.Alias == "Folder")
                            {
                                foreach (var subitem in item.Children.Reverse())
                                {
                                    <a href="@subitem.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@subitem.Id">
                                        <div class="imgwrap">
                                            <img src="@subitem.Url?anchor=center&mode=crop&width=300" />
                                            <div class="overlay">
                                                <img src="/_img/gallery.svg" />
                                            </div>


                                        </div>

                                    </a>
                                }
                            }
                            else
                            {
                                <a href="@item.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@item.Id">
                                    <div class="imgwrap">
                                        <img src="@item.Url?anchor=center&mode=crop&width=300" />
                                        <div class="overlay">
                                            <img src="/_img/gallery.svg" />
                                        </div>
                                    </div>
                                </a>
                            }
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</section>

i get the Error:

'System.Collections.Generic.List<Umbraco.Core.Models.PublishedContent.IPublishedContent>' does not contain a definition for 'Any'

hmmm, in umbraco 7 everything worked fine, i never should have changed in this new project^^ please help

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Apr 23, 2019 @ 09:48

Just do a....

<p>@Models.Images</p>

Lets see if you have an actual array of anything! :-)

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 10:09

Now it shows

System.Collections.Generic.List`1[Umbraco.Core.Models.PublishedContent.IPublishedContent]

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 10:12

and if i do @item.Children in the inner foreach i get::

 Umbraco.Core.Models.PublishedContent.IPublishedContent[]

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Apr 23, 2019 @ 10:57

Did you try taking off the .Any() ??

   @if (images != null)

         {
            <p>@images.Name</p>

         }

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 11:53

yes the gallery is working, its everything ok, but i want to reverse the order of all images.

the normal order is working normally. But i don't know how to reverse the item.Children in the inner foreach.

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Apr 23, 2019 @ 12:11

@{

    // Assuming this is a "single media node" picker. Where the user picks the root of the gallery.
    var images = Model.Images;
}

<section class="padding">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Bilder</h2>
                <div class="line primaryborder marginbottom"></div>
            </div>
            <div class="col-12">
                <div class="lg-gallery" id="macy-container">
                    @if (images != null)
                    {
                        foreach (var item in images.Children)
                        {
                            if (item.ContentType.Alias == "Folder")
                            {
                                foreach (var subitem in item.Children.Reverse())
                                {
                                    <a href="@subitem.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@subitem.Id">
                                        <div class="imgwrap">
                                            <img src="@subitem.Url?anchor=center&mode=crop&width=300" />
                                            <div class="overlay">
                                                <img src="/_img/gallery.svg" />
                                            </div>


                                        </div>

                                    </a>
                                }
                            }
                            else
                            {
                                <a href="@item.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@item.Id">
                                    <div class="imgwrap">
                                        <img src="@item.Url?anchor=center&mode=crop&width=300" />
                                        <div class="overlay">
                                            <img src="/_img/gallery.svg" />
                                        </div>
                                    </div>
                                </a>
                            }
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</section>

Copy Link

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 12:46

Its now working, i did it the following. Thanks you raised me on the right way.

@using System.Collections
@using System.Linq;

@{
    // Assuming this is a "single media node" picker. Where the user picks the root of the gallery.
    var images = Model.Images;
}

<section class="padding">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Bilder</h2>
                <div class="line primaryborder marginbottom"></div>
            </div>
            <div class="col-12">
                <div class="lg-gallery" id="macy-container">
                    @if (images != null)
                    {
                        IEnumerable<dynamic> children = images.Children;
                        foreach (var item in children.OrderByDescending(x => x.Id))
                        {

                            <a href="@item.Url?anchor=center&mode=crop&width=1080" data-sub-html="#caption-@item.Id">
                                <div class="imgwrap">
                                    <img src="@item.Url?anchor=center&mode=crop&width=300" />
                                    <div class="overlay">
                                        <img src="/_img/gallery.svg" />
                                    </div>


                                </div>

                            </a>

                        }
                    }
                </div>
            </div>
        </div>
    </div>
</section>

This line did the Trick:

IEnumerable<dynamic> children = images.Children;

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Apr 23, 2019 @ 13:00

You'll probably want to use this...

.OrderByDescending(x => x.SortOrder)

As ID, is merely the ID of the media item, and not it's sort position in the Media Tree..

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?

Reverse Children of Media Folder