rendering media library by properties - Using Umbraco and getting started

Tim Bennett 23 posts 155 karma points

Oct 07, 2020 @ 11:55

Rendering Media Library by Properties?

Hi there!

I am trying to build a page that details all the copyright information for my websites' imagery.

I would like to render all images in my media library on a single page, but sorted by a custom property value I have assigned (e.g. copyright holder, client, etc) like so:

Client One - render only images of client one
Client Two - render only images of client two

Currently I can render all the images as per this post: https://our.umbraco.com/forum/templates-partial-views-and-macros/87221-list-all-media-items-from-media-library

but I am at a loss as how to refactor that to my needs :(

What I have done is manually create a doc type for each client that holds their name and a URL which I then use the render an element for each one on the page, then I try and use the above code to loop through the library and perform a check of each media item's custom property against the name from the doc type and render if ==. Sadly it is not working and I have no idea how to progress

Here is my code:

    @{
        var selection = Umbraco.Content(Guid.Parse("1f3adafa-8ece-416b-a9a8-7632927fd896"))
        .ChildrenOfType("copyrightHolder")
        .Where(x => x.IsVisible());



        <div class="container">
            <div class="row">
                @foreach (var item in selection)
                {
                    var link = item.Value("copyrightHolderLink");
                    var copyrightHolder = item.Value("copyrightHolderName");
                    var list = Umbraco.MediaAtRoot();

                    <div class="col-auto">
                        <div class="col-12">
                            <a href="@link">
                                @copyrightHolder
                            </a>
                        </div>
                        <div class="col-12">
                            @if (list.Any())
                            {
                                <ul>
                                    @foreach (var media in list)
                                    {
                                        <li>
                                            <a href="@media.Url">@media.Name</a>
                                            @if (media.Children != null && media.Children.Any())
                                            {
                                                <div class="grid">
                                                    <div class="grid-sizer">
                                                        @RenderChildMedias(media.Children)
                                                    </div>
                                                </div>
                                            }
                                        </li>
                                    }
                                </ul>
                            }

                            @helper RenderChildMedias(IEnumerable<IPublishedContent> mediaItems)
                            {
                                if (mediaItems.Any())
                                {
                                    foreach (var media in mediaItems)
                                    {
                                        var check = media.Value("copyrightHolder");

                                        if (check == @copyrightHolder)
                                        {
                                            <div class="grid-item">
                                                <img src="@media.Url">
                                            </div>
                                            if (media.Children != null && media.Children.Any())
                                            {
                                                @RenderChildMedias(media.Children)
                                            }
                                        }
                                        else
                                        {
                                            return null;
                                        }
                                    }
                                }
                            }
                        </div>
                    </div>
                }
            </div>
        </div>
    }
</div>

Copy Link

Tim Bennett 23 posts 155 karma points

Oct 27, 2020 @ 12:34

I resolved this in the end essentially by creating a hidden div and populated a Dictionary with the copyright holder's name/copyright holder's URL as the key/value pair for each image, although checking for duplication before storing in Dictionary. Then used the dictionary to populate the page with a list of copyright holder names, which then were appended with the relevant images from the hidden divs via JavaScript. Whilst it may not be the most elegant solution, it was complicated by needing to extract IPTC metadata from the file to get the required copyright info to begin with. Anyway, it works :D

Here's some code in case this helps someone in the future. There's some additional code in there to extract metadata, on which I have more info here: https://our.umbraco.com/forum/using-umbraco-and-getting-started/103764-populate-properties-with-exif-data

@using MetadataExtractor     
@{
                <!-- get media library -->
                var list = Umbraco.MediaAtRoot().DescendantsOrSelfOfType("image");
                <!-- instantiate dictionary to hold copyright metadata -->
                IDictionary<string, string> copyrightList = new Dictionary<string, string>();
                bool check = true;
                foreach (var image in list)
                {
                    <!-- get physical path-->
                    var physicalPath = Server.MapPath(image.Url);
                    <!-- get IPTC metadata -->
                    var directories = ImageMetadataReader.ReadMetadata(physicalPath);
                    var IptcDir = directories.OfType<MetadataExtractor.Formats.Iptc.IptcDirectory>().FirstOrDefault();

                    if (IptcDir != null)
                    {
                        var descriptor = new MetadataExtractor.Formats.Iptc.IptcDescriptor(IptcDir);
                        // get IPTC values
                        String copyright = descriptor.GetCopyrightNoticeDescription();
                        String copyrightUrl = descriptor.GetSourceDescription();

                        <div class="[email protected]().Replace(" ","") d-none" data-url="@image.Url" data-copyright="@copyright.ToLower().Replace(" ", "")"></div>

                        if (check)
                        {
                            copyrightList.Add(copyright, copyrightUrl);
                            check = false;
                            <div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
                                <h2>@copyright</h2>
                                <h4 class="text-muted"><a href="http://@copyrightUrl">@copyrightUrl</a></h4>
                                <p>
                                    <button class="btn btn-sm btn-primary" type="button" data-toggle="collapse" data-target="#@copyright.ToLower().Replace(" ","")" data-test="test" aria-expanded="false" aria-controls="collapseExample">
                                        See images
                                    </button>
                                </p>
                                <div class="collapse" id="@copyright.ToLower().Replace(" ","")">
                                    <div class="card card-body">
                            // images rendered from hidden `.imgData_*` divs with matching key/values  via JavaScript
                                    </div>
                                </div>
                            </div>
                        }
                        //check dictionary for key
                        if (!copyrightList.ContainsKey(copyright))
                        {
                            // add to dictionary
                            copyrightList.Add(copyright, copyrightUrl);

                            <div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
                                <h2>@copyright</h2>
                                <h4 class="text-muted"><a href="http://@copyrightUrl">@copyrightUrl</a></h4>
                                <p>
                                    <button class="btn btn-sm btn-primary" type="button" data-toggle="collapse" data-target="#@copyright.ToLower().Replace(" ","")" data-test="test" aria-expanded="false" aria-controls="collapseExample">
                                        See images
                                    </button>
                                </p>
                                <div class="collapse" id="@copyright.ToLower().Replace(" ","")">
                                    <div class="card card-body">
                                        // images rendered from hidden `.imgData_*` divs with matching key/values  via JavaScript
                                    </div>
                                </div>
                            </div>
                        }
                    }
                }
            }

Copy Link

is working on a reply...

Flag this post as spam?

Rendering Media Library by Properties?