Instantly share code, notes, and snippets.

Embed
What would you like to do?
using ImageProcessor.Web.Episerver;
namespace PictureDemo.Business.Rendering
{
public static class ImageTypes
{
// A full width Hero image is very simple, since its always 100% of the viewport width.
public static ImageType HeroImage = new ImageType
{
DefaultImgWidth = 1280,
SrcSetWidths = new[] { 375, 750, 1440, 1920 },
SrcSetSizes = new[] { "100vw" },
HeightRatio = 0.5625 //16:9
};
//This thumbnail is always 200 px, but the browser may select the 400 px image for screens with device pixel ratio > 1.
public static ImageType Thumbnail = new ImageType
{
DefaultImgWidth = 200,
SrcSetWidths = new[] { 200, 400 },
SrcSetSizes = new[] { "200px" },
HeightRatio = 1 //square
};
// Up to 980 pixels viewport width, the image width will be 100% of the viewport - 40 pixels (margins).
// Up to 1200 pixels viewport width, the image width will be 368 pixels.
// On larger viewport widths, the image width will be 750 pixels.
public static ImageType Teaser = new ImageType
{
DefaultImgWidth = 750,
SrcSetWidths = new[] { 375, 750, 980, 1500 },
SrcSetSizes = new[] { "(max-width: 980px) calc((100vw - 40px))", "(max-width: 1200px) 368px", "750px" }
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment