Sign in Register
Go to solution
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 238 posts 646 karma points
    Jan 22, 2016 @ 14:30
    Darren Wilson
    0

    Display Media Picker image within Loop

    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 6175 posts 24186 karma points MVP 8x admin c-trib
    Jan 23, 2016 @ 22:54
    Alex Skrypnyk
    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 238 posts 646 karma points
    Jan 25, 2016 @ 10:05
    Darren Wilson
    0

    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 238 posts 646 karma points
    Jan 25, 2016 @ 10:14
    Darren Wilson
    100

    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 6175 posts 24186 karma points MVP 8x admin c-trib
    Jan 25, 2016 @ 10:17
    Alex Skrypnyk
    1

    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
Please Sign in or register to post replies

Write your reply to:

Draft