Metadata Cropping Test

Testing CloudinaryImageCroppable component with different configurations

Standard View (No Cropping)

Full image with metadata visible - Default behavior

Manzanar Monument by Dr. Masumi Hayashi

Manzanar Monument,
1995, Panoramic photo-collage, 30 x 72 inches
Artist: Dr. Masumi Hayashi

Gallery Thumbnail (Cropped + 16:9)

Metadata cropped, aspect-video container - Perfect for news/gallery cards

Manzanar Monument by Dr. Masumi Hayashi

Square Thumbnail (Cropped + 1:1)

Metadata cropped, aspect-square container - Instagram-style presentation

Manzanar Monument by Dr. Masumi Hayashi

Side-by-Side Comparison

Same image - Left: Full metadata | Right: Metadata cropped

With Metadata

Manzanar Monument by Dr. Masumi Hayashi

Manzanar Monument,
1995, Panoramic photo-collage, 30 x 72 inches
Artist: Dr. Masumi Hayashi

Metadata Cropped

Manzanar Monument by Dr. Masumi Hayashi

Usage Instructions

Component Props

cropMetadata: boolean - Enable/disable metadata cropping
aspectRatio: 'video' | 'square' | 'none' - Container aspect ratio
All other props same as CloudinaryImage

Use Cases

News cards: cropMetadata=true aspectRatio="video"
Gallery grid: cropMetadata=true aspectRatio="square"
Full artwork page: cropMetadata=

How It Works

Full image with metadata loaded from Cloudinary
CSS crops the displayed view to hide metadata
Right-click → Save Image downloads full file with metadata
Responsive - works at all breakpoints (sm/md/lg)

Testing

Resize your browser to test responsiveness:

Mobile (<640px): Crops ~80px bottom margin
Tablet (640-1023px): Crops ~140px bottom margin
Desktop (1024px+): Crops ~140px bottom margin

Test Checklist

✓ Resize browser window to test all breakpoints
✓ Right-click images and "Save Image As" to verify full metadata is preserved
✓ Check that cropped views cleanly hide metadata text
✓ Verify transitions are smooth when resizing