Image Variants Demo

This page demonstrates the automatic image variant generation. When you upload an image, the system automatically creates multiple resized versions.

Note: Image variants are generated automatically when you upload a new image. If you uploaded images before the variants were configured, they won't have thumbnails. Upload a new image to see the automatic variant generation in action.
No images uploaded yet. Upload some images first to see the variants in action.

How Variants Work

  1. Upload an image through the Images demo
  2. The ImageProcessor automatically creates variants based on the configuration
  3. Each variant is stored as a separate file with a hashed name
  4. Variant metadata (paths, URLs) is stored in the database's variants JSON column
  5. Access variants using $entity->getVariantUrl('variant_name')

Regenerating Variants

You can regenerate variants for existing images using the command:

# Regenerate all configured variants
bin/cake file_storage generate_image_variant --verbose

# Regenerate for specific collection
bin/cake file_storage generate_image_variant FileStorage images --verbose

# Regenerate a specific variant only
bin/cake file_storage generate_image_variant FileStorage images thumbnail --verbose

This is useful when:

  • You've added new variant configurations
  • You've changed existing variant operations (resize dimensions, etc.)
  • You need to regenerate corrupted or missing variants

Configured Variants

Variant Name Operation Size Use Case
thumbnail Cover (zoom-crop) 150x150px List views, avatars
medium Resize 400x400px Card layouts, previews
large Resize 800x800px Detail views, galleries
Note: The thumbnail variant uses zoom-crop to fill the entire 150x150 area (crops to center, no distortion). Medium and large variants maintain the original aspect ratio and fit within their dimensions. All variants are automatically optimized for faster loading.

Send your feedback or bugreport!