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

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)
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:

Navigate to /setup/styl or click "Náhled stylů" button
Verify all 4 preview images load correctly
Check aspect ratio and clarity
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

3.5 KiB Raw Permalink Blame History