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


  • Matt 353 posts 825 karma points
    Nov 21, 2018 @ 23:14
    Matt
    0

    Display image from node?

    Using Umbraco And Getting Started
    Umbraco 7

    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;

    enter image description here

    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 2133 posts 14293 karma points MVP 8x c-trib
    Nov 21, 2018 @ 23:19
    Marc Goodson
    0

    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 353 posts 825 karma points
    Nov 21, 2018 @ 23:35
    Matt
    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?

    enter image description here

    Thanks,

    Matt

    Copy Link
  • Marc Goodson 2133 posts 14293 karma points MVP 8x c-trib
    Nov 21, 2018 @ 23:46
    Marc Goodson
    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
Please Sign in or register to post replies

Write your reply to:

Draft