### Integrate PictureRenderer in ASP.NET Razor Views Source: https://context7.com/erikhen/picturerenderer/llms.txt Provides examples for rendering images within Razor views using Html.Raw. Includes usage of PictureAttributes for custom classes and creating reusable HTML helpers. ```csharp @Html.Raw(Picture.Render("/images/product.jpg", PictureProfiles.Thumbnail, new PictureAttributes { ImgAlt = "Product thumbnail", ImgClass = "product-thumb" })) @helper RenderPicture(string imagePath, PictureProfileBase profile, string altText = "") { var attributes = new PictureAttributes { ImgAlt = altText }; @Html.Raw(Picture.Render(imagePath, profile, attributes)) } ``` -------------------------------- ### StoryblokProfile Configuration and Usage Source: https://context7.com/erikhen/picturerenderer/llms.txt Demonstrates how to configure StoryblokProfile for Storyblok's Image Service and provides an example of rendering an image with custom attributes and focal point. ```APIDOC ## StoryblokProfile Configuration and Usage ### Description This section explains the configuration of `StoryblokProfile` for integrating with Storyblok's Image Service. It includes defining responsive image settings and demonstrates how to use the `Picture.Render` method with Storyblok-specific attributes, including converting Storyblok's focal point format. ### Method N/A (Configuration and Usage Example) ### Endpoint N/A (Library Usage) ### Parameters N/A ### Request Example ```csharp using PictureRenderer.Profiles; public static class StoryblokProfiles { public static readonly StoryblokProfile BlogImage = new() { SrcSetWidths = new[] { 400, 800, 1200 }, Sizes = new[] { "(max-width: 768px) 100vw", "800px" }, AspectRatio = 1.5, Quality = 80 }; } // Convert Storyblok focal point format to numeric tuple // Storyblok format: "640x480:800x600" (left x top : right x bottom) string storyblokFocus = "640x480:800x600"; var focalPoint = StoryblokProfile.ConvertStoryblokFocalPoint(storyblokFocus); // Result: (640.0, 480.0) // Use with Picture.Render var html = Picture.Render( "https://a.storyblok.com/f/12345/image.jpg", StoryblokProfiles.BlogImage, new PictureAttributes { ImgAlt = "Blog post image" }, focalPoint ); ``` ### Response #### Success Response (200) N/A (Usage Example) #### Response Example ```html Blog post image ``` ``` -------------------------------- ### Picture Renderer Enums and Constants Source: https://context7.com/erikhen/picturerenderer/llms.txt Illustrates the various enums and constants provided by the Picture Renderer library for configuring image loading, decoding, fetch priority, and formats. Includes an example of creating a custom ImageSharp profile. ```csharp using PictureRenderer; // Lazy loading options LazyLoading.Browser // Native browser lazy loading (loading="lazy") LazyLoading.None // No lazy loading - load immediately // Image decoding options ImageDecoding.Async // Decode off main thread (default, recommended) ImageDecoding.Sync // Decode synchronously ImageDecoding.Auto // Let browser decide ImageDecoding.None // Don't add decoding attribute // Fetch priority options FetchPriority.None // Don't add fetchPriority attribute (default) FetchPriority.Auto // Let browser decide FetchPriority.High // High priority (above-the-fold images) FetchPriority.Low // Low priority (below-the-fold images) // Image format constants ImageFormat.Webp // "webp" ImageFormat.Jpeg // "jpg" ImageFormat.Png // "png" // Usage in profile var profile = new ImageSharpProfile { SrcSetWidths = new[] { 300, 600 }, Sizes = new[] { "300px" }, CreateWebpForFormat = new[] { ImageFormat.Jpeg, ImageFormat.Png } }; ``` -------------------------------- ### Render Picture Element in MVC/Razor Source: https://github.com/erikhen/picturerenderer/blob/main/README.md This C# code demonstrates how to render a picture element using the Picture.Render method within an MVC or Razor page. It utilizes Html.Raw to prevent HTML escaping of the generated tag. Examples show basic rendering and rendering with additional image attributes like alt text and CSS classes. ```csharp @Html.Raw(Picture.Render("/img/test.jpg", PictureProfiles.SampleImage)) @Html.Raw(Picture.Render("/img/test.jpg", PictureProfiles.SampleImage, new PictureAttributes { ImgAlt = "alt text", ImgClass = "my-css-class"})) ``` -------------------------------- ### Implement Multi-Image Art Direction in C# Source: https://context7.com/erikhen/picturerenderer/llms.txt Demonstrates how to use MediaCondition to display different images based on viewport sizes. This approach enables true art direction by mapping specific image paths to defined breakpoints. ```csharp var artDirectionProfile = new ImageSharpProfile { MultiImageMediaConditions = new[] { new MediaCondition("(min-width: 1200px)", 1200), new MediaCondition("(min-width: 768px)", 800), new MediaCondition("(min-width: 480px)", 480) }, SrcSetWidths = new[] { 480, 800, 1200 }, Sizes = new[] { "100vw" }, AspectRatio = 1 }; string[] images = new[] { "/images/hero-desktop.jpg", "/images/hero-tablet.jpg", "/images/hero-mobile.jpg" }; string html = Picture.Render(images, artDirectionProfile, "Hero image"); ``` -------------------------------- ### Configure Storyblok Image Profiles and Rendering Source: https://context7.com/erikhen/picturerenderer/llms.txt Shows how to define a StoryblokProfile and use the Picture.Render method to generate responsive HTML, including focal point conversion. ```csharp public static readonly StoryblokProfile BlogImage = new() { SrcSetWidths = new[] { 400, 800, 1200 }, Sizes = new[] { "(max-width: 768px) 100vw", "800px" }, AspectRatio = 1.5, Quality = 80 }; string storyblokFocus = "640x480:800x600"; var focalPoint = StoryblokProfile.ConvertStoryblokFocalPoint(storyblokFocus); var html = Picture.Render( "https://a.storyblok.com/f/12345/image.jpg", StoryblokProfiles.BlogImage, new PictureAttributes { ImgAlt = "Blog post image" }, focalPoint ); ``` -------------------------------- ### Define ImageSharp Picture Profiles Source: https://context7.com/erikhen/picturerenderer/llms.txt Demonstrates how to configure ImageSharpProfile instances to define responsive behavior, aspect ratios, and quality settings for different image use cases in .NET. ```csharp public static class PictureProfiles { public static readonly ImageSharpProfile TopHero = new() { SrcSetWidths = new[] { 1024, 1366, 1536, 1920 }, Sizes = new[] { "100vw" }, AspectRatio = 2.0, Quality = 85 }; public static readonly ImageSharpProfile Thumbnail = new() { SrcSetWidths = new[] { 150, 300 }, Sizes = new[] { "150px" }, AspectRatio = 1, Quality = 80, CreateWebpForFormat = new[] { ImageFormat.Jpeg, ImageFormat.Png } }; } ``` -------------------------------- ### Render Responsive Picture Elements Source: https://context7.com/erikhen/picturerenderer/llms.txt Demonstrates the Picture.Render method to generate HTML. It supports basic paths, custom attributes, and focal point coordinates for smart cropping. ```csharp using PictureRenderer; using PictureRenderer.Profiles; string html = Picture.Render("/images/photo.jpg", PictureProfiles.ContentImage); var attributes = new PictureAttributes { ImgAlt = "A beautiful landscape photo", ImgClass = "hero-image" }; string htmlWithAttrs = Picture.Render("/images/photo.jpg", PictureProfiles.TopHero, attributes); var focalPoint = (x: 0.3, y: 0.2); string htmlWithFocal = Picture.Render("/images/portrait.jpg", PictureProfiles.Thumbnail, attributes, focalPoint); ``` -------------------------------- ### ImageSharpProfile Configuration Source: https://context7.com/erikhen/picturerenderer/llms.txt Defines and demonstrates the configuration of ImageSharpProfile for rendering responsive images with ImageSharp.Web, including WebP conversion and aspect ratio control. ```APIDOC ## ImageSharpProfile Configuration ### Description This section details how to configure `ImageSharpProfile` for responsive image rendering using the SixLabors ImageSharp.Web library. It covers defining various profiles like hero banners, thumbnails, and content images, specifying widths, sizes, aspect ratios, quality, and optional WebP conversion. ### Method N/A (Configuration Example) ### Endpoint N/A (Library Configuration) ### Parameters N/A ### Request Example ```csharp using PictureRenderer.Profiles; public static class PictureProfiles { // Hero banner - full viewport width, 2:1 aspect ratio public static readonly ImageSharpProfile TopHero = new() { SrcSetWidths = new[] { 1024, 1366, 1536, 1920 }, Sizes = new[] { "100vw" }, AspectRatio = 2.0, Quality = 85 }; // Thumbnail - fixed 150px display width, square aspect ratio public static readonly ImageSharpProfile Thumbnail = new() { SrcSetWidths = new[] { 150, 300 }, Sizes = new[] { "150px" }, AspectRatio = 1, Quality = 80, CreateWebpForFormat = new[] { ImageFormat.Jpeg, ImageFormat.Png } }; // Responsive content image with multiple breakpoints public static readonly ImageSharpProfile ContentImage = new() { SrcSetWidths = new[] { 320, 640, 750, 1500 }, Sizes = new[] { "(max-width: 640px) 100vw", "(max-width: 1200px) 320px", "750px" }, AspectRatio = 1.777, // 16:9 Quality = 80 }; // Fixed height banner (height stays constant across widths) public static readonly ImageSharpProfile FixedHeightBanner = new() { SrcSetWidths = new[] { 800, 1200, 1600 }, Sizes = new[] { "100vw" }, FixedHeight = 200, Quality = 75 }; } ``` ### Response #### Success Response (200) N/A (Configuration Example) #### Response Example ```html ``` ``` -------------------------------- ### Render Images in Blazor Components Source: https://context7.com/erikhen/picturerenderer/llms.txt Demonstrates how to use the Picture Renderer library within Blazor components (.razor files) to display responsive images. It shows basic usage with predefined profiles and advanced usage with dynamic attributes and parameters. ```csharp @* In Blazor component (.razor) *@ @using PictureRenderer @using PictureRenderer.Profiles @* Use MarkupString to render raw HTML *@ @((MarkupString)Picture.Render("/images/hero.jpg", PictureProfiles.TopHero)) @* With dynamic image path *@ @((MarkupString)Picture.Render(ImageUrl, PictureProfiles.ContentImage, new PictureAttributes { ImgAlt = ImageAltText })) @code { [Parameter] public string ImageUrl { get; set; } [Parameter] public string ImageAltText { get; set; } } @* Reusable Blazor component (ResponsiveImage.razor) *@ @using PictureRenderer @using PictureRenderer.Profiles @((MarkupString)Picture.Render(Src, Profile, new PictureAttributes { ImgAlt = Alt, ImgClass = CssClass, LazyLoading = LazyLoad ? LazyLoading.Browser : LazyLoading.None })) @code { [Parameter] public string Src { get; set; } [Parameter] public string Alt { get; set; } = ""; [Parameter] public string CssClass { get; set; } = ""; [Parameter] public PictureProfileBase Profile { get; set; } [Parameter] public bool LazyLoad { get; set; } = true; } ``` -------------------------------- ### Define Image Profiles with ImageSharpProfile Source: https://github.com/erikhen/picturerenderer/blob/main/README.md This C# code defines several static image profiles using the ImageSharpProfile class. These profiles configure different responsive image behaviors, including viewport width breakpoints, aspect ratios, and srcset widths. They are intended for use with the PictureRenderer library to generate appropriate HTML for responsive images. ```csharp using PictureRenderer.Profiles; public static class PictureProfiles { // Sample image // Up to 640 pixels viewport width, the picture width will be 100% of the viewport.. // Up to 1200 pixels viewport width, the picture width will be 320 pixels. // On larger viewport width, the picture width will be 750 pixels. // Note that picture width is not the same as image width (but it can be, on screens with a "device pixel ratio" of 1). public static readonly ImageSharpProfile SampleImage = new() { SrcSetWidths = new[] { 320, 640, 750, 1500 }, Sizes = new[] { "(max-width: 640px) 100vw", "(max-width: 1200px) 320px", "750px" }, AspectRatio = 1.777 // 16:9 = 16/9 = 1.777 }; // Top hero // Picture width is always 100% of the viewport width. public static readonly ImageSharpProfile TopHero = new() { SrcSetWidths = new[] { 1024, 1366, 1536, 1920 }, Sizes = new[] { "100vw" }, AspectRatio = 2 }; // Thumbnail // Thumbnail is always 150px wide. But the browser may still select the 300px image for a high resolution screen (e.g. mobile or tablet screens). public static readonly ImageSharpProfile Thumbnail = new() { SrcSetWidths = new[] { 150, 300 }, Sizes = new[] { "150px" }, AspectRatio = 1 //square image (equal height and width). }; } ``` -------------------------------- ### Retrieve Picture Data with PictureUtils Source: https://context7.com/erikhen/picturerenderer/llms.txt Shows how to generate PictureData objects without rendering HTML. This is useful for custom rendering logic or when you need direct access to computed srcset and attribute values. ```csharp PictureData data = PictureUtils.GetPictureData( imagePath: "/images/photo.jpg", profile: profile, altText: "Photo description", focalPoint: (0.5, 0.5), cssClass: "my-image" ); string srcSet = data.SrcSet; string imgSrc = data.ImgSrc; ``` -------------------------------- ### Configure PictureAttributes for HTML Elements Source: https://context7.com/erikhen/picturerenderer/llms.txt Configures the img tag output, including accessibility, lazy loading, fetch priority, and custom data attributes for schema or styling. ```csharp using PictureRenderer; var schemaAttributes = new PictureAttributes { ImgAlt = "Company logo", ImgAdditionalAttributes = new Dictionary { { "itemprop", "logo" }, { "data-testid", "company-logo" } } }; string html = Picture.Render("/images/logo.jpg", PictureProfiles.Thumbnail, schemaAttributes); ``` -------------------------------- ### Render Picture Element in Blazor Source: https://github.com/erikhen/picturerenderer/blob/main/README.md This C# code snippet shows how to render a picture element in a Blazor application using the Picture.Render method. The output of Picture.Render is cast to MarkupString to ensure it's correctly interpreted as HTML by Blazor. ```csharp @((MarkupString)Picture.Render("/images/test.jpg", PictureProfiles.SampleImage)) ``` -------------------------------- ### Configure Cloudflare Image Resizing Profile Source: https://context7.com/erikhen/picturerenderer/llms.txt Defines a CloudflareProfile to handle image transformations via CDN. The IsDisabled property allows toggling processing for local development environments. ```csharp using PictureRenderer.Profiles; public static class CloudflareProfiles { public static readonly CloudflareProfile ProductImage = new() { SrcSetWidths = new[] { 200, 400, 600 }, Sizes = new[] { "(max-width: 480px) 100vw", "400px" }, AspectRatio = 1, Quality = 85, IsDisabled = false }; } var html = Picture.Render("https://example.com/products/item.jpg", CloudflareProfiles.ProductImage); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.