Copied to clipboard

Flag this post as spam?

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


  • BEWD 90 posts 303 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 1932 posts 6722 karma points MVP 2x 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 90 posts 303 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.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies