' + text + '
\n'; 9 | }; 10 | 11 | // Disable images 12 | renderer.image = () => ''; 13 | 14 | // Disable HTML 15 | renderer.html = () => ''; 16 | 17 | // Disable tables 18 | renderer.table = () => ''; 19 | renderer.tablerow = () => ''; 20 | renderer.tablecell = () => ''; 21 | 22 | // Configure marked options 23 | marked.use({ 24 | renderer: renderer, 25 | breaks: true, 26 | gfm: true, 27 | }); 28 | 29 | /** 30 | * Renders markdown with limited formatting options. 31 | * Supported: paragraphs, bold, italic, lists, code blocks, blockquotes, links 32 | * Disabled: headings (rendered as paragraphs), images, HTML, tables 33 | */ 34 | export async function renderMarkdown(markdown: string): Promise
17 |
20 |
21 |
43 |
--------------------------------------------------------------------------------
/gallery/src/utils/descriptions.ts:
--------------------------------------------------------------------------------
1 | import ExifReader from 'exifreader';
2 |
3 | /**
4 | * Extracts description from image EXIF data
5 | * @param image - Image path or File object
6 | * @returns Promise resolving to image description or undefined if not found
7 | */
8 | export async function getImageDescription(image: string | File): Promise{section.title}
18 | {parsedDescription && } 19 |
26 | {
27 | validImages.map((image) => (
28 |
37 |
8 |
17 |
9 |
15 | Create your gallery
16 | Share your story
10 |Build your own gallery with Simple Photo Gallery
11 |12 | Turn your photos into a fast, beautiful web gallery in minutes and share it with your friends. 13 |
14 |${parsedCaption}
` : '';
19 | ---
20 |
21 |
31 |
32 |
33 | {
34 | image.thumbnail && (
35 |
24 | {title &&
26 | )
27 | }
28 | {title}
} 25 |
29 | {
30 | subGalleries.map((subgallery) => (
31 |
32 |
42 |
33 | })
34 |
35 |
36 |
38 |
39 | ))
40 | }
41 | {subgallery.title}
37 |
10 |
11 | 
12 |
13 |
14 |
15 | ### More examples
16 |
17 | - [California Road Trip](https://simple.photo/demo-california)
18 | - [Visiting Australia](https://simple.photo/demo-australia)
19 | - [Discovering Japan](https://simple.photo/demo-japan)
20 |
21 | ## Features
22 |
23 | 📸 Automatically scan directories with photos and videos
24 | 📝 Show descriptions for photos and videos
25 | 📂 Divide the gallery into sections to tell a story
26 | 🖼️ Create optimized thumbnails for fast loading
27 | 🎥 Play videos directly in the gallery
28 | 📱 Generate galleries that work on all devices
29 | ⚡ Optimized to be fast and lightweight
30 | 🔧 Generate a static HTML gallery that you can self-host
31 |
32 | ## Quick Start
33 |
34 | To create a gallery you need to install he `simple-photo-gallery` package globally and then you can use the `spg` command:
35 |
36 | ```bash
37 | npm install -g simple-photo-gallery@latest
38 | spg init
39 | spg build
40 | ```
41 |
42 | Alternatively you can use `npx` to run the commands directly:
43 |
44 | ```bash
45 | npx simple-photo-gallery@latest init
46 | npx simple-photo-gallery@latest build
47 | ```
48 |
49 | This will:
50 |
51 | 1. Install the [simple-photo-gallery](https://www.npmjs.com/package/simple-photo-gallery) package from NPM (if you don't already have it)
52 | 2. Prompt you for your gallery title, description, and header image
53 | 3. Scan your photos and create a `gallery.json` file
54 | 4. Generate optimized thumbnails
55 | 5. Build a static HTML gallery that you can open in your browser and self-host
56 |
57 | ## Installation Requirements
58 |
59 | - **Node.js 20+** - [Download here](https://nodejs.org/)
60 | - **FFmpeg** (for video support) - Install via:
61 | - macOS: `brew install ffmpeg`
62 | - Ubuntu/Debian: `sudo apt install ffmpeg`
63 | - Windows: [Download from ffmpeg.org](https://ffmpeg.org/download.html)
64 |
65 | ## Supported Formats
66 |
67 | **Images:** JPEG, PNG, WebP, GIF, TIFF
68 | **Videos:** MP4, MOV, AVI, WebM, MKV
69 |
70 | ## Detailed Documentation
71 |
72 | For advanced usage, customization, and deployment options, see the comprehensive [documentation](./docs/README.md):
73 |
74 | - **[Commands Reference](./docs/commands/README.md)** - Detailed guide for all CLI commands
75 | - [`init`](./docs/commands/init.md) - Initialize new galleries
76 | - [`build`](./docs/commands/build.md) - Generate static HTML galleries
77 | - [`thumbnails`](./docs/commands/thumbnails.md) - Generate optimized thumbnails
78 | - [`clean`](./docs/commands/clean.md) - Remove gallery files
79 | - **[Gallery Configuration](./docs/configuration.md)** - Manual editing of `gallery.json` and advanced features like sections
80 | - **[Deployment Guide](./docs/deployment.md)** - Guidelines for hosting your gallery
81 |
82 | ## Python Version
83 |
84 | The old Python version of Simple Photo Gallery V1 is still available [here](https://github.com/haltakov/simple-photo-gallery), but is now deprecated.
85 |
86 | ## License
87 |
88 | Simple Photo Gallery is licensed under the MIT License - see [LICENSE](./LICENSE) file for details.
89 |
--------------------------------------------------------------------------------
/gallery/src/utils/video.ts:
--------------------------------------------------------------------------------
1 | import { spawn } from 'node:child_process';
2 | import { promises as fs } from 'node:fs';
3 |
4 | import ffprobe from 'node-ffprobe';
5 | import sharp from 'sharp';
6 |
7 | import { resizeImage } from './image';
8 |
9 | import type { Dimensions } from '../types';
10 | import type { Buffer } from 'node:buffer';
11 |
12 | /**
13 | * Gets video dimensions using ffprobe
14 | * @param filePath - Path to the video file
15 | * @returns Promise resolving to video dimensions
16 | * @throws Error if no video stream found or invalid dimensions
17 | */
18 | export async function getVideoDimensions(filePath: string): Promise
12 |
13 |
10 |
11 |
12 |
13 |
14 |
15 | ### More examples
16 |
17 | - [California Road Trip](https://simple.photo/demo-california)
18 | - [Visiting Australia](https://simple.photo/demo-australia)
19 | - [Discovering Japan](https://simple.photo/demo-japan)
20 |
21 | ## Features
22 |
23 | 📸 Automatically scan directories with photos and videos
24 | 📝 Show descriptions for photos and videos
25 | 📂 Divide the gallery into sections to tell a story
26 | 🖼️ Create optimized thumbnails for fast loading
27 | 🎥 Play videos directly in the gallery
28 | 📱 Generate galleries that work on all devices
29 | ⚡ Optimized to be fast and lightweight
30 | 🔧 Generate a static HTML gallery that you can self-host
31 |
32 | ## Quick Start
33 |
34 | To create a gallery you need to install he `simple-photo-gallery` package globally and then you can use the `spg` command:
35 |
36 | ```bash
37 | npm install -g simple-photo-gallery@latest
38 | spg init
39 | spg build
40 | ```
41 |
42 | Alternatively you can use `npx` to run the commands directly:
43 |
44 | ```bash
45 | npx simple-photo-gallery@latest init
46 | npx simple-photo-gallery@latest build
47 | ```
48 |
49 | This will:
50 |
51 | 1. Install the [simple-photo-gallery](https://www.npmjs.com/package/simple-photo-gallery) package from NPM (if you don't already have it)
52 | 2. Prompt you for your gallery title, description, and header image
53 | 3. Scan your photos and create a `gallery.json` file
54 | 4. Generate optimized thumbnails
55 | 5. Build a static HTML gallery that you can open in your browser and self-host
56 |
57 | ## Installation Requirements
58 |
59 | - **Node.js 20+** - [Download here](https://nodejs.org/)
60 | - **FFmpeg** (for video support) - Install via:
61 | - macOS: `brew install ffmpeg`
62 | - Ubuntu/Debian: `sudo apt install ffmpeg`
63 | - Windows: [Download from ffmpeg.org](https://ffmpeg.org/download.html)
64 |
65 | ## Supported Formats
66 |
67 | **Images:** JPEG, PNG, WebP, GIF, TIFF
68 | **Videos:** MP4, MOV, AVI, WebM, MKV
69 |
70 | ## Detailed Documentation
71 |
72 | For advanced usage, customization, and deployment options, see the comprehensive [documentation](./docs/README.md):
73 |
74 | - **[Commands Reference](./docs/commands/README.md)** - Detailed guide for all CLI commands
75 | - [`init`](./docs/commands/init.md) - Initialize new galleries
76 | - [`build`](./docs/commands/build.md) - Generate static HTML galleries
77 | - [`thumbnails`](./docs/commands/thumbnails.md) - Generate optimized thumbnails
78 | - [`clean`](./docs/commands/clean.md) - Remove gallery files
79 | - **[Gallery Configuration](./docs/configuration.md)** - Manual editing of `gallery.json` and advanced features like sections
80 | - **[Deployment Guide](./docs/deployment.md)** - Guidelines for hosting your gallery
81 |
82 | ## Telemetry
83 |
84 | Simple Photo Gallery collects optional anonymised usage telemetry to help us understand which features are the most helpful and to prioritise improvements. No personal data or information about your photos is collected. You need to opt-in the first time you use a command for telemetry to be collected. When the CI or DO_NOT_TRACK environment variables are set, telemetry is disabled.
85 |
86 | You can manage telemetry at any time:
87 |
88 | ```bash
89 | spg telemetry -s 0 # opt out of telemetry
90 | spg telemetry -s 1 # opt back in
91 | ```
92 |
93 | Every command also accepts `--telemetry 0` or `--telemetry 1` to temporarily override your global preference.
94 |
95 | For more information about what data is collected please visit the [telemetry page](https://simple.photo/telemetry).
96 |
97 | ## Python Version
98 |
99 | The old Python version of Simple Photo Gallery V1 is still available [here](https://github.com/haltakov/simple-photo-gallery), but is now deprecated.
100 |
101 | ## License
102 |
103 | Simple Photo Gallery is licensed under the MIT License - see [LICENSE](./LICENSE) file for details.
104 |
--------------------------------------------------------------------------------
/themes/modern/src/features/themes/base-theme/layouts/MainHead.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { GalleryMetadata } from '@simple-photo-gallery/common/src/gallery';
3 |
4 | interface Props {
5 | title: string;
6 | description?: string;
7 | url?: string;
8 | thumbsBaseUrl?: string;
9 | metadata?: GalleryMetadata;
10 | headerImageBasename?: string;
11 | }
12 |
13 | const { title, description, url, thumbsBaseUrl, metadata, headerImageBasename } = Astro.props;
14 |
15 | // Use headerImageBasename for dynamic image paths, fallback to generic name
16 | const imgBasename = headerImageBasename || 'header';
17 |
18 | // Get the base path for the thumbnails
19 | const thumbnailBasePath = thumbsBaseUrl || 'gallery/images';
20 | ---
21 |
22 |
23 |
24 |
25 |
12 |
13 |
35 | {headerImageBlurHash && }
36 |
37 |
38 | 
85 |
86 |
158 |
159 |
160 |
161 |
165 | {title}
162 | {parsedDescription && } 163 |
72 |
81 |
82 |
83 | ```
84 |
85 | In this example:
86 |
87 | - `background=transparent` makes the gallery background transparent so the parent page's gradient shows through
88 | - `headerImage=false` hides the hero section to save vertical space
89 | - `typographyColor=light` sets white text that contrasts well with the dark gradient background
90 | - `sectionBgColor=transparent` ensures section backgrounds are also transparent
91 |
92 | The result is a gallery that seamlessly blends into the parent page's design.
93 |
94 | ## Query String Parameters
95 |
96 | Add parameters to the URL to customize the gallery's appearance:
97 |
98 | ```
99 | https://your-gallery-url.com/?background=transparent&headerImage=false
100 | ```
101 |
102 | ### Available Parameters
103 |
104 | | Parameter | Values | Description |
105 | | -------------------- | ------------------------- | ------------------------------------------------------ |
106 | | `headerImage` | `false`, `0` | Hide the hero/header section |
107 | | `heroHeight` | Number (e.g., `50`, `80`) | Set hero height in viewport height units (vh) |
108 | | `background` | `transparent` | Make all backgrounds transparent |
109 | | `typographyColor` | Preset or color value | Change text colors |
110 | | `sectionBgColor` | Color value | Set background color for all sections |
111 | | `sectionBgColorEven` | Color value | Set background color for even sections (2nd, 4th, ...) |
112 | | `sectionBgColorOdd` | Color value | Set background color for odd sections (1st, 3rd, ...) |
113 |
114 | ---
115 |
116 | ## Parameter Details
117 |
118 | ### `headerImage`
119 |
120 | Controls the visibility of the hero section (the large header image with title).
121 |
122 | | Value | Effect |
123 | | ----------- | -------------------------------- |
124 | | `false` | Hides the hero section |
125 | | `0` | Hides the hero section |
126 | | _(omitted)_ | Shows the hero section (default) |
127 |
128 | **Example:** Hide the hero section
129 |
130 | ```
131 | ?headerImage=false
132 | ```
133 |
134 | ---
135 |
136 | ### `heroHeight`
137 |
138 | Sets the height of the hero section. Accepts a number that is interpreted as viewport height units (`vh`).
139 |
140 | | Value | Effect |
141 | | ----- | -------------------------------------- |
142 | | `100` | Full viewport height (100vh) - default |
143 | | `50` | Half viewport height (50vh) |
144 | | `80` | 80% of viewport height (80vh) |
145 |
146 | **Example:** Set hero to 50% of viewport height
147 |
148 | ```
149 | ?heroHeight=50
150 | ```
151 |
152 | ---
153 |
154 | ### `background`
155 |
156 | Controls the background transparency of the gallery. Useful when embedding in a page where you want the host page's background to show through.
157 |
158 | | Value | Effect |
159 | | ------------- | -------------------------------------------------------- |
160 | | `transparent` | Makes all backgrounds transparent (html, body, sections) |
161 | | _(omitted)_ | Uses default backgrounds |
162 |
163 | **Example:** Transparent background for iframe embedding
164 |
165 | ```
166 | ?background=transparent
167 | ```
168 |
169 | ---
170 |
171 | ### `typographyColor`
172 |
173 | Sets the color of section titles and descriptions. Accepts preset names or custom color values.
174 |
175 | #### Presets
176 |
177 | | Preset | Title Color | Description Color |
178 | | ----------------- | --------------------------- | --------------------------- |
179 | | `light` / `white` | `rgba(255, 255, 255, 0.95)` | `rgba(255, 255, 255, 0.75)` |
180 | | `dark` / `black` | `#111827` | `#6b7280` |
181 |
182 | #### Custom Colors
183 |
184 | You can also use custom color values in the following formats:
185 |
186 | - **Hex colors**: `ff5500`, `abc` (without `#` prefix, 6-digit or 3-digit format)
187 | - **RGB/RGBA**: `rgb(255,85,0)`, `rgba(255,85,0,0.9)`
188 |
189 | When using a custom color, the description color is automatically derived with 80% opacity.
190 |
191 | **Examples:**
192 |
193 | ```
194 | ?typographyColor=dark
195 | ?typographyColor=ff5500
196 | ?typographyColor=rgba(255,85,0,0.9)
197 | ```
198 |
199 | ---
200 |
201 | ### `sectionBgColor`
202 |
203 | Sets the background color for all gallery sections. This is the base color that applies to all sections unless overridden by `sectionBgColorEven` or `sectionBgColorOdd`.
204 |
205 | **Accepted values:**
206 |
207 | - Hex colors: `f5f5f5`, `abc` (without `#` prefix)
208 | - RGB/RGBA: `rgb(245,245,245)`, `rgba(245,245,245,0.9)`
209 | - `transparent`
210 |
211 | **Example:**
212 |
213 | ```
214 | ?sectionBgColor=f5f5f5
215 | ?sectionBgColor=rgba(245,245,245,0.9)
216 | ```
217 |
218 | ---
219 |
220 | ### `sectionBgColorEven`
221 |
222 | Sets the background color specifically for even-numbered sections (2nd, 4th, 6th, etc.). Overrides `sectionBgColor` for even sections.
223 |
224 | **Default:** `f9fafb` (light gray)
225 |
226 | **Accepted values:**
227 |
228 | - Hex colors: `ffffff`, `abc` (without `#` prefix)
229 | - RGB/RGBA: `rgb(255,255,255)`, `rgba(255,255,255,0.9)`
230 | - `transparent`
231 |
232 | **Example:** White background for even sections
233 |
234 | ```
235 | ?sectionBgColorEven=ffffff
236 | ?sectionBgColorEven=rgba(255,255,255,0.9)
237 | ```
238 |
239 | ---
240 |
241 | ### `sectionBgColorOdd`
242 |
243 | Sets the background color specifically for odd-numbered sections (1st, 3rd, 5th, etc.). Overrides `sectionBgColor` for odd sections.
244 |
245 | **Default:** `transparent`
246 |
247 | **Accepted values:**
248 |
249 | - Hex colors: `e0f2fe`, `abc` (without `#` prefix)
250 | - RGB/RGBA: `rgb(224,242,254)`, `rgba(224,242,254,0.9)`
251 | - `transparent`
252 |
253 | **Example:** Light blue background for odd sections
254 |
255 | ```
256 | ?sectionBgColorOdd=e0f2fe
257 | ?sectionBgColorOdd=rgba(224,242,254,0.9)
258 | ```
259 |
260 | ---
261 |
262 | ## Common Embedding Scenarios
263 |
264 | ### Embed in Other Websites with Transparent Backgrounds
265 |
266 | Perfect for embedding galleries in other websites where you want the parent page's background to show through:
267 |
268 | ```
269 | ?background=transparent&headerImage=false
270 | ```
271 |
272 | ### Dynamically Adjust Colors to Match Parent Page Themes
273 |
274 | Match your host site's color scheme by adjusting typography and section colors:
275 |
276 | **For dark-themed websites:**
277 |
278 | ```
279 | ?background=transparent&typographyColor=light§ionBgColor=transparent
280 | ```
281 |
282 | **For light-themed websites:**
283 |
284 | ```
285 | ?background=transparent&typographyColor=dark§ionBgColor=ffffff
286 | ```
287 |
288 | **Match custom brand colors:**
289 |
290 | ```
291 | ?typographyColor=1e3a5f§ionBgColorOdd=ffffff§ionBgColorEven=f0f4f8
292 | ```
293 |
294 | ### Hide Header Images in Constrained Spaces
295 |
296 | When embedding in limited vertical space, hide the hero section entirely:
297 |
298 | ```
299 | ?headerImage=false&background=transparent
300 | ```
301 |
302 | Or reduce the hero height for a more compact view:
303 |
304 | ```
305 | ?heroHeight=50&background=transparent
306 | ```
307 |
308 | ### Full Customization Example
309 |
310 | Combine multiple parameters for complete control:
311 |
312 | ```
313 | ?headerImage=false&background=transparent&typographyColor=dark§ionBgColor=transparent
314 | ```
315 |
316 | ---
317 |
318 | ## Notes
319 |
320 | - **Hex colors** must be specified without the `#` prefix (e.g., `ff5500`, not `#ff5500`)
321 | - **RGB/RGBA colors** are supported for typography and section background colors (e.g., `rgba(255,85,0,0.9)`)
322 | - Invalid parameter values are ignored, and defaults are used instead
323 | - Parameters are case-sensitive for values (e.g., `transparent`, not `Transparent`)
324 | - Multiple parameters are joined with `&`
325 |
--------------------------------------------------------------------------------