display media picker image within loop

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Darren Wilson 234 posts 622 karma points

Jan 22, 2016 @ 14:30

Hi Folks,

I'm looping through a series of nodes with this code - how do I get an image to display rather than a url?

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{var selection = CurrentPage.FirstChild("QuickLinkRepository")
    .Children("QuickLinkItem").Where("Visible");
 }  
    @foreach (var item in selection)
{ <a href="@Umbraco.Content(item.quicklinkLink).Url"> 
<div class="col-sm-4 footer-quicklink">
<div class="footer-quicklink-icon">
Icon here

            </div>

            <div class="footer-quicklink-text footer-quicklink-right">

                <h1 style="color:#9E005D">@item.quicklinkTitle</h1>
                <p>@item.quicklinkText</p>

            </div>
    </div>
</a>
            }

Been trying to sort this for ages - probably quite easy to fix mind you.

Thanks Darren

Copy Link

Alex Skrypnyk 6147 posts 24056 karma points MVP 8x admin c-trib

Jan 23, 2016 @ 22:54
0
Hi Darren,

What field is storing your images?

You can do like that :
```
var mediaItem = Umbraco.TypedMedia(@item.mediaField);

<img src="mediaItem.Url" />
```
Thanks, Alex
Copy Link

Darren Wilson 234 posts 622 karma points

Jan 25, 2016 @ 10:05

Hi Alex,

Thanks for getting back to me!

This nearly works! It returns the variable as text (see attached) and the image id. I imagine this is because it's already sitting with a variable!

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage   

@{var selection1 = CurrentPage.FirstChild("QuickLinkRepository")

.Children("QuickLinkItem").Where("Visible");

}

@foreach (var item1 in selection1)

{

<a style="color: #333" href="@Umbraco.Content(item1.quicklinkLink).Url"> 

<div class="col-sm-4 footer-quicklink">

<div class="footer-quicklink-icon">

var mediaItem = Umbraco.TypedMedia(@item1.quicklinkIcon);

<img src="mediaItem.Url" />

</div>

<div class="footer-quicklink-text footer-quicklink-right">

<h1 style="color:#9E005D">@item1.quicklinkTitle</h1>

<p>@item1.quicklinkText</p>

</div>

</div>

</a>

}

enter image description here

Thanks for your help

Copy Link

Darren Wilson 234 posts 622 karma points

Jan 25, 2016 @ 10:14

Hi Alex,

It's much easier than I thought! Basically I just took some of your code and what I already had - this within the existing variable will display the image - easy!

<img src="@Umbraco.TypedMedia(item1.quicklinkIcon).Url" />

The final code looks like this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{var selection1 = CurrentPage.FirstChild("QuickLinkRepository")
.Children("QuickLinkItem").Where("Visible");
}
@foreach (var item1 in selection1)
{
<a style="color: #333" href="@Umbraco.Content(item1.quicklinkLink).Url"> 
<div class="col-sm-4 footer-quicklink">
<div class="footer-quicklink-icon">
<img src="@Umbraco.Content(item1.quicklinkIcon).Url" />
</div>
<div class="footer-quicklink-text footer-quicklink-right">
<h1 style="color:#9E005D">@item1.quicklinkTitle</h1>
<p>@item1.quicklinkText</p>
</div>
</div>
</a>
}

Cheers Darren

Copy Link

Alex Skrypnyk 6147 posts 24056 karma points MVP 8x admin c-trib

Jan 25, 2016 @ 10:17

Great that we found solution.

Little performance fix, caching Umbraco.Content call:

@foreach (var item1 in selection1)
{
var contentNode = Umbraco.Content(item1.quicklinkLink);
<a style="color: #333" href="@contentNode.Url"> 
<div class="col-sm-4 footer-quicklink">
<div class="footer-quicklink-icon">
<img src="@contentNode.Url" />
</div>
<div class="footer-quicklink-text footer-quicklink-right">
<h1 style="color:#9E005D">@item1.quicklinkTitle</h1>
<p>@item1.quicklinkText</p>
</div>
</div>
</a>
}

Best, Alex

Copy Link

is working on a reply...

Please Sign in or register to post replies