display image from node - Using Umbraco and getting started

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

Matt 358 posts 841 karma points

Nov 21, 2018 @ 23:14
0

Display image from node?
Hello,

I'm using the following code to get a list of my products in sub folders
```
      <div>@Model.Content.Name</div>
      <ul>
@foreach(var product in Model.Content.Children())
  {
            <li>
               <a href="@product.Url">@product.Name</a>
          </li>

  }      </ul>
```
This works fine and displays the Product Name as well as links to the product.

My issue is I now want to display the image of that product, but for some reason it doesnt render anything?
```
              @{
    var typedMediaPickerSingle = Model.Content.GetPropertyValue<IPublishedContent>("productImage");
    if (typedMediaPickerSingle != null)
    {
        <img src="@typedMediaPickerSingle.Url" alt="">
    }
}    
```
Here is a link to my structure;

So the 1st part of my code renders categories such as "Lamps" "Chairs" "Tables"

But now I'm strugging to get the 2nd part of my code to work to try get the e.g Lamp 1 image to appear on categories template.

Any help would be great.

I hope that makes sense.

Thanks
Copy Link

Marc Goodson 2155 posts 14406 karma points MVP 9x c-trib

Nov 21, 2018 @ 23:19

Hi Matt

If you are on your 'Lamps' page, the Model.Content will always refer to the 'Lamps' page content. From what you describe, it's like the images are on the products...

so if in your loop you have:

          <div>@Model.Content.Name</div>
          <ul>
    @foreach(var product in Model.Content.Children())
      {
 var productImage = product.GetPropertyValue<IPublishedContent>("productImage");
        <li>
    if (productImage != null)
    {
        <img src="@productImage.Url" alt="@productImage.Name">
    }        
                   <a href="@product.Url">@product.Name</a>
              </li>

      }      </ul>

that would write out the product image for each product in the loop...

is that what you are after?

regards

Marc

Copy Link

Matt 358 posts 841 karma points

Nov 21, 2018 @ 23:35

0

Hello Marc,

Yeap that is what I was looking for thanks alot!

Although for some reason part of the code appears with the image, but it works?

Thanks,

Matt

Copy Link
Marc Goodson 2155 posts 14406 karma points MVP 9x c-trib

Nov 21, 2018 @ 23:46
0
Hi Matt

sorry, this isn't the best editing environment for code!

if you put an @ symbol in front of the if it will fire the logic instead of writing out the code :-)

@if(productImage !=null)

Also have a look at the GetCropUrl helpers...

https://our.umbraco.com/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper

in case you want to crop or resize the images in your list
```
    @if (productImage != null)
    {
var productImageUrl = Url.GetCropUrl(productImage, height:150, width:150)
        <img src="@productImageUrl" alt="@productImage.Name">
    }  
```
or you can specify a crop in the backoffice, instead of supplying specific dimensions etc
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Display image from node?