Focal Point Implementation

ContentReferenceExt.cs

public static class ContentReferenceExt
{
    public static T ToContentType<T>(this ContentReference contentReference) where T : ContentData
    {
        if (contentReference.IsEmpty())
            return null;

        var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
        return contentLoader.TryGet(contentReference, out T content) ? content : null;
    }
}

FocalImageProfile.cs

    public class FocalImageProfile
    {
        public Expression<Func<ImageFile, Blob>> Desktop { get; set; }
        public Expression<Func<ImageFile, Blob>> Mobile { get; set; }
    }

FocalImageProfiles.cs

    public static class FocalImageProfiles
    {
        public static FocalImageProfile StepItemBlock = new FocalImageProfile
        {
            Desktop = i => i.StepItemBlockDesktop,
            Mobile = i => i.StepItemBlockMobile
        };
    }

FocalImageViewModel.cs

    public class FocalImageViewModel : IFocalImageViewModel
    {
        public bool HasImage { get; }

        public string DesktopUrl { get; }

        public string MobileUrl { get; }

        public string DefaultUrl => DesktopUrl;

        public string Title { get; }

        public FocalImageViewModel(ContentReference image, FocalImageProfile profile)
        {
            HasImage = image.IsNotEmpty();

            if (HasImage)
            {
                DesktopUrl = image.FocalPointImage(profile.Desktop);
                MobileUrl = image.FocalPointImage(profile.Mobile);

                var media = image.ToContentType<ImageFile>();
                Title = media?.AlternateText;
            }
        }
    }

    public interface IFocalImageViewModel
    {
        string DesktopUrl { get; }
        string MobileUrl { get; }
    }

FocalImageViewModelExt.cs

    public static class FocalImageViewModelExt
    {
        public static string GetDataAttribute(this IFocalImageViewModel vm)
        {
            var attribute = new { desktopUrl = vm.DesktopUrl, mobileUrl = vm.MobileUrl };
            return $"data-focalimage={JsonConvert.SerializeObject(attribute)}";
        }
    }

ImageFile.cs

    [ContentType(GUID = "")]
    [MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png")]
    public partial class ImageFile : IFocalPointImage
    {
        public virtual string AltText { get; set; }

        [UIHint("FocalPoint")]
        [Display(GroupName = SystemTabNames.Content, Order = 10)]
        public virtual string FocalPoint { get; set; }
    }

    /// <summary>
    /// Need this because we want to force image editing to be shown 
    /// in "AllPropertiesView" so focal point can be shown be default
    /// </summary>
    [UIDescriptorRegistration]
    public class ImageFileUIDescriptor : UIDescriptor<ImageFile>
    {
        public ImageFileUIDescriptor()
        {
            DefaultView = CmsViewNames.AllPropertiesView;
        }
    }

ImageFile.Focals.cs

public partial class ImageFile
{
         private const int DesktopQuality = 100;
         private const int MobileQuality = 75;
 
         [FocalPointImageDescriptor(Width = 525, Height = 611, ImageQuality = DesktopQuality)]
         [ScaffoldColumn(false)]
         public virtual Blob StepItemBlockDesktop { get; set; }

         [FocalPointImageDescriptor(Width = 923, Height = 1011, ImageQuality = MobileQuality)]
         [ScaffoldColumn(false)]
         public virtual Blob StepItemBlockMobile { get; set; }
}

module.config

<?xml version="1.0" encoding="utf-8"?>

<module>
  <assemblies>
    <!-- This adds the AWI.Woolmark template assembly to the "default module" -->
    <add assembly="AWI.Woolmark.Web" />
  </assemblies>
  <clientResources>
    <add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style" />
  </clientResources>
  <dojo>
    <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
    <paths>
      <add name="awi.woolmark.web" path="Scripts" />
      <add name="levo" path="Scripts" />
    </paths>
  </dojo>
</module>

View.cshtml

@model WpcStepItemBlockViewModel

<!--Step By Step Item Block Block content starts here-->
<div class="stepByStepItemBlock container stepByStepItemBlock--flipped @Model.DisplayCss" data-blk="StepByStepItemBlock">
    <div class="stepByStepItemBlock-text">
        <h4 class="stepByStepItemBlock-step">@Model.Block.StepTitle</h4>

        @if (Model.HasTitle)
        {
            <h2 class="stepByStepItemBlock-title">@Html.PropertyFor(m => m.Block.Title)</h2>
        }
        @if (Model.HasContent)
        {
            <div class="stepByStepItemBlock-content">
                @Html.PropertyFor(m => m.Block.Summary)
            </div>
        }

        @if(Model.HasLink)
        {
            <a href="@Url.ContentUrl(Model.Block.Link.LinkUrl)" class="stepByStepItemBlock-link" target="@Model.Block.Link.LinkTarget">@Model.Block.Link.LinkText</a>
        }
    </div>
    <div class="stepByStepItemBlock-images">
        <div class="stepByStepItemBlock-imageMain">
            <div class="stepByStepItemBlock-imageMainImg" style="background-image:url(@Model.Image.DefaultUrl)" @Model.Image.GetDataAttribute()></div>
        </div>
        <div class="stepByStepItemBlock-imageShadow" style="background-image:url(@Model.Image.DefaultUrl)" @Model.Image.GetDataAttribute()></div>
    </div>
</div>
<!--Step By Step Item Block Block content ends here-->

WpcStepItemBlockViewModel.cs

    public class WpcStepItemBlockViewModel
    {
        public WpcStepItemBlock Block { get; private set; }

        public FocalImageViewModel Image { get; private set; }

        public bool HasTitle => Block.Title.IsNotEmpty();

        public bool HasContent => Block.Summary.IsNotEmpty();

        public bool HasLink => Block.Link.IsNotEmpty();

        public string DisplayCss { get; private set; }

        public string DesktopUrl => throw new NotImplementedException();

        public string MobileUrl => throw new NotImplementedException();

        public WpcStepItemBlockViewModel(WpcStepItemBlock block, bool isActive, ContentReference defaultImage)
        {
            Block = block;
            DisplayCss = isActive ? "" : "d-none";

            if (defaultImage.IsNotEmpty())
                Image = new FocalImageViewModel(defaultImage, FocalImageProfiles.StepItemBlock);
            else if (Block.StepImage.IsNotEmpty())
                Image = new FocalImageViewModel(Block.StepImage, FocalImageProfiles.StepItemBlock);
        }
    }