Instantly share code, notes, and snippets.

Embed
What would you like to do?
namespace MyEpiSite.Business.Rendering
{
public class ImageType
{
public int? DefaultImgWidth { get; set; } //this size will be used in browsers that don't support the picture element
public int[] SrcSetWidths { get; set; } // the different image widths you want the browser to select from
public string[] SrcSetSizes { get; set; }
}
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" }
};
// A Teser image for the Episerver Alloy site.
// Up to 980 pixels viewport width, the image "viewable width" will be 100% of the viewport - 40 pixels (margins).
// Up to 1200 pixels viewport width, the image "viewable width" will be 298 pixels.
// On larger viewport width, the image "viewable width" will be 368 pixels.
// Note that the "viewable width" is not the same as the image file width (but it can be, on a screen with a "device pixel ratio" of 1).
public static ImageType Teaser = new ImageType
{
DefaultImgWidth = 750,
SrcSetWidths = new[] {298, 375, 500, 750, 980, 1024, 1400, 1500 }, //adding a bunch of sizes for demo purpose. In a real world scenario I wouldn't have this many.
SrcSetSizes = new[] { "(max-width: 980px) calc((100vw - 40px)), (max-width: 1200px) 298px, 368px" }
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment