Copied to clipboard

Flag this post as spam?

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


  • Tim Bennett 23 posts 154 karma points
    Oct 07, 2020 @ 11:55
    Tim Bennett
    0

    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>
    
  • Tim Bennett 23 posts 154 karma points
    Oct 27, 2020 @ 12:34
    Tim Bennett
    100

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

Write your reply to:

Draft