Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ras 61 posts 324 karma points
    May 23, 2021 @ 19:53
    Ras
    0

    For each item, display its image

    I have some images in the media storage, and I have a "ProductItem" that has a media picker property "productImage". I've read multiple threads and documentation but nothing seems to work. Just want to display the information of each item, including the image.

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.Products>
    @using ContentModels = Umbraco.Web.PublishedModels;
    @{
        Layout = "Master.cshtml";
    
        var products = Umbraco.Content(Guid.Parse("2740e0b9-caf3-435a-89c5-982ed890e6bd"))
            .ChildrenOfType("ProductItem")
            .Where(x => x.IsVisible())
            .OrderByDescending(x => x.CreateDate);
    
    
    }
    
    @foreach (var product in products)
    {
      <section class="page-section">
        <div class="container">
          <div class="product-item">
            <div class="product-item-title d-flex">
              <div class="bg-faded p-5 d-flex ml-auto rounded">
                <h2 class="section-heading mb-0">
                  <span class="section-heading-upper">@product.Value("productSubtitle")</span>
                  <span class="section-heading-lower">@product.Value("productTitle")</span>
                </h2>
              </div>
            </div>
            <img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="" alt="">
            <div class="product-item-description d-flex mr-auto">
              <div class="bg-faded p-5 rounded">
                <p class="mb-0">@product.Value("productContent")</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    }
    

    Naturally, the first thing I tried was "@product.Value("productImage")", but obviously that didn't work, so I read through many different forum threads and documentation. Either I've done something wrong or the things I read are outdated because I can't seem to display my images. Any help much appreciated!

    I'm using the latest version of Umbraco

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    May 23, 2021 @ 20:03
    Dennis Aaen
    0

    Hi Ras,

    First of all welcome to Our :)

    A good place to get an idea how work with the media picker will be this

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

    In the link you will find some good examples on how to get the image via Razor

    Hope this helps.

    /Dennis

  • Ras 61 posts 324 karma points
    May 23, 2021 @ 20:23
    Ras
    0

    Thanks!

    I read that part of the documentation earlier, but the examples either don't seem to work, or simply doesn't have a good example for my specific use. When inside my loop of product items, applying those methods is very confusing and there isn't much further explanation

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    May 23, 2021 @ 20:30
    Dennis Aaen
    0

    Hi Ras

    One thing you could try is

    @product.Value("productImage").Url

    Let me know if this works for you or not

    /Dennis

  • Ras 61 posts 324 karma points
    May 23, 2021 @ 20:37
    Ras
    0

    I figured the solution would be something along those lines but it throws me an error.

    Compiler Error Message: CS1503: Argument 1: cannot convert from 'method group' to 'object'
    

    Calling the Url() method also throws an error

    Compiler Error Message: CS1929: 'object' does not contain a definition for 'Url' and the best extension method overload 'PublishedContentExtensions.Url(IPublishedContent, string, UrlMode)' requires a receiver of type 'IPublishedContent'
    
  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    May 23, 2021 @ 20:46
    Dennis Aaen
    0

    Okay

    Then you should be able to do the following inside the for each loop

    var typedMultiMediaPicker = product.Value<IEnumerable<IPublishedContent>>("productImage");
        foreach (var item in typedMultiMediaPicker)
        {
            <img src="@item.Url" />
        }
    

    Hope this can help you Ras,

    Best,

    -Dennis

  • Ras 61 posts 324 karma points
    May 23, 2021 @ 20:57
    Ras
    0

    For some reason the value in

    product.Value<IEnumerable<IPublishedContent>>("productImage");
    

    Is null, this is the error I get:

    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
    
    Source Error:
    
    
    Line 26:             @{ 
    Line 27:                 var media = product.Value<IEnumerable<IPublishedContent>>("productImage");
    Line 28:                 foreach(var item in media)
    Line 29:                 {
    Line 30:                     <img src="@item.Url()"/>
    

    But productImage is the name and each item has an image assigned to it through the media picker so I'm not sure why it's doing this.

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    May 23, 2021 @ 21:02
    Dennis Aaen
    0

    Okay Ras, then if i was you then I will try to print out the media variable to see if you get a value or not

    So something like @media.Name

  • Ras 61 posts 324 karma points
    May 23, 2021 @ 21:11
    Ras
    0

    Doing this also gives me a NullReferenceException. Seems like it's not finding any published content with this name .. but I definitely did publish it.

  • Ras 61 posts 324 karma points
    May 24, 2021 @ 12:27
    Ras
    100

    Update: Ended up solving it by deleting the productitem template and making a nested element instead, this allowed me to display the image.

Please Sign in or register to post replies

Write your reply to:

Draft