How to display images within Umbraco Partial View

Question

I have a partial view that I am using to display product information. Each product has a main image, and also several images of the product. The structure I am using for this is Product (has property "mainImage"), then a child of the product is an image folder, then within that folder all of the "other" product images [ Product > Images Folder > Images ]. The images have only one property (mainImage) with type Media Picker.

Below is my macro. My problem is pulling the image url for each of the images within the product's image folder.

@foreach(var page in Model.Content.Descendants().Where(x => x.IsVisible() && x.Level >= 6))
{
    <div class="col-md-6 item residential">
        <div class="picframe">
           <a class="image-popup-gallery" href="@Umbraco.Media(CurrentPage.mainImage.ToString()).Url">
              <span class="overlay">
                 <span class="pf_text">
                    <span class="project-name">@page.Name</span>
                 </span>
              </span>
           </a>

             <img src="@Umbraco.Media(CurrentPage.mainImage.ToString()).Url" alt="" />

        </div>
    </div>

}

I can see that my loop is correct as the columns are created for each image in the product's image folder, and the item's name property pulls correctly for each image. However I can not figure out the correct syntax to pull the correct image.

I have tried this:

<img src="@Umbraco.Media(page.mainImage.ToString()).Url" alt="" />

Where I replaced CurrentPage with page, but had no luck. What could I try for this issue?

I ended up getting this working by changing my structure and doctypes. I ended up using a multiple media picker, and I am able to loop through those with no problems. — EricBellDesigns

denford mutseriwa denford mutseriwa · Accepted Answer · 2016-05-08T12:01:06

Not sure about your structure of product > folder > product image , personally i would have just put a media picker on the product and select a image folder from the media and loop through the images.

With that said, try and use : Umbraco.TypedMedia(CurrentPage.mainImage.ToString()) , provided the value in you CurrentPage.mainImage.ToString() is a valid id of an image you will get the .url from that.

The .TypedMedia has got more properties than just .Media, i believe .Media is the database reference.

How to display images within Umbraco Partial View

1 Answers