How To Render Nested Content Within Nested Content in Umbraco v13

Questions
1

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
enter image description here1465×743 125 KB

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
enter image description here921×288 22.7 KB

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,

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/113838-how-to-render-nested-content-within-nested-content-in-umbraco-v13