Rename gallery photos to 0001-0010 format
|
Before Width: | Height: | Size: 670 KiB After Width: | Height: | Size: 670 KiB |
|
Before Width: | Height: | Size: 923 KiB After Width: | Height: | Size: 923 KiB |
|
Before Width: | Height: | Size: 619 KiB After Width: | Height: | Size: 619 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 989 KiB After Width: | Height: | Size: 989 KiB |
|
Before Width: | Height: | Size: 879 KiB After Width: | Height: | Size: 879 KiB |
|
Before Width: | Height: | Size: 762 KiB After Width: | Height: | Size: 762 KiB |
|
Before Width: | Height: | Size: 696 KiB After Width: | Height: | Size: 696 KiB |
|
|
@ -11,52 +11,52 @@ interface GalleryItem {
|
|||
const galleryData: GalleryItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: '/photos/FullSizeRender 2.jpg',
|
||||
imageUrl: '/photos/0001.jpg',
|
||||
alt: 'MCDi community gathering',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: '/photos/IMG_1615.jpg',
|
||||
imageUrl: '/photos/0002.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: '/photos/IMG_2166.jpg',
|
||||
imageUrl: '/photos/0003.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imageUrl: '/photos/IMG_6067.jpg',
|
||||
imageUrl: '/photos/0004.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
imageUrl: '/photos/IMG_6069.jpg',
|
||||
imageUrl: '/photos/0005.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
imageUrl: '/photos/IMG_6079.jpg',
|
||||
imageUrl: '/photos/0006.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
imageUrl: '/photos/IMG_6080.jpg',
|
||||
imageUrl: '/photos/0007.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
imageUrl: '/photos/IMG_6084.jpg',
|
||||
imageUrl: '/photos/0008.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
imageUrl: '/photos/IMG_7655.jpg',
|
||||
imageUrl: '/photos/0009.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
imageUrl: '/photos/IMG_7657.jpg',
|
||||
imageUrl: '/photos/0010.jpg',
|
||||
alt: 'MCDi community event photo',
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,17 +1,26 @@
|
|||
# Active Context
|
||||
|
||||
## Current Task
|
||||
Completed: Created new Gallery page with photo grid and modal viewer
|
||||
Completed: Updated Gallery with optimized community photos (no captions)
|
||||
|
||||
## Recent Changes
|
||||
1. Created new Gallery component (Gallery.tsx):
|
||||
1. Gallery photo optimization and update:
|
||||
- Converted 8 HEIC files from Junk directory to JPG using macOS sips tool
|
||||
- Optimized all 11 photos for web (resized to max 1920px, 80% quality)
|
||||
- Moved optimized photos to client/public/photos/
|
||||
- Updated Gallery.tsx to use new community event photos
|
||||
- Removed all captions per owner request (photos display without text)
|
||||
- Gallery now shows 10 community event photos in responsive grid
|
||||
- Modal viewer displays full-size images without captions
|
||||
- Photos: FullSizeRender 2.jpg, IMG_1615.jpg, IMG_2166.jpg, IMG_6067.jpg, IMG_6069.jpg, IMG_6079.jpg, IMG_6080.jpg, IMG_6084.jpg, IMG_7655.jpg, IMG_7657.jpg
|
||||
- Committed to Git: ae8b262
|
||||
|
||||
2. Previous: Created new Gallery component (Gallery.tsx):
|
||||
- Responsive photo grid layout (1-4 columns based on screen size)
|
||||
- Clickable images that enlarge in a modal viewer
|
||||
- Yellow text captions on red background with black border
|
||||
- Smooth animations using Framer Motion
|
||||
- Currently using board member headshots as placeholder images
|
||||
- Modal features: click outside to close, X button, spring animation
|
||||
- Maintains website's color scheme (#6B1631 red, yellow-400 text)
|
||||
- Maintains website's color scheme (#6B1631 red)
|
||||
- Added to navigation: "About MCDi" dropdown and mobile menu
|
||||
- Route added: /gallery
|
||||
|
||||
|
|
@ -46,13 +55,10 @@ Completed: Created new Gallery page with photo grid and modal viewer
|
|||
- All previous changes successfully deployed to production
|
||||
|
||||
## Next Steps
|
||||
1. Wait for website owner to provide actual gallery photos
|
||||
2. Replace placeholder headshots with real gallery photos
|
||||
3. Update captions with appropriate descriptions
|
||||
4. Commit all changes (Gallery.tsx, App.tsx, Header.tsx) to Git
|
||||
5. Deploy changes through Portainer (pull and redeploy)
|
||||
6. Test gallery functionality on production (desktop and mobile)
|
||||
7. Consider adding video support to gallery in future
|
||||
1. Deploy changes through Portainer (pull and redeploy)
|
||||
2. Test gallery functionality on production (desktop and mobile)
|
||||
3. Verify all 10 photos load correctly
|
||||
4. Consider adding video support to gallery in future if requested
|
||||
|
||||
## Solution Summary
|
||||
- Problem: Portainer repository deployments require stack.env file in Git repo
|
||||
|
|
|
|||