BEARS
Img Component Test

Img Component Test

Img Component - Different Width Values

This section tests the Img component’s responsive image generation. Each image below uses the same source but different width props. Click any image to enlarge it in a modal.

Small Width (400px)

Test at 400px width

Medium Width (800px)

Test at 800px width

Percentage Width (50%)

Test at 50% width

Default (No width specified)

Test with default full width

Marquee Test

This marquee demonstrates Img in a continuous scrolling carousel. The first image has click-to-enlarge enabled, while others disable it for smooth scrolling interaction.

Marquee image 1
Marquee image 2 Marquee image 3 Marquee image 4 Marquee image 5 Marquee image 6

This carousel showcases Img in a slideshow format with native aspect ratio preservation. Each slide has click-to-enlarge enabled.

Carousel slide 1
Carousel slide 2
Carousel slide 3
Carousel slide 4
Carousel slide 5
Carousel slide 6

How to Verify Features

Srcset Verification

  1. Open browser DevTools (F12)
  2. Go to Network tab
  3. Reload the page
  4. Filter for image requests
  5. Click any image to see which srcset variant was downloaded based on viewport size
  6. Astro auto-generates appropriate widths based on the sizes attribute

Responsive Image Test

  1. Resize your browser window
  2. Each image should adapt to its specified width (400px, 800px, 50%, etc.)
  3. Network requests should change as viewport changes
  4. Images should load appropriate sizes for the viewport

Click-to-Enlarge Verification

  1. Click any image in the “Different Width Values” or “Carousel” sections
  2. A modal opens with the full-resolution WebP image
  3. Close via close button OR clicking the backdrop
  4. Press Escape key to close modal
  5. The modal is rendered by the ImageModal.astro component

Marquee Verification

  1. The marquee should auto-scroll smoothly
  2. Hover to pause the animation
  3. Click-to-enlarge is disabled in most carousel items for smooth scrolling
  4. First image has click-to-enlarge enabled

Technical Details

Img Component:

  • Required props: src and alt (TypeScript enforced)
  • Width prop: Accepts CSS width values (“50%”, “800px”, etc.)
  • Auto-derived sizes: Sizes attribute is calculated from width prop
  • Responsive images: Astro Image component handles srcset generation automatically
  • Modal: Full-resolution image via ImageModal component, close via button, backdrop click, or Escape key

ImageModal Component:

  • Extracted modal component for click-to-enlarge functionality
  • Uses Alpine.js for modal state management
  • Displays full WebP image in responsive modal

Auto-derivation Examples:

  • width="50%" → sizes="50vw"
  • width="800px" → sizes="800px"
  • Users can override sizes for advanced responsive scenarios