Feature - Internal Links - Selected

Hand-pick specific pages to display as a responsive card grid using Umbraco's Multi Node Tree Picker

What It Does#

Lets editors hand-pick specific pages to display as a card grid

The Internal Links - Selected feature displays a curated set of pages chosen by the content editor using Umbraco's Multi Node Tree Picker. Unlike the Children variant which auto-discovers pages, this feature gives editors full control over which pages appear and in what order.

The selected pages render as the same responsive Bootstrap card grid used by the Children variant — each card shows the page's thumbnail, title, and description with a stretched link making the entire card clickable.

Editors can pick pages from anywhere in the content tree, not just children of the current page.

How It Works#

A Multi Node Tree Picker property with the same card rendering as Internal Links - Children

The view reads the Links property — a Multi Node Tree Picker configured to allow selecting multiple content nodes. The selected items are cast to WebPage using ModelsBuilder's strongly-typed model, giving access to PageTitle, PageDescription, and PageThumbnail.

This feature shares the same view file (featureInternalLinks.cshtml) with a simple card rendering pattern. The cards use Bootstrap's CSS Grid with responsive column classes: full width on mobile, 2 columns at md, and 3 columns at lg.

Page thumbnails are rendered using GetCropUrl(width: 480) for optimised image sizes. The card uses Bootstrap's shadow and stretched-link utilities for hover effects and full-card clickability.

This feature shares its view with Internal Links - Children, so the card layout is consistent across both.

On this page

featureInternalLinks.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem<FeatureInternalLinks>>

@{
    Layout = "_Layout_Features.cshtml";
    var typedMultiNodeTreePicker = Model.Content.Links?.Cast<WebPage>();
}

@if (typedMultiNodeTreePicker != null)
{
    <div class="grid">
        @foreach (var item in typedMultiNodeTreePicker)
        {
            var pageThumbnail = item.PageThumbnail;
            <div class="g-col-12 g-col-md-6 g-col-lg-4">
                <div class="card h-100 shadow">
                    @if (pageThumbnail is not null)
                    {
                        <img src="@(pageThumbnail.GetCropUrl(width: 480))"
                             class="card-img-top" alt="...">
                    }
                    <div class="card-body text-center">
                        <h3 class="card-title pb-1">
                            <a class="stretched-link"
                               href="@item.Url()">@item.PageTitle</a>
                        </h3>
                        <p class="card-text pb-2">@item.PageDescription</p>
                    </div>
                </div>
            </div>
        }
    </div>
}