Copied to clipboard

Flag this post as spam?

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


  • Julius Goddard 41 posts 152 karma points
    Mar 27, 2024 @ 14:44
    Julius Goddard
    0

    How To Render Nested Content Within Nested Content in Umbraco v13

    Hi All,

    I am attempting to render a Nested Content element within another Nested Content Element onto the page.

    I have been successful so far at rendering content from the first level, but not the second (Please see the snip):

    enter image description here

    I have tried to do a foreach loop within a foreach loop but I see an error message saying the images that I want to render is null (even though h2 and text are not null for some reason) - the error looks like this:

    enter image description here

    The code I have is below:

    @using Umbraco.Cms.Web.Common.PublishedModels;
    @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.StandardContentPage>;
    @using System.Linq;
    
    
    <div class="standard-content">
    @{
        Layout = "layout.cshtml";
        var items = Model.Value<IEnumerable<IPublishedElement>>("BodyElements");
    
    
        if (items != null) {
            foreach (var item in items)
            {
                var h2 = item.Value("h2");
                var text = item.Value("text");
                var images = item.Value<IEnumerable<ImagesWithCaption>>("images");
    
      <section class="grid-x">
    <div class='section__content cell large-6'>
               @{ if (h2 != null)
                {
                    <h2>@h2</h2>
                }
    
                 if (text != null)
                {
                    <p>@text</p>
                }
    
               }
               </div>
               <div class="section__image cell large-6">
           @foreach (var image in images)
                    {
                        <figure>
                            <a href="@(image.Image?.Url())"><img src="@(image.Image?.Url())"></a>
                            @if (image.Caption != null && !string.IsNullOrWhiteSpace(image.Caption))
                            {
                                <figcaption>@image.Caption</figcaption>
                            }
                        </figure>
                    }
    
               </div>
    </section>
            }
        }
    
    }
    </div>
    

    Is there a way to loop through the images, rendering the caption and the image onto the page?

    Thanks,

  • Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib
    Mar 27, 2024 @ 17:42
    Alex Skrypnyk
    0

    Hi Julius

    Looks like this line is not working:

    var images = item.Value<IEnumerable<ImagesWithCaption>>("images");
    

    Maybe something wrong with ModelsBuilder

    But you can render it without ModelsBuilder something like this:

                var images = item.Value<IEnumerable<IPublishedElement>>("images");
    
                <section class="grid-x">
                    <div class='section__content cell large-6'>
                        @{
                            if (h2 != null)
                            {
                                <h2>@h2</h2>
                            }
    
                            if (text != null)
                            {
                                <p>@text</p>
                            }
    
                        }
                    </div>
                    <div class="section__image cell large-6">
                        @foreach (var image in images)
                        {
                            <figure>
                                @if (image.HasValue("image"))
                                {
                                    <a href="@(image.Value<IPublishedContent>("image").Url())"><img src="@(image.Value<IPublishedContent>("image").Url())"></a>
                                }
                                @if (image.HasValue("caption"))
                                {
                                    <figcaption>@image.Value("caption")</figcaption>
                                }
                            </figure>
                        }
    
                    </div>
                </section>
    
  • Julius Goddard 41 posts 152 karma points
    Mar 28, 2024 @ 08:14
    Julius Goddard
    0

    Hi Alex,

    I'm afraid that it doesn't solve the error - the same error message still appears.

Please Sign in or register to post replies

Write your reply to:

Draft