Content Delivery API support

This add-on is designed to work out-of-the-box with Optimizely's Content Delivery API.

However, you may want to include additional data such as image URLs in the API payload.

Creating a custom property model to include image URLs in serialized JSON data

The following example includes ready-to-use image URLs in the serialized data of the Content Delivery API for AdaptiveImage properties.

Note: This is a proof-of-concept for AdaptiveImage properties and is merely intended as guidance.

using AdaptiveImages.Core;
using AdaptiveImages.Models;
using AdaptiveImages.Rendering;
using EPiServer.ContentApi.Core.Serialization.Models;
using EPiServer.SpecializedProperties;
using System;

public class AdaptiveImagePropertyModel : PropertyModel<AdaptiveImage, PropertyBlock<AdaptiveImage>>
{
    // URLs to images with correct proportions for each form factor
    public string LargeImageUrl { get; protected set; }
    public string MediumImageUrl { get; protected set; }
    public string SmallImageUrl { get; protected set; }

    // URLs to images with correct proportions for each form factor, resized to the default size, i.e. the size constraint width, if any
    public string? ResizedLargeImageUrl { get; protected set; }
    public string? ResizedMediumImageUrl { get; protected set; }
    public string? ResizedSmallImageUrl { get; protected set; }

    public AdaptiveImagePropertyModel(PropertyBlock<AdaptiveImage> adaptiveImageProperty) : base(adaptiveImageProperty)
    {
        if (adaptiveImageProperty.Block.IsSet())
        {
            // Get image constraints for all form factors
            ImageConstraints imageConstraints = adaptiveImageProperty.GetImageConstraints();

            // Generate image URLs for each form factor
            foreach (FormFactor formFactor in Enum.GetValues<FormFactor>())
            {
                PropertyBlock<SingleImage> formFactorImage = (PropertyBlock<SingleImage>)adaptiveImageProperty.Block.Property[formFactor.ToString()];

                ImageRenderSettings renderSettings;

                if (formFactorImage.Block.IsCropped()) // Image is cropped by web editor
                {
                    renderSettings = new ImageRenderSettings(formFactorImage.Block);
                }
                else // Image has not been cropped by web editor, so we apply default proportions based on proportions constraint, if any
                {
                    IProportions? proportions = imageConstraints.Get(formFactor)?.ProportionsConstraint;

                    renderSettings = proportions != null
                        ? new(formFactorImage.Block, proportions)
                        : new(formFactorImage.Block);
                }

                string imageUrl = renderSettings.GetUrl();

                string? resizedImageUrl = null;

                // If there is a size constraint, we also provide URL to a resized image satisfying the minimum image width
                if (imageConstraints.Get(formFactor)?.SizeConstraint is ISizeConstraint sizeConstraint)
                {
                    renderSettings.ResizeToWidth(sizeConstraint.MinimumWidth);

                    resizedImageUrl = renderSettings.GetUrl();
                }

                switch (formFactor)
                {
                    case FormFactor.Large:
                        LargeImageUrl = imageUrl;
                        ResizedLargeImageUrl = resizedImageUrl;
                        break;
                    case FormFactor.Medium:
                        MediumImageUrl = imageUrl;
                        ResizedMediumImageUrl = resizedImageUrl;
                        break;
                    case FormFactor.Small:
                        SmallImageUrl = imageUrl;
                        ResizedSmallImageUrl = resizedImageUrl;
                        break;
                }
            }
        }
    }
}

Note: You need one custom PropertyModel type for AdaptiveImage properties and one for SingleImage properties.