Product Gallery with Image Transformations

Build a Django template that displays product images with various transformations using Cloudinary's template tags.

@generates

Requirements

Create a Django template file templates/product_gallery.html that displays a gallery of products with transformed images. The template should:

1. Load Cloudinary template tags at the beginning of the template
2. Display product thumbnails - For each product, generate a thumbnail image (200x200 pixels, cropped to fill)
3. Display medium-sized images - For each product, generate a medium image (400x300 pixels, cropped to fill) with automatic quality optimization
4. Generate high-resolution URLs - For each product, generate a URL (not an image tag) for a large version (800x600 pixels, fit crop mode) that can be used in links

The template should receive a context variable products which is a list of product objects. Each product object has:

• name: Product name (string)
• image: CloudinaryField instance with an image resource

Output Format

The template should generate HTML that includes:

• Image tags for thumbnails and medium images
• Links to large image URLs
• Appropriate HTML attributes (alt text, CSS classes)

Test Cases

• Displays a product with a thumbnail using cloudinary_tag with 200x200 dimensions and fill crop @test
• Displays a product with a medium image using cloudinary_tag with 400x300 dimensions, fill crop, and auto quality @test
• Generates a large image URL using cloudinary_url with 800x600 dimensions and fit crop @test
• Properly loads cloudinary template tags at the beginning of the template @test

Dependencies { .dependencies }

cloudinary { .dependency }

Provides Django template tags for generating Cloudinary URLs and image tags with transformation support.

Implementation Notes

Your template should use Django's template syntax and Cloudinary template tags. Focus on using the appropriate template tags for generating image tags versus URLs.