Copied to clipboard

Flag this post as spam?

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


  • BEWD 89 posts 301 karma points
    Mar 27, 2023 @ 08:28
    BEWD
    0

    Rendering Files not images from media library

    Hi All

    Previously in v8 I created the ability to be able to select multiple downloadable files on a page and render them out on that page, For example, application forms, leaflet information etc. It looks like enter image description here

    I did it using a macro so thy should be added anywhere on the page with the with the following code.

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    
    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @using Umbraco.Core.Models.PublishedContent
    @using Umbraco.Web
    @using Umbraco.Core
    @*
        Macro to display a gallery of images from the Media section.
        Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).
    
        How it works:
            - Confirm the macro parameter has been passed in with a value
            - Loop through all the media Ids passed in (might be a single item, might be many)
            - Display any individual images, as well as any folders of images
    
        Macro Parameters To Create, for this macro to work:
        Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                                Type: (note: You can use a Single Media Picker if that's more appropriate to your needs)
    *@
    
    @{ var mediaIds = Model.MacroParameters["selectDownloads"] as string; }
    
    @if (mediaIds != null)
    {
        <div class="row">
            @foreach (var mediaId in mediaIds.Split(','))
            {
                var media = Umbraco.Media(mediaId);
    
                @* a single image *@
                if (media.IsDocumentType("file"))
                {
                    @Render(media);
                }
    
                @* a folder with images under it *@
                foreach (var image in media.Children())
                {
                    @Render(image);
                }
            }
        </div>
    }
    
    @helper Render(IPublishedContent item)
    {
    <div class="col-xs-6 col-md-3">
        @{var x = "";
            if (Convert.ToUInt64(@item.Value("UmbracoBytes")) < 1048576)
            {
                x = ((Math.Round(Convert.ToDecimal(@item.Value("UmbracoBytes")) / 1024, 0)).ToString() + " Kb");
            }
            else
            {
                x = ((Math.Round(Convert.ToDecimal(@item.Value("UmbracoBytes")) / 1048576, 2)).ToString() + " Mb");
            }
            <div class="document">
                    <p>
                        @if (@item.Value<string>("UmbracoExtension") == "pdf")
                        {
                            <img src="~/assets/images/pdf-doc.png" alt="PDF Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "docx" || @item.Value<string>("UmbracoExtension") == "doc")
                        {
                            <img src="~/assets/images/DOC-icon.png" alt="Document Icon" height="25">
                        }
    
                        else if (@item.Value<string>("UmbracoExtension") == "xlsx" || @item.Value<string>("UmbracoExtension") == "xls")
                        {
                            <img src="~/assets/images/excel-doc.png" alt="Spreadsheet Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "csv")
                        {
                            <img src="~/assets/images/CSV-icon.png" alt="Csv Icon" height="25">
                        }
    
                        else if (@item.Value<string>("UmbracoExtension") == "ppt" || @item.Value<string>("UmbracoExtension") == "pptx")
                        {
                            <img src="~/assets/images/CSV-icon.png" alt="Powerpoint Icon Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "tiff")
                        {
                            <img src="~/assets/images/tiff-icon.png" alt="TIFF File Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "txt")
                        {
                            <img src="~/assets/images/TXT-icon.png" alt="Text File Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "xml")
                        {
                            <img src="~/assets/images/CSV-icon.png" alt="XML Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "xsl")
                        {
                            <img src="~/assets/images/xsl-icon.png" alt="xsl Icon" height="25">
                        }
                        else if (@item.Value<string>("UmbracoExtension") == "zip")
                        {
                            <img src="~/assets/images/zip-icon.png" alt="zip Icon" height="25">
                        }
                        <a href="@item.Url" target="_blank">
                            @item.Name - @item.Value("UmbracoExtension") - @x
                            <span class="fileName"> </span>
                            <span class="fileExtention">  </span>
                        </a>
                    </p>
            </div>
            }
    </div>
    }
    

    I have tried to replicate this using the gallery macro snippet in V10 but I just cant get it to display any file information. It works fine for images but files just don't render.

    For example the below as a very basic doesnt work.

     @inherits Umbraco.Cms.Web.Common.Macros.PartialViewMacroPage
    @using Umbraco.Cms.Core
    @using Umbraco.Cms.Core.Media
    @using Umbraco.Cms.Core.Models.PublishedContent
    @using Umbraco.Cms.Core.Routing
    @using Umbraco.Extensions
    
    @inject IPublishedValueFallback PublishedValueFallback
    @inject IPublishedContentQuery PublishedContentQuery
    @inject IVariationContextAccessor VariationContextAccessor
    @inject IPublishedUrlProvider PublishedUrlProvider
    @inject IImageUrlGenerator ImageUrlGenerator
    
    @*
        Macro to display a gallery of images from the Media section.
        Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).
    
        How it works:
            - Confirm the macro parameter has been passed in with a value
            - Loop through all the media Ids passed in (might be a single item, might be many)
            - Display any individual images, as well as any folders of images
    
        Macro Parameters To Create, for this macro to work:
        Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                                Type: (note: You can use a Single Media Picker if that's more appropriate to your needs)
    *@
    
    @{ var mediaIds = Model?.MacroParameters["selectDownloads"] as string; }
    
    @if (mediaIds != null)
    {
    
            @foreach (var mediaId in mediaIds.Split(','))
            {
                var media = PublishedContentQuery.Media(mediaId);
    
                @* a single image *@
                if (media.IsDocumentType("file"))
                {
    
                        <a href="@media.Url(PublishedUrlProvider)">
                            @media.Value("Name")
                        </a>
    
                }
    
    
            }
    
    }
    

    I'm pretty sure its something really basic that I am missing but I just keep going round in circles. Any ideas?

    Thanks

    Ben

  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Mar 27, 2023 @ 10:11
    Huw Reddick
    0

    This works for me

            @foreach (var mediaId in mediaIds.Split(','))
            {
                var media = Umbraco.Media(mediaId);
    
                @* a single image *@
               @if (media.IsDocumentType("file"))
              {
    
                  <a href="@media.Url()">@media.Name</a> @media.Value("umbracoBytes")
    
               }
    
    
            }
    
  • BEWD 89 posts 301 karma points
    Mar 27, 2023 @ 11:28
    BEWD
    100

    Thanks Huw

    It turns out that the PDF I was trying to render are being uploaded as Articles and not Files. I have never seen that before but it looks like that was why it wasn't working.

    The code I settled on is :

    @inherits Umbraco.Cms.Web.Common.Macros.PartialViewMacroPage
    @using Umbraco.Cms.Core
    @using Umbraco.Cms.Core.Media
    @using Umbraco.Cms.Core.Models.PublishedContent
    @using Umbraco.Cms.Core.Routing
    @using Umbraco.Extensions
    
    @*
        Macro to display a gallery of images from the Media section.
        Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).
    
        How it works:
            - Confirm the macro parameter has been passed in with a value
            - Loop through all the media Ids passed in (might be a single item, might be many)
            - Display any individual images, as well as any folders of images
    
        Macro Parameters To Create, for this macro to work:
        Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                                Type: (note: You can use a Single Media Picker if that's more appropriate to your needs)
    *@
    
    @{
        var mediaIds = Model.MacroParameters["selectDownloads"] as string;
    }
    
    @if (mediaIds != null)
    {
        <div class="row">
            @foreach (var mediaId in mediaIds.Split(','))
            {
                var media = Umbraco.Media(mediaId);
                var x = "";
                @* a single image *@
    
    
                @if (media.IsDocumentType("umbracoMediaArticle") || (media.IsDocumentType("file")))
                    {
                        if (Convert.ToUInt64(@media.Value("UmbracoBytes")) < 1048576)
                        {
                            x = ((Math.Round(Convert.ToDecimal(@media.Value("UmbracoBytes")) / 1024, 0)).ToString() + " Kb");
                        }
                        else
                        {
                            x = ((Math.Round(Convert.ToDecimal(@media.Value("UmbracoBytes")) / 1048576, 2)).ToString() + " Mb");
                        }
                        <div class="document">
                            <p>
                                @if (@media.Value<string>("UmbracoExtension") == "pdf")
                                {
                                    <img src="~/assets/images/pdf-doc.png" alt="PDF Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "docx" || @media.Value<string>("UmbracoExtension") == "doc")
                                {
                                    <img src="~/assets/images/DOC-icon.png" alt="Document Icon" height="25">
                                }
    
                                else if (@media.Value<string>("UmbracoExtension") == "xlsx" || @media.Value<string>("UmbracoExtension") == "xls")
                                {
                                    <img src="~/assets/images/excel-doc.png" alt="Spreadsheet Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "csv")
                                {
                                    <img src="~/assets/images/CSV-icon.png" alt="Csv Icon" height="25">
                                }
    
                                else if (@media.Value<string>("UmbracoExtension") == "ppt" || @media.Value<string>("UmbracoExtension") == "pptx")
                                {
                                    <img src="~/assets/images/CSV-icon.png" alt="Powerpoint Icon Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "tiff")
                                {
                                    <img src="~/assets/images/tiff-icon.png" alt="TIFF File Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "txt")
                                {
                                    <img src="~/assets/images/TXT-icon.png" alt="Text File Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "xml")
                                {
                                    <img src="~/assets/images/CSV-icon.png" alt="XML Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "xsl")
                                {
                                    <img src="~/assets/images/xsl-icon.png" alt="xsl Icon" height="25">
                                }
                                else if (@media.Value<string>("UmbracoExtension") == "zip")
                                {
                                    <img src="~/assets/images/zip-icon.png" alt="zip Icon" height="25">
                                }
                                <a href="@media.Url()" target="_blank">
                                    @media.Name - @media.Value("UmbracoExtension") - @x
                                    <span class="fileName"> </span>
                                    <span class="fileExtention">  </span>
                                </a>
                            </p>
                        </div>
                    }
    
            }
        </div>
    }
    

    And the output now works

    enter image description here

    Thank you for your quick response.

Please Sign in or register to post replies

Write your reply to:

Draft