How do I Use 'List Images From Media Folder' Snippet in Partial View Macro?
I am very new to Umbraco and wish to create a Gallery. I need to retrieve I list of images and add the list to a page for furthur processing by Jquery. I have tried using the snippet included in Umbraco 7.1 and creating macro parameters but am unsure of the complete procedure to get this to work. Please help. Thanks
Ok, first question is do you need a partial view macro for this or could you just write the code into your view? Second question is how are you going to select the folder that contains the images, a media picker perhaps?
I have just been following the comments in the provided snippet which are:-
"Macro to display a gallery from a media folder. Add the below parameter to the macro and use it to point the macro at a specific media folder to display it's content as a simple list.
Macro Parameters To Create, for this macro to work: Alias:mediaId Name:Media Folder ID Type:Single Media Picker"
Ok, so you have the macro and you have created the macro parameter, now you need to insert into a template. To do this you click the third icon in the template toolbar and then select the macro, does that make sense?
I expected there to a be the Media Folder ID property appearing on the properties tab of the page generated from that template, but that doesn't appear.
You should be presented with the media picker to select the folder when you insert the macro into the template, then the code I posted above should be generated. If that's not happening, it sounds like the macro parameter didn't save when you added it...?
The alternative would be to write this code directly into the view without using the macro at all (change myMediaPicker to your media picker property alias)
e.g.
@{
var myMediaPicker = CurrentPage.myMediaPicker;
var mediaFolder = Umbraco.Media(myMediaPicker);
if (mediaFolder.Children.Any())
{
<ul class="thumbnails">
@* for each item in children of the selected media folder *@
@foreach (var mediaItem in mediaFolder.Children)
{
<li class="span2">
<a href="@mediaItem.Url" class="thumbnail">
<img src="@mediaItem.Url" alt="@mediaItem.Name" />
</a>
</li>
}
</ul>
}
}
I did have a capital I and D so that has now been corrected and I do get to choose a media folder when I insert the macro so the code in the template looks like this:-
Ok, the "MediaId" needs to exactly match what you have in the template and Macro definition, e.g
In the partial view:
@if (Model.MacroParameters["MediaId"] != null)
{
@* Get the media folder as a dynamic node *@
var mediaFolder = Umbraco.Media(Model.MacroParameters["MediaId"]);
How do I Use 'List Images From Media Folder' Snippet in Partial View Macro?
I am very new to Umbraco and wish to create a Gallery. I need to retrieve I list of images and add the list to a page for furthur processing by Jquery. I have tried using the snippet included in Umbraco 7.1 and creating macro parameters but am unsure of the complete procedure to get this to work. Please help. Thanks
Hi Gary,
Welcome to Our!
Ok, first question is do you need a partial view macro for this or could you just write the code into your view? Second question is how are you going to select the folder that contains the images, a media picker perhaps?
Jeavon
Hi Jeavon,
thanks for your interest.
I have just been following the comments in the provided snippet which are:-
"Macro to display a gallery from a media folder. Add the below parameter to the macro
and use it to point the macro at a specific media folder to display it's content as
a simple list.
Macro Parameters To Create, for this macro to work:
Alias:mediaId Name:Media Folder ID Type:Single Media Picker"
Gary
Ok, so you have the macro and you have created the macro parameter, now you need to insert into a template. To do this you click the third icon in the template toolbar and then select the macro, does that make sense?
Yes, that is exactly what I did, but I must be doing something wrong because I just get 'The yellow screen of death' :-(
Gary
Ok, does the Yellow Screen have any error message in it?
It says
Line 7: *@
Line 8:
Line 9: @if (Model.MacroParameters["mediaId"] != null)
Line 10: {
Line 11: @* Get the media folder as a dynamic node *@
Gary
Just tried this again and got;-
Error loading Partial View script (file: ~/Views/MacroPartials/gallery.cshtml)
where the macro is inserted in the template.
I do appreciate your help with sorting this
Gary
Ok, in your template does your render macro contain the id?
Something like this:
I expected there to a be the Media Folder ID property appearing on the properties tab of the page generated from that template, but that doesn't appear.
Gary
No the template doesn't show the ID
You should be presented with the media picker to select the folder when you insert the macro into the template, then the code I posted above should be generated. If that's not happening, it sounds like the macro parameter didn't save when you added it...?
You macro parameter setup should look something like this
Parameters are similar to yours except Name is "Media Folder ID"
maybe there is a better way to acheive this?
Gary
Alias is the important one, do you have the capital I, in "mediaId"?
When you insert the macro into the template do you need get a dialog like this one below after you've selected your macro?
The alternative would be to write this code directly into the view without using the macro at all (change myMediaPicker to your media picker property alias)
e.g.
I did have a capital I and D so that has now been corrected and I do get to choose a media folder when I insert the macro so the code in the template looks like this:-
gary
Just used your code,
works perfectly, think i will use it if that's ok?
Thank you so much for your time and patience it is very much appreciated.
Gary
Ok, the "MediaId" needs to exactly match what you have in the template and Macro definition, e.g
In the partial view:
Yes of course, no problem.
is working on a reply...