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 53 posts 256 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="#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

  • Paul Wright (suedeapple) 260 posts 662 karma points
    Apr 23, 2019 @ 09:09
    Paul Wright (suedeapple)
    2

    ...as simple as?

    item.Children.Reverse()
    
  • Hubert Thalmann 53 posts 256 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?

  • Rhys Hamilton 140 posts 939 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)
    
  • Hubert Thalmann 53 posts 256 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?

  • Paul Wright (suedeapple) 260 posts 662 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>
             }
    
  • Hubert Thalmann 53 posts 256 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="#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

  • Paul Wright (suedeapple) 260 posts 662 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! :-)

  • Hubert Thalmann 53 posts 256 karma points
    Apr 23, 2019 @ 10:09
    Hubert Thalmann
    0

    Now it shows

    System.Collections.Generic.List`1[Umbraco.Core.Models.PublishedContent.IPublishedContent]
    
  • Hubert Thalmann 53 posts 256 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[]
    
  • Paul Wright (suedeapple) 260 posts 662 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>
    
             }
    
  • Hubert Thalmann 53 posts 256 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.

  • Paul Wright (suedeapple) 260 posts 662 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="#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>
    
  • Hubert Thalmann 53 posts 256 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="#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;
    
  • Paul Wright (suedeapple) 260 posts 662 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..

Please Sign in or register to post replies

Write your reply to:

Draft