Feature - Image

Display images from the Umbraco media library with responsive scaling and optional captions

What It Does#

Displays a single image from the Umbraco media library

The Image feature lets content editors pick a single image from the Umbraco media library and display it on the page. The image renders as a full-width, responsive element that scales to fit its container while maintaining its aspect ratio using object-fit: cover.

Like all features in UmBootstrap, the Image block supports the standard compositions — editors can add a title, description, and summary around the image. This makes it useful for captioned images, hero banners, or any visual content that needs accompanying text.

Image blocks without a Feature Title are automatically excluded from the in-page navigation picker.

How It Works#

Uses Umbraco's Media Picker with the strongly-typed ModelsBuilder model

The view accesses the image through the strongly-typed Model.Content.Image property, which returns a MediaWithCrops object from Umbraco's Media Picker 3. The MediaUrl() extension method generates the URL for the selected image.

The image is rendered with object-fit: cover and width: 100% so it fills its container regardless of the original image dimensions. A rounded-3 Bootstrap class adds subtle rounded corners.

If no image is selected, the view displays a "Missing image" message as a fallback — useful during development but something you may want to handle differently in production.

Add a title like "Gallery" or "Product Photos" if you want image sections to appear in navigation.

On this page

featureImage.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<FeatureImage>>

@{
    Layout = "_Layout_Features.cshtml";
}

@{
    var typedMediaPickerSingle = Model.Content.Image;
    if (typedMediaPickerSingle != null)
    {
        <img src="@typedMediaPickerSingle.MediaUrl()"
             alt=""
             class="rounded-3"
             style="object-fit:cover; width:100%; height:100%;" />
    } else {
        <p>Missing image</p>
    }
}