Copied to clipboard

Flag this post as spam?

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


  • Daren Smit 7 posts 87 karma points
    Nov 19, 2018 @ 10:23
    Daren Smit
    0

    Media Picker + Multi Node Tree Picker

    Hello Umbraco users!

    I am having a problem which I haven't been able to solve for days.. I am very new to Umbraco, C# and Visual Studio so forgive me if I don't understand all the terms etc.

    My Problem: I have made a portfolio page with inside it a multi node tree picker. The multi node tree picker gets all the portfolio items I have. Inside the portfolio items I have portfolio images (in document types it has the alias "caseImage") Some how I can not get this image to load in the foreach loop.

    Code:

        @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.CaseOverview>
        @using ContentModels = Umbraco.Web.PublishedContentModels;
        @{
            Layout = "Master.cshtml";
        }
        <section class="cta-block">
        <div class="container">
            <h2>@Model.Content.GetPropertyValue("ctaBlock")</h2>
            <a href="@CurrentPage.ctaBlockButton.Url">@CurrentPage.ctaBlockButton.Name Formulier <i class="fa fa-arrow-right"></i></a>
        </div>
    </section>
    <section class="section section section-vertical-padding">
            <div class="container text-center cases-overview-text">
    
    
        <h1>@Model.Content.GetPropertyValue("title")</h1>
                <p>@Model.Content.GetPropertyValue("description")</p>
            </div>
            @Html.GetGridHtml(Model.Content, "cases", "cases")
        </section>
    
        <div class="product-grid">
            @{
                var typedMultiNodeTreePicker = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("featuredCases");
                int i = 0;
                foreach (var item in typedMultiNodeTreePicker)
                {
                    <div class="case" onclick='location.href="@item.Url"'>
    
                        @item.caseImage.Url             
    
                        <h4 style="text-align: center;">@item.Name</h4>
                        <p>@item.GetPropertyValue("descriptionForCaseOverview")</p>
                    </div>
                }
            }
        </div>
    

    It somehow does not recognize the @item.caseImage. What am i doing wrong here? If you need any other info/code just let me know and i'll post it :-).

    Hope someone is able to help me :-).

    // Daren

  • Julien Kulker 75 posts 427 karma points c-trib
    Nov 19, 2018 @ 11:23
    Julien Kulker
    100

    item is in your case a IpublishedContentItem within the IpublishedContentItem are your properties from the document type "CaseImage"

    so we have to do the following:

     var media = Umbraco.TypedMedia(item.GetPropertyValue<int>("image"));
    

    image is the propertyname of the image field in "CaseImage"

    now we have "TypedMedia" and then we can do this

      <img src="@media.Url" alt="@media.Name" />
    

    maybe there is a betterway but this should work

    So your code should look something like this

     var typedMultiNodeTreePicker = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("featuredCases");
            int i = 0;
            foreach (var item in typedMultiNodeTreePicker)
            {
                var media = Umbraco.TypedMedia(item.GetPropertyValue<int>("caseImage"));
                <div class="case" onclick='location.href="@media.Url"'>
    
                    @media.Url             
    
                    <h4 style="text-align: center;">@media.Name</h4>
                    <p>@item.GetPropertyValue("descriptionForCaseOverview")</p>
                </div>
            }
    
  • Daren Smit 7 posts 87 karma points
    Nov 19, 2018 @ 11:33
    Daren Smit
    0

    Thank you for replying Julien !

    Unfortunately I get the following error: enter image description here

    Any idea why? (Sorry I do not understand back-end stuff well since I'm actually a front-end developer that is learning back-end :P)

  • Julien Kulker 75 posts 427 karma points c-trib
    Nov 19, 2018 @ 12:24
    Julien Kulker
    0

    Wait i am wrong there. The problem is because var media is null probally. That means that caseImage is not correct.

    You need to use the staticname of the image in the document type case image.

    see image look in your own umbraco instance for this

  • Daren Smit 7 posts 87 karma points
    Nov 19, 2018 @ 12:29
    Daren Smit
    0

    The alias should be right i think. This is what it looks like on my end:

    enter image description here

    enter image description here

    And if I only print @media and put a breakpoint on that line I do get this info: enter image description here But if I put @media.Url it says it's null.

    If you need more info please let me know. I'd be happy to provide it :)

  • Daren Smit 7 posts 87 karma points
    Nov 19, 2018 @ 13:04
    Daren Smit
    0

    Oh wauw... I'm so stupid. I just saw that one of the cases did not have an image which caused it not to work! I added the image to the second case and now it works.

    Thank you so much for your help. Been cracking my head over this for hours and hours..

  • Julien Kulker 75 posts 427 karma points c-trib
    Nov 19, 2018 @ 13:22
    Julien Kulker
    0

    Great that it works now! If one of my replies helped you with the solution mark it as answer

    Have fun in Umbraco!

  • Daren Smit 7 posts 87 karma points
    Nov 19, 2018 @ 13:23
    Daren Smit
    0

    Done and thank you!

Please Sign in or register to post replies

Write your reply to:

Draft