Sign in Register
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 218 posts 556 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 5908 posts 22603 karma points MVP 4x 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 218 posts 556 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 218 posts 556 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 5908 posts 22603 karma points MVP 4x 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies