Implementation Details

Tag Helper Usage

The hero image above is rendered using the <responsive-image> tag helper:

<responsive-image 
    image="@Model.HeroImage" 
    alt="Hero image demonstrating responsive crops"
    class="hero-image"
    loading="eager"
    decoding="async" />

Generated HTML

The tag helper generates a <picture> element with multiple <source> elements for different breakpoints:

• WebP format for modern browsers (smaller file size)
• JPEG fallback for older browsers
• Breakpoint-specific sources for art-directed crops
• Media queries for viewport-specific image selection

Breakpoint Configuration

Page Property Configuration

The StartPage demonstrates both direct attributes and block-based setup:

// Hero image: explicit per-property aspect ratios
[AspectRatio(Breakpoint.Mobile, 4, 3)]
[AspectRatio(Breakpoint.Tablet, 16, 9)]
[AspectRatio(Breakpoint.Desktop, 2, 1)]
public virtual ResponsiveImage HeroImage { get; set; }

// Cards: content area with CardBlock items
[AllowedTypes(typeof(CardBlock))]
public virtual ContentArea CardBlocks { get; set; }

Attribute Explanation

• AspectRatioAttribute: Defines per-breakpoint aspect ratios used for crop generation and editor constraints
• RenderWidthAttribute (optional): Can be added to override srcset widths per breakpoint; otherwise configured defaults are used
• ResponsiveImageTemplateAttribute: Applied on CardBlock.Image to reuse the named card template
• AllowedTypes: Restricts the content area to CardBlock items only

Features Demonstrated

• ✅ Realistic Hero Layout: Full-width hero section with text overlay
• ✅ Focal Point-Based Cropping: Automatic crop generation via add-on services
• ✅ Art Direction: Different aspect ratios per breakpoint (4:3 mobile, 16:9 tablet, 2:1 desktop)
• ✅ Picture Element Rendering: HTML5 picture element with proper source elements
• ✅ Responsive Breakpoint Selection: Browser selects source by media query
• ✅ Single Width per Breakpoint (Demo): Simplified output for MVP validation
• ✅ Modern Formats: WebP with JPEG fallback
• ✅ Lazy Loading: Native browser lazy loading support
• ✅ Async Decoding: Non-blocking image decoding
• ✅ Percentage-based Crops: Resolution-independent crop coordinates
• ✅ Media Queries: Generated from breakpoint configuration
• ✅ Editor Workflow Ready: Supports image select → auto-crop evaluate → per-breakpoint crop adjust → save flow

Testing Instructions

To test the responsive hero behavior:

1. Resize your browser window to see different crops at different viewport sizes
2. Open DevTools (F12) and check the Network tab to see which breakpoint source is loaded
3. Inspect the HTML to see the generated picture element and sources
4. Check responsive mode (F12 → Device toolbar) to test mobile, tablet, and desktop views
5. In CMS, assign or update image/crop data on HeroImage and CardBlocks and save to verify persisted rendering

What to Look For

• Mobile view (< 768px): 4:3 aspect ratio, taller crop for phones
• Tablet view (768-1365px): 16:9 widescreen, includes large iPads
• Desktop view (≥ 1366px): 2:1 modern wide hero for laptops/monitors
• Network requests: Source changes when crossing breakpoint boundaries
• WebP format: Modern browsers load .webp, older browsers load .jpg
• Text overlay: Content remains readable over the hero image at all breakpoints