Using razor to retrieve first image of multiple media pickers (umbraco v7)
Hi everyone,
I have a doctype Photo Gallery that contains multiple doctypes Photo Albums. These Photo Albums use the property multiple media picker to let the user select the images he wants.
I'm trying to create the template for the Photo Gallery page that basically lists all the available albums and shows the first image of the albums.
However, I can't seem to find the right code to access the first image. Any help on this would by highly appreciated!
This is what I have so far (in a partial view macro file, umbraco v7):
Thanks! You're the best! This works and is exactly what I was looking for.
Can you tell me what I did wrong on my solution? That way I can really learn from my mistakes.
You're welcome! You main issue was that you were mixing the dynamics and typed Models, e.g. you had: @foreach (var childPage in CurrentPage.Children.Where("Visible")) I changed to @foreach (var childPage in Model.Content.Children.Where("Visible"))
On a second look, there is a potential problem with my previous snippet, in that if the first media item in the collection has been deleted, it would be skipped. While not quite as efficient as the above, below is how to deal with that:
Thank you for the code snippets.
I've almost a similar problem.. instead of using "CurrentPage" or "Model.Content", I retrieve the pages from a specific Page:
@* var conceptHeadPage = Umbraco.Content(1055); *@
var conceptHeadPage = Umbraco.TypedContent(1055);
@foreach (var conceptItem in conceptHeadPage.Children.Where("Visible")){
if(conceptItem.HasValue("HeaderImages")){
var imageIds = conceptItem.GetPropertyValue<string>("HeaderImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var firstImage = Umbraco.TypedMedia(imageIds).FirstOrDefault(x => x != null);
if (firstImage != null) {
<div class="item">
<div class="bg-img" style="background-image: url('@firstImage.Url');"></div>
<div class="container">
<div class="intro-wrap">
<h1 class="intro-title">@conceptItem.HeaderTitle</h1>
<div class="intro-text">
<p class="lead">@conceptItem.HeaderText</p>
<a href="@conceptItem.Url" class="btn btn-primary">Read More <i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
}
} }
It does gives me the firstImage (and Url) from child pages (as your examples).
But for @conceptItem.HeaderTitle and @conceptItem.HeaderText
gives me an error (cannot retrieve data) (Error loading Partial View script (file: ~/Views/MacroPartials/...). These are Generic Properties (textstring /textbox multiple) added in the assinged documentTypes.
When I use @conceptItem.Name or @conceptItem.Url (standard properties) -> No problem.
Obviously it's from var conceptHeadPage = Umbraco.TypedContent(1055);
but when i changed it to var conceptHeadPage = Umbraco.Content(1055);
the @conceptItem.HeaderTitle and @conceptItem.HeaderText works fine.. but this doesn't var imageIds = conceptItem.GetPropertyValue<string>("HeaderImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
Using razor to retrieve first image of multiple media pickers (umbraco v7)
Hi everyone,
I have a doctype Photo Gallery that contains multiple doctypes Photo Albums. These Photo Albums use the property multiple media picker to let the user select the images he wants.
I'm trying to create the template for the Photo Gallery page that basically lists all the available albums and shows the first image of the albums.
However, I can't seem to find the right code to access the first image. Any help on this would by highly appreciated!
This is what I have so far (in a partial view macro file, umbraco v7):
@inherits Umbraco.Web.Macros.PartialViewMacroPage
Hi Manu,
How about this:
Jeavon
Jeavon,
Thanks! You're the best! This works and is exactly what I was looking for. Can you tell me what I did wrong on my solution? That way I can really learn from my mistakes.
Kind regards, Manu
Hi Manu,
You're welcome! You main issue was that you were mixing the dynamics and typed Models, e.g. you had:
@foreach (var childPage in CurrentPage.Children.Where("Visible"))
I changed to@foreach (var childPage in Model.Content.Children.Where("Visible"))
On a second look, there is a potential problem with my previous snippet, in that if the first media item in the collection has been deleted, it would be skipped. While not quite as efficient as the above, below is how to deal with that:
Jeavon
Hi Jeavon and Manu,
Thank you for the code snippets. I've almost a similar problem.. instead of using "CurrentPage" or "Model.Content", I retrieve the pages from a specific Page:
It does gives me the firstImage (and Url) from child pages (as your examples). But for @conceptItem.HeaderTitle and @conceptItem.HeaderText gives me an error (cannot retrieve data) (Error loading Partial View script (file: ~/Views/MacroPartials/...). These are Generic Properties (textstring /textbox multiple) added in the assinged documentTypes. When I use @conceptItem.Name or @conceptItem.Url (standard properties) -> No problem.
Obviously it's from
var conceptHeadPage = Umbraco.TypedContent(1055);
but when i changed it tovar conceptHeadPage = Umbraco.Content(1055);
the @conceptItem.HeaderTitle and @conceptItem.HeaderText works fine.. but this doesn'tvar imageIds = conceptItem.GetPropertyValue<string>("HeaderImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
How can I slove this issue?
Idar
Hello,
I tried adding First() to imageIds and worked for me :)
And also adding Last() calls the last media item selected.
Only use First() or Last() if you can be sure your sequence will never be empty else you will generate an exception.
If potentially empty use FirstOrDefault() or LastOrDefault()
Thanks Alan :)
is working on a reply...