Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Hubert Thalmann 57 posts 263 karma points
    Apr 23, 2019 @ 09:03
    Hubert Thalmann
    0

    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="#[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
    Paul Wright (suedeapple)
    2

    ...as simple as?

    item.Children.Reverse()
    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Apr 23, 2019 @ 09:21
    Hubert Thalmann
    0

    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
    Rhys Hamilton
    1

    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
    Hubert Thalmann
    0

    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
    Paul Wright (suedeapple)
    2

    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
    Hubert Thalmann
    0

    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
    Paul Wright (suedeapple)
    0

    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
    Hubert Thalmann
    0

    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
    Hubert Thalmann
    0

    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
    Paul Wright (suedeapple)
    1

    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
    Hubert Thalmann
    0

    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
    Paul Wright (suedeapple)
    1 
    @{

    // 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
    Hubert Thalmann
    1

    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
    Paul Wright (suedeapple)
    101

    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
Please Sign in or register to post replies

Write your reply to:

Draft