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
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?
@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")
}
}
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>
}
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
I did it using a macro so thy should be added anywhere on the page with the with the following code.
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.
I'm pretty sure its something really basic that I am missing but I just keep going round in circles. Any ideas?
Thanks
Ben
This works for me
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 :
And the output now works
Thank you for your quick response.
is working on a reply...