Overview
The gallery displays the most recent approved mate submissions, providing a quick way to see the latest additions to the project. Each gallery card shows a preview of the mate photo and basic information.The gallery automatically updates every 30 seconds as new mates are approved and added to the map.
Stats Counter
At the top of the gallery section, animated counters display project statistics:Total Mates
Shows the total number of approved mate submissions currently on the map.
Countries
Displays how many countries have at least one mate submission.
Counter Animation
The stats animate when they update:The animation uses
requestAnimationFrame for smooth, performant counting that syncs with your screen’s refresh rate.Gallery Display
The gallery shows the 3 most recent mate submissions in a horizontal layout.Gallery Cards
Card Contents
Each gallery card includes:
- Photo: The mate photo submitted by the user
- Name: The submitter’s name (or “Anónimo” if anonymous)
- Country: The country where the mate was submitted
Staggered Animation
Cards appear with a subtle staggered animation:Animation Timing
Animation Timing
- Card 1: No delay (0s)
- Card 2: 80ms delay
- Card 3: 160ms delay
Empty State
If no mates have been approved yet, the gallery displays:Error State
If there’s an error loading mates from the database:Error Message
⚠️ Error cargando mates.(“Error loading mates” - varies by language)
Interactive Gallery
All gallery cards are fully clickable to view more details.Click to Expand
Click any gallery card to open the lightbox view with complete mate details, larger photo, and additional information.
Lightbox View
The lightbox provides a full-screen overlay for viewing mate details.Opening the Lightbox
The lightbox can be opened from multiple locations:Gallery Cards
Click any of the 3 recent mates shown in the gallery
Globe Markers
Click the 🧉 marker for any mate on the 3D globe
Lightbox Contents
Large Photo
Large Photo
The mate photo displays at full size in the lightbox for detailed viewing. If the photo fails to load, a placeholder image appears instead.
Mate Information
Mate Information
Complete details about the mate submission:
- Name: Submitter’s name with fancy styling
- Country: Displayed with 🌍 globe emoji
- Yerba Brand: Shown with 🌿 herb emoji
- Mate ID: Unique identifier for reference
Copy ID Button
Copy ID Button
Deletion Note
Deletion Note
Instructions for requesting mate removal:“Para solicitar la eliminación de tu mate, compartí este # con nosotros.”(Varies by language)
Mate ID System
Each mate has a unique identifier displayed in the lightbox.ID Display Format
Mate ID
Format:
#: [unique-id]The ID is prominently displayed with a copy button for easy reference.Copy to Clipboard
The copy functionality makes it easy to share or reference mate IDs:Copy Functionality:Uses modern
navigator.clipboard.writeText() API. If clipboard access fails, the button displays the ID directly as fallback.Using Mate IDs
Request Deletion
Share the mate ID when requesting removal of your submission from the project.
Reference Specific Mates
Use IDs to refer to specific mate submissions when communicating with project maintainers.
Closing the Lightbox
Multiple methods to close the lightbox and return to the main view:Close Button
Click the X button in the corner of the lightbox
Background Click
Click anywhere on the darkened background outside the lightbox content
The lightbox uses
display: flex when open and display: none when closed for optimal performance.Image Handling
Photo URL Generation
Photos are retrieved from Supabase storage:Photo Storage Path
Photo Storage Path
All mate photos are stored in the
mate-photos bucket with unique filenames:Format: {timestamp}_{random-string}.{extension}Example: 1709856234567_a3k9x2p.jpgFallback Behavior
Image Error Handling
If a photo fails to load (network error, missing file, etc.):
- Gallery cards: Image
srcswitches toplaceholder.png - Lightbox: Displays placeholder image
- No broken image icons are shown to users
Responsive Design
The gallery adapts to different screen sizes:Desktop
Three cards displayed side-by-side in a horizontal layout
Mobile
Cards stack vertically for comfortable mobile viewing
Auto-Refresh System
The gallery stays current with the latest submissions:The 30-second interval ensures you see new approved mates shortly after they’re added, while minimizing database queries for performance.
Gallery Data Flow
How Gallery Data is Fetched
How Gallery Data is Fetched
- Database Query: Fetches all mates where
approvedis notfalse - Sorting: Orders by
created_attimestamp, descending (newest first) - Slicing: Takes the first 3 results for gallery display
- Rendering: Generates HTML for each mate card with staggered animation
- Event Listeners: Attaches click handlers to open lightbox
Privacy & Moderation
Deletion Requests
If you want to remove your mate submission:The deletion note is displayed in every lightbox view, ensuring users always know how to request removal of their content.
Tips for Using the Gallery
Check Frequently
Check Frequently
Visit the gallery regularly to see new mates from around the world as they’re approved.
Share Discoveries
Share Discoveries
Compare Styles
Compare Styles
Browse different yerba brands and preparation styles shown in recent mates.
Track Your Submission
Track Your Submission
After submitting, check the gallery periodically to see when your mate appears.
Technical Details
Performance Optimization
Efficient Rendering:
- Only 3 mates loaded in gallery (minimizes DOM size)
- Photos lazy-load with fallback handling
- Event listeners attached after render
- Smooth animations using CSS transforms
- Gallery re-renders only when mate data changes
- Stats counter animates only on value changes
- 30-second refresh balances freshness with performance
Related Pages
Exploring the Globe
Learn how to interact with mate markers on the 3D globe
Submitting Your Mate
Guide to submitting your own mate to appear in the gallery