mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
Tomáš Dvořák
102 lines
3.5 KiB
Markdown
102 lines
3.5 KiB
Markdown
# Style Preview Images
|
|
|
|
## Overview
|
|
The StylePreviewPage requires preview images for each of the 4 website styles. These images will be displayed as screenshots showing what each style looks like.
|
|
|
|
## Required Images
|
|
|
|
Create the following image files and place them in: `frontend/public/dist/img/`
|
|
|
|
### 1. **style-preview-unified.jpg**
|
|
- **Path:** `/dist/img/style-preview-unified.jpg`
|
|
- **Description:** Screenshot of the Unified style homepage
|
|
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
|
|
- **What to show:**
|
|
- Grid layout for articles
|
|
- Next match panel
|
|
- Three-column content layout
|
|
- Sponsors section
|
|
- Use FC Bizoni UH data for the screenshot
|
|
|
|
### 2. **style-preview-magazine.jpg**
|
|
- **Path:** `/dist/img/style-preview-magazine.jpg`
|
|
- **Description:** Screenshot of the Magazine style homepage
|
|
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
|
|
- **What to show:**
|
|
- Colorful club stripes at the top
|
|
- Magazine-style header
|
|
- Cards with varying sizes
|
|
- Modern navigation
|
|
- Use FC Bizoni UH data for the screenshot
|
|
|
|
### 3. **style-preview-pro.jpg**
|
|
- **Path:** `/dist/img/style-preview-pro.jpg`
|
|
- **Description:** Screenshot of the Pro style homepage
|
|
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
|
|
- **What to show:**
|
|
- Fullscreen hero image/slideshow
|
|
- Premium aesthetic
|
|
- Horizontal scrollers for content
|
|
- Large visual elements
|
|
- Use FC Bizoni UH data for the screenshot
|
|
|
|
### 4. **style-preview-edge.jpg**
|
|
- **Path:** `/dist/img/style-preview-edge.jpg`
|
|
- **Description:** Screenshot of the Edge style homepage
|
|
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
|
|
- **What to show:**
|
|
- Full-width layout
|
|
- Minimalist design
|
|
- Modern tiles/cards
|
|
- Sticky navigation elements
|
|
- Use FC Bizoni UH data for the screenshot
|
|
|
|
## How to Create These Images
|
|
|
|
### Option 1: Manual Screenshots
|
|
1. Set up your local development environment with FC Bizoni UH club data:
|
|
- Club ID: `441d3783-06aa-436a-b438-359300ee0371`
|
|
- Club Name: FC Bizoni UH
|
|
- Social links: YouTube, Instagram, Facebook, Zonerama (see StylePreviewPage.tsx for links)
|
|
|
|
2. For each style:
|
|
- Go to Settings Admin Page
|
|
- Change the frontpage style to the target style (unified/magazine/pro/edge)
|
|
- Save settings
|
|
- Navigate to homepage
|
|
- Take a full-page screenshot (use browser DevTools or tools like Fireshot)
|
|
- Resize/crop to 1920x1080 pixels
|
|
- Save with appropriate filename
|
|
|
|
### Option 2: Design Mockups
|
|
- Create design mockups in Figma/Photoshop showing each style
|
|
- Export as JPG images at 1920x1080 pixels
|
|
- Ensure they accurately represent the actual style's key features
|
|
|
|
## Fallback Behavior
|
|
If images are not available, the StylePreviewPage will show:
|
|
- A gray placeholder box
|
|
- The style name in large text
|
|
- "Náhled bude přidán" message
|
|
|
|
Users can still use the "Živý náhled" button to see the actual styles in action.
|
|
|
|
## File Format
|
|
- Format: JPG or PNG
|
|
- JPG recommended for smaller file sizes
|
|
- Quality: 80-90% for JPG to balance quality and size
|
|
- Max file size: ~500KB per image recommended
|
|
|
|
## Testing
|
|
After adding the images:
|
|
1. Navigate to `/setup/styl` or click "Náhled stylů" button
|
|
2. Verify all 4 preview images load correctly
|
|
3. Check aspect ratio and clarity
|
|
4. Test on mobile to ensure responsive display
|
|
|
|
## Notes
|
|
- Images should use actual FC Bizoni UH branding colors
|
|
- Include realistic content (articles, matches, etc.)
|
|
- Make sure navigation and key elements are visible
|
|
- Images will be displayed in a 16:9 aspect ratio box with object-fit cover
|