Skip to content

Commit 2f86538

Browse files
feat: add 'photobook' theme with multi-view modes and full-screen viewer
Introduces a new theme "photobook" optimized for high-fidelity media presentation and print-ready PDF export. * **Three Integrated View Modes:** * **Outline:** A thumbnail grid for rapid navigation. * **Slides:** A paginated, one-per-page presentation. * **Photo Book:** A continuous, full-width scrolling view optimized for printing. * **Full-Screen Media Viewer:** * Triggered by clicking media in Slides mode with a "Click to view full size" hint. * Includes a dark overlay (95% opacity) and smooth fade-in effects. * Full keyboard support (Arrows, Space, ESC, Home, End). * **Enhanced Metadata Display (Rich Captions):** * Displays Title, Markdown-sourced descriptions, and Filename. * Comprehensive EXIF data: Camera make/model, ISO, exposure, aperture, focal length, GPS coordinates and timestamp. * Configurable GPS links: Supports both OpenStreetMap and Google Maps. * **Responsive Design:** Implements a two-column desktop layout that stacks for tablet and mobile devices. * **Typography & Styling:** Standardized on Helvetica Neue with a clean white (#ffffff) background and UTF-8 charset declaration. * **Print Optimization:** Added specific page-break logic for the Photo Book view to facilitate PDF/Physical book creation. * **User Interface:** Added navigation buttons, image counters (e.g., "3 / 25"), and independent scrolling for long description texts. To enable the new functionality, users should update their configuration to use the `photobook` theme. The system automatically handles EXIF extraction from JPG, JPEG, and HEIC files.
1 parent 21ddc7c commit 2f86538

18 files changed

+15944
-0
lines changed
Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
# Photobook Theme for Sigal
2+
3+
A beautiful, print-friendly photo gallery theme presenting your images in a modern photo book layout.
4+
5+
## Features
6+
7+
- **Photo Book View**: Browse photos in a paginated, magazine-style layout
8+
- **Outline View**: See all photos as thumbnails in a grid for quick navigation
9+
- **Rich Captions**: Display title, description, filename, and EXIF metadata
10+
- **GPS Support**: Clickable GPS coordinates link to OpenStreetMap
11+
- **Keyboard Navigation**:
12+
- Arrow Right / Space: Next page
13+
- Arrow Left: Previous page
14+
- Home: First page
15+
- End: Last page
16+
- **Responsive Design**: Works beautifully on desktop, tablet, and mobile
17+
- **Print-Friendly**: Optimized for printing physical photo books
18+
- **UTF-8 Encoding**: Full Unicode support for all text
19+
- **Helvetica Typography**: Clean, professional Helvetica Neue font
20+
21+
## Installation
22+
23+
1. The photobook theme is installed as part of Sigal
24+
2. Reference it in your `sigal.conf.py`:
25+
26+
```python
27+
theme = 'photobook'
28+
```
29+
30+
## Configuration
31+
32+
Add these settings to your `sigal.conf.py` to customize the photobook theme:
33+
34+
```python
35+
# Theme name
36+
theme = 'photobook'
37+
38+
# Photos per page (default: 1)
39+
# Note: Currently displays 1 photo per page
40+
photobook_photos_per_page = 1
41+
42+
# Enable keyboard navigation (default: True)
43+
photobook_keyboard_nav = True
44+
45+
# Enable outline click navigation (default: True)
46+
photobook_outline_nav = True
47+
48+
# Show album description (default: True)
49+
photobook_show_description = True
50+
51+
# Show EXIF data (default: True)
52+
photobook_show_exif = True
53+
54+
# Show GPS coordinates (default: True)
55+
photobook_show_gps = True
56+
57+
# Map provider for GPS coordinates (default: 'openstreetmap')
58+
# Options: 'openstreetmap' or 'googlemaps'
59+
photobook_map_provider = 'openstreetmap'
60+
```
61+
62+
## Configuration Details
63+
64+
### Map Provider
65+
66+
The theme supports two map providers for GPS coordinates:
67+
68+
- **OpenStreetMap** (default): Free, open-source mapping service
69+
- Set: `photobook_map_provider = 'openstreetmap'`
70+
- Links open to: `https://www.openstreetmap.org/`
71+
72+
- **Google Maps**: Google's mapping service (requires internet access)
73+
- Set: `photobook_map_provider = 'googlemaps'`
74+
- Links open to: `https://www.google.com/maps/`
75+
76+
You can also change it at runtime using JavaScript:
77+
78+
```javascript
79+
// Switch to Google Maps
80+
Photobook.setMapProvider('googlemaps');
81+
82+
// Switch back to OpenStreetMap
83+
Photobook.setMapProvider('openstreetmap');
84+
85+
// Get current map provider
86+
var current = Photobook.getMapProvider();
87+
```
88+
89+
## Usage
90+
91+
### Document Structure
92+
93+
The photobook theme expects media metadata to be provided by Sigal:
94+
95+
- **Title**: Image filename or custom title
96+
- **Description**: From markdown files or YAML frontmatter
97+
- **EXIF Data**: Automatically extracted from image files (JPG, JPEG, HEIC)
98+
- Camera make and model
99+
- ISO, exposure time, aperture, focal length
100+
- Date/time taken
101+
- GPS location (if available)
102+
- **Filename**: Full filename with extension
103+
104+
### Adding Descriptions
105+
106+
Create a markdown file with the same name as your image for descriptions:
107+
108+
```
109+
photo.jpg
110+
photo.md
111+
```
112+
113+
Content of `photo.md`:
114+
```markdown
115+
# Photo Title (optional)
116+
117+
This is a detailed description of the photo that appears below the image.
118+
Can include multiple paragraphs and formatting.
119+
```
120+
121+
### Organizing Photos
122+
123+
Place photos in albums (directories):
124+
125+
```
126+
gallery/
127+
├── album1/
128+
│ ├── photo1.jpg
129+
│ ├── photo1.md
130+
│ ├── photo2.jpg
131+
│ └── photo2.md
132+
└── album2/
133+
├── trip1.jpg
134+
└── trip1.md
135+
```
136+
137+
## Features Explained
138+
139+
### Two View Modes
140+
141+
1. **Outline View**: Grid of all thumbnails with titles. Click any thumbnail to jump to that photo in book view.
142+
2. **Photo Book View**: Full-screen image with detailed caption including:
143+
- Photo title
144+
- Description (from markdown)
145+
- Filename
146+
- Camera information
147+
- Settings (ISO, exposure, aperture, focal length)
148+
- GPS location (clickable link to OpenStreetMap)
149+
150+
### Responsive Behavior
151+
152+
- **Desktop**: Two-column layout with image on left, caption on right
153+
- **Tablet**: Single column, image above caption
154+
- **Mobile**: Optimized single column layout with readable font sizes
155+
156+
### Print Support
157+
158+
The theme includes print stylesheets for generating PDF photo books:
159+
160+
```bash
161+
# In your browser, use Print to PDF:
162+
# - File > Print (Ctrl+P / Cmd+P)
163+
# - Select "Save as PDF"
164+
# - Recommended paper size: A4 or Letter
165+
# - Margins: 0.5 inch
166+
```
167+
168+
## Styling and Customization
169+
170+
### Colors
171+
172+
The theme uses a clean white background with these main colors:
173+
174+
- Background: `#ffffff` (white)
175+
- Text: `#333333` (dark gray)
176+
- Borders: `#dddddd` (light gray)
177+
- Links: `#0066cc` (blue)
178+
- Accents: `#f5f5f5` (light gray)
179+
180+
### Font Sizes
181+
182+
- Header: 32px
183+
- Album title: 28px
184+
- Photo title: 22px
185+
- Body text: 16px (15px on tablets, 14px on mobile)
186+
- Metadata: 14px
187+
- Small text: 13px
188+
189+
### Custom CSS
190+
191+
Override theme styles with a custom CSS file:
192+
193+
```python
194+
# In sigal.conf.py
195+
theme = 'photobook'
196+
photobook_custom_css = 'my_custom.css'
197+
```
198+
199+
Create `my_custom.css` in your gallery directory with custom rules:
200+
201+
```css
202+
.photobook-caption h3 {
203+
color: #cc0000; /* Make titles red */
204+
}
205+
206+
.photobook-image {
207+
border: 3px solid #333; /* Add border to images */
208+
}
209+
210+
body {
211+
font-size: 18px; /* Increase base font size */
212+
}
213+
```
214+
215+
## Browser Support
216+
217+
- Chrome/Chromium 60+
218+
- Firefox 55+
219+
- Safari 11+
220+
- Edge 79+
221+
- Mobile browsers (iOS Safari, Chrome Mobile)
222+
223+
## Keyboard Shortcuts
224+
225+
| Key | Action |
226+
|-----|--------|
227+
| Right Arrow | Next page |
228+
| Space | Next page |
229+
| Left Arrow | Previous page |
230+
| Home | First page |
231+
| End | Last page |
232+
233+
## JavaScript API
234+
235+
For advanced customization, the theme exposes a JavaScript API:
236+
237+
```javascript
238+
// Go to specific page (1-indexed)
239+
Photobook.goToPage(5);
240+
241+
// Navigate
242+
Photobook.nextPage();
243+
Photobook.previousPage();
244+
245+
// Get current state
246+
var current = Photobook.getCurrentPage(); // Returns 1-indexed page
247+
var total = Photobook.getTotalPages();
248+
249+
// Configure pages
250+
Photobook.setPhotosPerPage(2);
251+
252+
// Map provider control
253+
Photobook.setMapProvider('googlemaps'); // Switch to Google Maps
254+
Photobook.setMapProvider('openstreetmap'); // Switch to OpenStreetMap
255+
var provider = Photobook.getMapProvider(); // Get current provider
256+
```
257+
258+
## Performance Notes
259+
260+
- Lazy loading of images is handled by browsers
261+
- Works well with 100-500 photos per album
262+
- Large albums (500+) may benefit from splitting into multiple smaller albums
263+
264+
## Accessibility
265+
266+
- Semantic HTML structure
267+
- Alt text for all images
268+
- Keyboard navigation support
269+
- High contrast text for readability
270+
- Descriptive link text (GPS coordinates link to location names)
271+
272+
## License
273+
274+
This theme is part of Sigal and follows the same license terms.
275+
276+
## Support
277+
278+
For issues or feature requests, visit:
279+
https://github.com/saimon-res/sigal
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
Colorbox Core Style:
3+
The following CSS is consistent between example themes and should not be altered.
4+
*/
5+
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
6+
#cboxWrapper {max-width:none;}
7+
#cboxOverlay{position:fixed; width:100%; height:100%;}
8+
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
9+
#cboxContent{position:relative;}
10+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
11+
#cboxTitle{margin:0;}
12+
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
13+
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
14+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
15+
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
16+
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
17+
18+
/*
19+
User Style:
20+
Change the following styles to modify the appearance of Colorbox. They are
21+
ordered & tabbed in a way that represents the nesting of the generated HTML.
22+
*/
23+
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
24+
#colorbox{outline:0;}
25+
#cboxContent{margin-top:20px;background:#000;}
26+
.cboxIframe{background:#fff;}
27+
#cboxError{padding:50px; border:1px solid #ccc;}
28+
#cboxLoadedContent{border:5px solid #000; background:#fff;}
29+
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
30+
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
31+
#cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
32+
33+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
34+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
35+
36+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
37+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
38+
39+
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
40+
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
41+
#cboxPrevious:hover{background-position:bottom left;}
42+
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
43+
#cboxNext:hover{background-position:bottom right;}
44+
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
45+
#cboxClose:hover{background-position:bottom center;}

0 commit comments

Comments
 (0)