reverse children of media folder

Hubert Thalmann 57 posts 263 karma points

Apr 23, 2019 @ 09:03

Templates, (partial) views and macros

Umbraco 8

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="#[email protected]">
                                    <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="#[email protected]">
                                <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="#[email protected]">
                                        <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="#[email protected]">
                                    <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="#[email protected]">
                                        <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="#[email protected]">
                                    <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="#[email protected]">
                                <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...

Flag this post as spam?

Reverse Children of Media Folder