I was hoping for a more robust server-side solution. But, finding none, my workaround has been to use jquery .load() to replicate the nested content across multiple pages.

Can you please provide more description? What type of content are you trying to nest? Image? Text? Input fields?

Have you tried designing your content item as a Partial View macro, or a Composition?

The content I'm trying to replicate across multiple pages is a carousel of sponsor logos.

A partial view would be perfect except, I want my end users to be able to add/edit/remove sponsors using property editors (media picker for the logo, and textbox for the sponsor's website urL) like you get with a doctype/nested-content. I don't know how to render a doctype/nested-content in a partial view. Is it possible to load content into a partial view from a doctype/nested-content?

Certainly! I've designed very similar functionality. If I understood you correctly, you want to create a widget that will enable your back-office Content creators/editors to create a carousel of logos anywhere on the website.

If so,

1) Go to the 'Developer' section.

2) Click the three dots next to 'Partial View Macro Files'.

3) Select 'New partial view macro from snippet'.

4) Select 'Gallery'

This will give you a generalized template to create a gallery in the form of a macro that can be used anywhere on your site, as long as you have enabled the use of macros.

Of course, you will have to heavily edit the macro file to suit your needs, but it will give you the essential functionality of allowing users to select images.

5) Provide a name for your newly created macro and click 'Save'.

6) Open the 'Macros' folder in the 'Developer' folder. There you will see another file by the same name you just saved in step 5. Most macros will have two files: one file under the 'Macros' folder and one file under the 'Partial View Macro Files'. Both are required.

In my next post, I will post code and screenshots of a macro I've created that accomplishes functionality that is similar to what you are trying to achieve.

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@*
    Macro to display a gallery of images from media the media section.
    Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).

    How it works:
        - Confirm the macro parameter has been passed in with a value
        - Loop through all the media Id's passed in (might be a single item, might be many)
        - Display any individual images, as well as any folders of images

    Macro Parameters To Create, for this macro to work:
    Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                            Type: (note: you can use a Single Media Picker if that's more appropriate to your needs)
*@

@{ 
    var mediaIds = Model.MacroParameters["mediaIds"]; 
}

@if (mediaIds != null)
{
    <div>

            @foreach (var mediaId in mediaIds.ToString().Split(','))
            {
                var media = Umbraco.Media(mediaId);

                @* a single image *@
                if (media.DocumentTypeAlias == "Image")
                {
                        @Render(media);
                }

                @* a folder with images under it *@
                else if (media.Children("Image").Any())
                {
                    foreach (var image in media.Children("Image"))
                    {
                            @Render(image);
                    }
                }

            }
    </div>
}

@helper Render(dynamic item)
{

    <img class="product-chart img-fluid" src="@item.Url" alt="@item.Name" />

    <br>

}

Locate your macro in the Macros folder of the Developer section. Then, under 'Editor settings', check both of the boxes to display your macro in the grid and rich-text editor.

The 'Alias' input field should be a short name for your property. This alias should exactly match the property name in your Partial View Macro file that you previously created. In the 'Name' field, Give your macro a short description/instruction so that back-office users (content creators/editors) can identify it.

Go to the 'Content' section of your back-office and choose the page where you want to input the macro. Then, select the macro button (icon with gears) if you want to place your macro in a Rich Text Editor, or add a new row if you are using a grid, and then click the "+" icon and select 'macro' from the popup box (next image).

Choose 'macro', and select the macro you want to use.

Pick you image or images that you wish to display, and click 'Submit'.

You should be able to see your image/images in the back-office, and users can drop those in wherever they want on the site. They just have to repeat the process of executing the macro on each page where they want it. Note that the layout will look different in the back-office than it does on your site when viewed in the browser.

Umbraco, will automatically look in the same folders where the rest of your CSS and JS code is so your CSS and JavaScript will automatically tie to the macro as long as you've defined them accurately and structured your HTML correctly in the Partial View Macro File.

If your macro does not work, then the error is likely with your HTML (missing tags, incorrect class or id names, etc.), or your Razor code in the macro has problems.

Here's a good article on nested inheritance in Umbraco if Compositions will solve your problem better than macros:

http://letswritecode.net/articles/document-type-compositions-in-umbraco/

is working on a reply...