Full-Stack freelance Umbraco developer in the UK.

George Phillipson - Freelance Umbraco developer

Responsive Images with srcset and image cropper

Responsive Images with srcset and image cropper
<img srcset="@Model.Mobile @Model.CropWidthMobile" src="@Model.XLargeImage" class="img-fluid"/>
<picture>
    <source media="(min-width: 1280px)" srcset="@Model.XLargeImage">
    <source media="(min-width: 992px)" srcset="@Model.Desktop">
    <source media="(min-width: 768px)" srcset="@Model.LandScape">
    <source media="(min-width: 576px)" srcset="@Model.Tablet">
    <source media="(min-width: 360px)" srcset="@Model.Mobile">
    <img srcset="@Model.XLargeImage" src="@Model.XLargeImage" class="img-fluid">
</picture>
Image cropper
using System.Linq;
using System.Web.Mvc;
using Umbraco.Core;
using Umbraco.Web;
using Umbraco.Web.Models;
using Umbraco.Web.Mvc;
using Web.Helper;
using Web.Model.ResponsiveImages;

namespace Web.Core.Controllers
{
    public class ResponsiveImageController : SurfaceController
    {
        public ActionResult Index()
        {
            var currentPage = CurrentPage.DocumentTypeAlias;
            var umbContent = UmbracoAssignedContentHelper.PageContentByAlias(currentPage);

            var xLargeImage         = umbContent.GetCropUrl(propertyAlias: "responsiveImageExample", cropAlias: "X-Large-Desktop");
            var desktop             = umbContent.GetCropUrl(propertyAlias: "responsiveImageExample", cropAlias: "Desktop");
            var landScape           = umbContent.GetCropUrl(propertyAlias: "responsiveImageExample", cropAlias: "LandScape");
            var tablet              = umbContent.GetCropUrl(propertyAlias: "responsiveImageExample", cropAlias: "Tablet");
            var mobile              = umbContent.GetCropUrl(propertyAlias: "responsiveImageExample", cropAlias: "Mobile");

            var crops               = umbContent.GetPropertyValue<ImageCropDataSet>("responsiveImageExample");

            int cropWidthXLarge     = crops.Crops.First(x => x.Alias.InvariantEquals("X-Large-Desktop")).Width;
            int cropWidthDesktop    = crops.Crops.First(x => x.Alias.InvariantEquals("DeskTop")).Width;
            int cropWidthLandScape  = crops.Crops.First(x => x.Alias.InvariantEquals("LandScape")).Width;
            int cropWidthTablet     = crops.Crops.First(x => x.Alias.InvariantEquals("Tablet")).Width;
            int cropWidthMobile     = crops.Crops.First(x => x.Alias.InvariantEquals("Mobile")).Width;

            var model = new ResponsiveImageViewModel
            {
                XLargeImage         = xLargeImage,
                Desktop             = desktop,
                LandScape           = landScape,
                Tablet              = tablet,
                Mobile              = mobile,
                CropWidthXLarge     = $"{cropWidthXLarge}w",
                CropWidthDesktop    = $"{cropWidthDesktop}w",
                CropWidthLandscape  = $"{cropWidthLandScape}w",
                CropWidthTablet     = $"{cropWidthTablet}w",
                CropWidthMobile     = $"{cropWidthMobile}w"
            };

            return PartialView("~/Views/Partials/pvImageCropper.cshtml",model);
        }
    }
}
namespace Web.Model.ResponsiveImages
{
    public class ResponsiveImageViewModel
    {
        public string XLargeImage           { get; set; }
        public string Desktop               { get; set; }
        public string LandScape             { get; set; }
        public string Tablet                { get; set; }
        public string Mobile                { get; set; }
        public string CropWidthXLarge       { get; set; }
        public string CropWidthDesktop      { get; set; }
        public string CropWidthLandscape    { get; set; }
        public string CropWidthTablet       { get; set; }
        public string CropWidthMobile       { get; set; }
    }
}
@inherits UmbracoViewPage<Web.Model.ResponsiveImages.ResponsiveImageViewModel>

<h1>X-Large Image</h1>

<img src="@Model.XLargeImage" />

<h1>Large Image</h1>

<img src="@Model.Desktop" />

<h1>Landscape</h1>

<img src="@Model.LandScape" />

<h1>Tablet</h1>

<img src="@Model.Tablet" />

<h1>Mobile</h1>

<img src="@Model.Mobile" />

<hr />

<h1>Picture, responsive setup and will return correct image for viewport</h1>
<picture>
    <source media="(min-width: 1280px)" srcset="@Model.XLargeImage">
    <source media="(min-width: 992px)" srcset="@Model.Desktop">
    <source media="(min-width: 768px)" srcset="@Model.LandScape">
    <source media="(min-width: 576px)" srcset="@Model.Tablet">
    <source media="(min-width: 360px)" srcset="@Model.Mobile">
    <img srcset="@Model.XLargeImage" src="@Model.XLargeImage" class="img-fluid">
</picture>

<h1>Imgage, responsive setup and will return correct image for viewport</h1>
<img srcset="@Model.Mobile @Model.CropWidthMobile, @Model.Tablet @Model.CropWidthTablet, @Model.LandScape @Model.CropWidthLandscape, @Model.Desktop @Model.CropWidthDesktop, @Model.XLargeImage @Model.CropWidthXLarge" src="@Model.XLargeImage" class="img-fluid"/>

Please enter your comment.