Images

ImageDisplay displays an image, such as one uploaded with the image editor.

using StellarAdmin.Resources.Displays;

columns.Add(destination => destination.Photo, column => column.UseDisplay<ImageDisplay>());

In the grid, ImageDisplay displays a thumbnail, and in a display field, a larger image. When people click the image, StellarAdmin opens a larger version in a popup.

When the value is empty, ImageDisplay displays a placeholder instead of the empty text. When the image fails to load, it displays a broken image.

Turning the value into a URLCopy Anchor Link

If the property's value isn't a URL the browser can load, such as a file name, specify a ResolveUrl() function that turns the property value into one.

columns.Add(destination => destination.Photo, column =>
    column.UseDisplay<ImageDisplay>(image =>
        image.ResolveUrl(value => $"/photos/{value}")));

To build the URL with a service registered with dependency injection, pass a function that also takes the services and a cancellation token: ResolveUrl(async (value, services, cancellationToken) => ...).

The grid calls ResolveUrl() once for each row, so build the URL from the property value instead of loading it from a database.

Setting the image's size and shapeCopy Anchor Link

The example below displays a larger, landscape thumbnail in the grid, which displays a larger version when people hover over it:

using StellarAdmin.UI;

columns.Add(destination => destination.Photo, column =>
    column.UseDisplay<ImageDisplay>(image =>
    {
        image.Size = ImageDisplaySize.Medium;
        image.AspectRatio = ImageAspectRatio.Landscape;
        image.Interaction = ImageDisplayInteraction.Preview;
    }));