Comps.gg Documentation

Appearance

Media Gallery ​

Upload and manage images for your competitions and content.

Media Gallery

Route ​

/admin/media

Overview ​

The Media Gallery provides a centralized location for uploading, organizing, and managing all images used across your Comps.gg platform.

Dashboard Statistics ​

  • Total Images - All uploaded images
  • Current Page - Pagination info
  • Storage Used - Total storage consumed

Features ​

Image Upload ​

Upload Images

Uploading Images ​

  1. Navigate to /admin/media
  2. Click "Upload Images" button
  3. Select one or more image files:
    • Supported formats: JPG, PNG, GIF, WebP
    • Max file size: 10MB per image
    • Recommended: Optimize images before upload
  4. Images upload and appear in gallery
  5. Get shareable URLs immediately

Batch Upload ​

Upload up to 10 images at once for faster media management:

  • Select multiple files at once (up to 10 images)
  • Drag and drop support
  • Parallel upload processing
  • Upload progress indicator for each file
  • Error handling for failed uploads
  • Successful uploads appear immediately in gallery

Limitations:

  • Maximum 10 images per batch
  • Each image must be under 10MB
  • Supported formats: JPG, PNG, GIF, WebP

How Batch Upload Works:

  1. Click "Upload Images" or "Batch Upload"
  2. Select up to 10 image files
  3. Images upload in parallel
  4. Progress shown for each file
  5. Success/error status displayed
  6. Successful images added to gallery immediately

Image Grid View ​

Image Grid

Display Features ​

  • Lazy Loading - Images load as you scroll
  • Pagination - Navigate through large galleries
  • Thumbnails - Optimized preview images
  • Error Handling - Graceful handling of missing images

Per-Image Information ​

  • Image thumbnail
  • File name
  • Dimensions
  • File size
  • Upload date
  • Public URL

Image Actions ​

Image Actions

For each image:

  • Preview - View full-size image in modal
  • Copy URL - Copy public URL to clipboard
  • Edit - Rename or add alt text
  • Delete - Remove image (with confirmation)

Search and Filter ​

  • Search by filename
  • Filter by upload date
  • Filter by dimensions
  • Filter by file size
  • Sort options (newest, oldest, name, size)

Common Use Cases ​

Competition Images ​

  1. Upload high-quality prize photos
  2. Copy image URLs
  3. Use URLs in competition form:
    • Main image
    • Gallery images
    • Thumbnail

Page Content Images ​

  1. Upload images for content pages
  2. Get image URLs
  3. Insert in Markdown:
    markdown
    ![Alt text](image-url)

Marketing Materials ​

  1. Upload promotional images
  2. Use in email campaigns
  3. Use in push notifications
  4. Social media sharing

Image Optimization Tips ​

Before Upload ​

  • Resize - Use appropriate dimensions
    • Competition main images: 1200x800px
    • Thumbnails: 400x300px
    • Hero images: 1920x1080px
  • Compress - Reduce file size without quality loss
  • Format - Use WebP for better compression
  • Naming - Use descriptive filenames
  • TinyPNG - Compress PNG and JPG
  • Squoosh - Google's image optimizer
  • ImageOptim - Mac image optimization
  • ShortPixel - Online compression

SEO Best Practices ​

  • Use descriptive filenames (not IMG_1234.jpg)
  • Add alt text for accessibility
  • Optimize file sizes for faster loading
  • Use modern formats (WebP) when possible

Storage Management ​

Monitoring Usage ​

  • Check storage stats regularly
  • Delete unused images
  • Optimize large files
  • Archive old campaign images

Cleanup ​

  1. Review images by upload date
  2. Identify unused images
  3. Delete duplicates
  4. Remove old campaign materials
  5. Keep only actively used images

Image URLs ​

URL Format ​

Images are served from a CDN:

https://cdn.comps.gg/media/{image-id}.{ext}

Usage Examples ​

Markdown:

markdown
![Competition Prize](https://cdn.comps.gg/media/abc123.jpg)

HTML:

html
<img src="https://cdn.comps.gg/media/abc123.jpg" alt="Prize">

Competition Form:

  • Paste URL directly into image field

Tips ​

  • Optimize images before uploading
  • Use descriptive filenames
  • Delete unused images to save storage
  • Keep organized by creating naming conventions
  • Use compression tools for better performance
  • Add alt text for accessibility and SEO
  • Consider using WebP format
  • Test images on different devices