Photo Management

​

Photo Upload Process

​

Dropzone Interface

1. Drag files onto the dropzone area or click to browse
2. Multiple uploads: Upload up to 10 photos per item
3. Instant preview: See thumbnails as files upload
4. Progress tracking: Monitor upload progress for each file

​

Supported Formats

• JPEG (.jpg, .jpeg)
• PNG (.png)
• WebP (.webp)
• GIF (.gif)
• AVIF (.avif)

​

File Size Limits

• Maximum file size: 15 MB per photo
• Maximum photos per item: 10 photos
• Recommended resolution: Up to 3840×2160 (4K) for best results

​

Automatic AVIF Optimization

​

How It Works

1. Upload: You upload your photo in any supported format
2. Background processing: Celery task processes the image asynchronously
3. Smart conversion:
   • Detects transparency in images (PNG with alpha channel)
   • Preserves transparency by converting to RGBA mode
   • Converts images without transparency to RGB mode
4. Resize if needed: Images larger than 3840×2160 are resized while maintaining aspect ratio
5. Quality optimization: Saves at 90% quality for optimal balance
6. Dual storage: Original and AVIF versions are both stored

class Photo(models.Model):
    image = models.ImageField(upload_to="item_photos/")
    image_avif = models.ImageField(upload_to="item_photos_avif/", blank=True, null=True)
    caption = models.CharField(max_length=255, blank=True)
    order = models.PositiveIntegerField(default=0)
    uploaded_at = models.DateTimeField(auto_now_add=True)
    user = models.ForeignKey("users.User", on_delete=models.CASCADE)
    
    # Automatic thumbnail generation
    thumbnail = ImageSpecField(
        source="image",
        processors=[ResizeToFill(100, 100)],
        format="JPEG",
        options={"quality": 75},
    )

​

AVIF Benefits

• 50% smaller files: AVIF typically produces files 50% smaller than JPEG at the same quality
• Better quality: Superior compression algorithm preserves more detail
• Transparency support: Full alpha channel support like PNG
• Modern codec: Based on AV1 video codec technology
• Fallback support: Original image serves as fallback if AVIF isn’t supported

​

Thumbnail Generation

• Size: 100×100 pixels (square crop)
• Format: JPEG at 75% quality
• Lazy generation: Thumbnails are generated on-demand, not during upload
• Caching: Thumbnails are cached for fast loading

​

Use Cases

• Collection grid views
• Photo carousels
• User profile photo galleries
• Search results preview

​

Photo Organization

​

Photo Ordering

1. Drag to reorder: Use drag-and-drop to change photo order
2. Main photo: The first photo (order 0) is the main photo shown in lists
3. Manual ordering: Photos have an order field that determines display sequence

​

Photo Captions

• Optional: Captions are not required
• 255 character limit: Keep captions concise
• Display: Shown in photo galleries and detail views

​

Reordering Photos

# PhotoService handles reordering
photo_service.reorder_photos(item, photo_orders=[
    (photo_id_1, 0),  # First photo
    (photo_id_2, 1),  # Second photo
    (photo_id_3, 2),  # Third photo
])

​

Photo Validation

​

File Size Check

if photo_file.size > 15 * 1024 * 1024:
    raise ValueError("Photo is too large. Maximum size is 15MB.")

​

Content Type Check

allowed_content_types = [
    "image/jpeg", 
    "image/png", 
    "image/webp", 
    "image/gif", 
    "image/avif"
]
if photo_file.content_type not in allowed_content_types:
    raise ValueError("Invalid format. Allowed: JPEG, PNG, WebP, GIF, AVIF")

​

Count Limit

max_photos_per_item = 10
if len(photo_files) > max_photos_per_item:
    raise ValueError("Too many photos. Maximum 10 photos per item.")

​

Smart Image Delivery

def get_image_url(self):
    if self.image_avif:
        # Check if AVIF file exists
        if self.image_avif.storage.exists(self.image_avif.name):
            return self.image_avif.url
    # Fallback to original
    return self.image.url if self.image else ""

• AVIF first: Serves AVIF version if available
• Automatic fallback: Falls back to original if AVIF processing failed
• Storage check: Verifies file exists before serving

​

Photo Deletion

def delete(self, *args, **kwargs):
    # Store file names before deletion
    image_name = self.image.name
    avif_name = self.image_avif.name
    
    # Delete from database
    super().delete(*args, **kwargs)
    
    # Remove files from storage
    if image_name and storage.exists(image_name):
        storage.delete(image_name)
    if avif_name and storage.exists(avif_name):
        storage.delete(avif_name)

• Database cleanup: Removes photo records
• File cleanup: Deletes both original and AVIF files
• Automatic: Happens when you delete an item or individual photo

​

Orphaned Photo Cleanup

• Scheduled task: Runs periodically via Celery Beat
• Grace period: Photos must be older than a threshold before deletion
• Automatic: No manual intervention needed

​

Best Practices

1. Upload high-resolution photos: FootyCollect will optimize them automatically
2. Use multiple angles: Show front, back, tags, and details
3. Choose the best main photo: First photo appears in lists and feeds
4. Add captions for context: Explain special features or condition details
5. Let AVIF conversion complete: Wait for background processing for best performance
6. Take well-lit photos: Good lighting shows true colors and condition