Photo Gallery Component
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Photo Gallery Component is a core visual feature of the wedding invitation system, designed to showcase a curated collection of images reflecting the couple's history. It serves as a decorative and emotional centerpiece within the InvitationPage.jsx, utilizing a responsive grid layout and an interactive lightbox for full-screen viewing. Sources: src/pages/InvitationPage.jsx:21, src/components/invitation/Gallery.jsx:7
The component is tightly integrated with the project's centralized state management, drawing its data from the ContentContext. This ensures that any modifications made through the administrative ContentEditor are reflected in real-time across the application. Sources: src/context/ContentContext.jsx:58-82, src/components/admin/ContentEditor.jsx:311-344
Architecture and Data Flow
The gallery follows a provider-consumer pattern where image data is managed globally and consumed by both the public-facing display and the admin management tools.
State Management
The ContentContext manages the gallery object within the global state, which primarily consists of an array of image strings (URLs or Base64 data). It provides several methods for manipulating this collection:
addGalleryImage: Appends a new image to the array.removeGalleryImage: Removes an image based on its index.updateGalleryImages: Replaces the entire image collection.
Sources: src/context/ContentContext.jsx:58-82
Component Interaction
The following diagram illustrates the data flow between the content provider, the administrative editor, and the public gallery component.
The interaction ensures that image updates are persisted to localStorage via the context's effect hook. Sources: src/context/ContentContext.jsx:45-47
Display Implementation
The public-facing Gallery.jsx component implements a responsive UI using framer-motion for animations and lucide-react for iconography.
Grid Layout
Images are rendered in a CSS grid that adjusts from 2 columns on mobile devices to 3 columns on larger screens. Each image is wrapped in a motion.div that scales and fades in as it enters the viewport. Sources: src/components/invitation/Gallery.jsx:54-73
Lightbox Functionality
The component includes an internal state to manage a full-screen "Lightbox" view. When a user clicks a thumbnail, the selectedIndex state is updated, triggering an AnimatePresence overlay.
- Navigation: Users can cycle through images using
goToPreviousandgoToNextfunctions. - Body Lock: To prevent background scrolling, the component modifies
document.body.style.overflowwhen the lightbox is active.
Sources: src/components/invitation/Gallery.jsx:11-33, src/components/invitation/Gallery.jsx:77-123
Administrative Management
The ContentEditor.jsx provides the interface for managing the gallery images within the AdminPage.
Image Upload and Removal
The editor utilizes the useFileUpload hook to handle both single and multiple file selections.
- Batch Upload: The
handleGalleryUploadfunction converts selected files into Base64 strings and adds them to the gallery state. - Deletion: A grid preview in the admin panel allows users to remove specific images via a
Trash2button.
Sources: src/components/admin/ContentEditor.jsx:70-80, src/components/admin/ContentEditor.jsx:324-338
Management Features Table
| Feature | Implementation | Description |
|---|---|---|
| Multiple Upload | uploadMultipleFiles | Supports PNG/JPG up to 5MB each. |
| URL Import | input type="url" | Allows adding images via external links. |
| Visual Preview | aspect-square grid | Shows thumbnails of all currently active gallery images. |
| Persistent Storage | localStorage | Saves images locally to ensure data survives refreshes. |
Sources: src/components/admin/ContentEditor.jsx:311-352, src/context/ContentContext.jsx:45-47
Component Specifications
Key Functions
| Function | Location | Description |
|---|---|---|
openLightbox(index) | Gallery.jsx | Sets active image and disables body scroll. |
closeLightbox() | Gallery.jsx | Resets active image and restores body scroll. |
addGalleryImage(img) | ContentContext.jsx | Logic for appending new image data to state. |
removeGalleryImage(i) | ContentContext.jsx | Logic for filtering out an image by index. |
Sources: src/components/invitation/Gallery.jsx:11-20, src/context/ContentContext.jsx:66-82
Styling Constants
The component utilizes Tailwind CSS classes and theme variables defined in tailwind.config.js and index.css.
- Background:
bg-cream(defined as#FFF8E7). - Typography:
font-seriffor titles (Playfair Display). - Transitions:
duration-500for hover scaling effects.
Sources: tailwind.config.js:13, src/index.css:14, src/components/invitation/Gallery.jsx:35
Conclusion
The Photo Gallery Component is a robust, state-driven module that balances aesthetic presentation with functional administration. By leveraging React Context for data persistence and Framer Motion for interactivity, it provides a seamless user experience for both the wedding guests viewing the invitation and the couple managing their content. Sources: src/pages/InvitationPage.jsx, src/pages/AdminPage.jsx