Skip to main content
Every event automatically generates a public gallery showcasing all AI-generated photos. Perfect for post-event sharing and downloads. 
https://cabina.creativa.lab/?event=your-event&mode=gallery
Gallery mode is always accessible, even after the event ends. This allows guests to revisit and download their photos anytime.

​
Photo Grid Display

Responsive Grid

Masonry layout adapts to screen size:
  • Mobile: 1 column
  • Tablet: 2 columns
  • Desktop: 3-4 columns

Lazy Loading

Images load as you scroll for optimal performance with hundreds of photos

Lightbox View

Click any photo for full-screen viewing with swipe navigation

Generation Info

Hover to see style name and generation timestamp
Filter by Style: 
const filteredPhotos = photos.filter(photo => 
  selectedStyle === 'all' || photo.style_id === selectedStyle
);
Filter by Date:
  • All time
  • Today only
  • Last 7 days
  • Custom date range

​
Download Options

Click download icon on any photo:
const handleDownload = async (photoUrl) => {
  const response = await fetch(photoUrl);
  const blob = await response.blob();
  const filename = `creativa-photo-${Date.now()}.png`;
  // Trigger download
};
Displayed in gallery header:
​
total_photos
number
Total number of generations in this event
​
unique_styles
number
Count of different AI styles used
​
event_date
date
Event start date or creation date
​
event_name
string
Custom event title (e.g., “Boda de Ana y Juan”)

​
Real-Time Updates

Gallery updates automatically as new photos are generated: 
const channel = supabase
  .channel(`event_gallery_${eventId}`)
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'generations',
    filter: `event_id=eq.${eventId}`
  }, (payload) => {
    setPhotos(prev => [payload.new, ...prev]);
  })
  .subscribe();
New photos appear at the top of the gallery instantly without page refresh.

​
Moderation Tools

​
Partner Access

Event owners can moderate gallery content:

Delete Photo

Remove inappropriate or unwanted generations

Bulk Delete

Select multiple photos for batch deletion

Hide Gallery

Temporarily disable public gallery access

Featured Photos

Pin favorites to top of gallery (future)

​
Deletion Workflow

1

Select Photos

Click checkbox on photo thumbnails
2

Delete Button Appears

Floating action button shows selected count
3

Confirm Deletion

Modal asks for confirmation
4

Permanent Removal

Photos deleted from database and storage
Gallery inherits event branding: 
const BrandedGallery = ({ eventConfig }) => {
  const { logo_url, primary_color, event_name } = eventConfig.config;
  
  return (
    <div>
      {logo_url && <img src={logo_url} className="h-12" />}
      <h1 style={{ color: primary_color }}>{event_name}</h1>
      {/* Gallery grid */}
    </div>
  );
};

​
Social Sharing

​
Share Individual Photos

Mobile-optimized sharing: 
await navigator.share({
  files: [photoFile],
  title: `Foto de ${eventName}`,
  text: `¡Mira mi foto del evento ${eventName}!`
});
Copy-to-clipboard with toast notification: 
await navigator.clipboard.writeText(
  `${window.location.origin}/?event=${eventSlug}&mode=gallery`
);
showToast('✅ Link copiado al portapapeles');

​
Performance Optimizations

Photos served from Supabase Storage CDN:
  • Global edge network
  • Automatic compression
  • WebP conversion (future)

​
Analytics Integration

Gallery tracks engagement:
  • View count per photo
  • Download count
  • Most popular styles
  • Peak usage times
  • Share rate

​
Privacy Settings

Gallery is public by default. Anyone with the link can view all photos. Consider this when creating events with sensitive content.

​
Future Privacy Options

  • Password-protected galleries
  • Guest approval workflow
  • Private photo flags
  • Expiration dates

Build docs developers (and LLMs) love

Get started for freeTalk to us