simple-photo-gallery 0.0.8 β 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -322
- package/dist/index.js +585 -372
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,349 +1,80 @@
|
|
|
1
|
-
# Simple Photo Gallery
|
|
1
|
+
# Simple Photo Gallery
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Create beautiful photo galleries from collections in just 30 seconds. No configuration required to get startedβsimply run two commands in your photos folder and create a static gallery website you can self-host.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- πΈ **Media Scanning**: Automatically scan directories for images and videos
|
|
8
|
-
- πΌοΈ **Thumbnail Generation**: Create optimized thumbnails for fast loading
|
|
9
|
-
- π₯ **Video Support**: Handle video files with ffmpeg integration
|
|
10
|
-
- π± **Responsive Design**: Generate galleries that work on all devices
|
|
11
|
-
- β‘ **Fast Performance**: Optimized thumbnails and lazy loading
|
|
12
|
-
- π§ **Astro Integration**: Seamless setup with Astro static site generator
|
|
13
|
-
|
|
14
|
-
## Installation
|
|
15
|
-
|
|
16
|
-
### Prerequisites
|
|
17
|
-
|
|
18
|
-
- Node.js 18+
|
|
19
|
-
- npm or yarn
|
|
20
|
-
- ffmpeg (for video processing)
|
|
21
|
-
|
|
22
|
-
### Install ffmpeg
|
|
23
|
-
|
|
24
|
-
**macOS:**
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
brew install ffmpeg
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
**Ubuntu/Debian:**
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
sudo apt update
|
|
34
|
-
sudo apt install ffmpeg
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
**Windows:**
|
|
38
|
-
Download from [ffmpeg.org](https://ffmpeg.org/download.html)
|
|
39
|
-
|
|
40
|
-
### Install the CLI
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
# Clone the repository
|
|
44
|
-
git clone <repository-url>
|
|
45
|
-
cd simple-photo-gallery-public/cli
|
|
46
|
-
|
|
47
|
-
# Install dependencies
|
|
48
|
-
npm install
|
|
49
|
-
|
|
50
|
-
# Build the CLI
|
|
51
|
-
npm run build
|
|
52
|
-
|
|
53
|
-
# Link globally (optional)
|
|
54
|
-
npm link
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Commands
|
|
58
|
-
|
|
59
|
-
### `gallery init`
|
|
60
|
-
|
|
61
|
-
Scan a directory for images and videos to create a `gallery.json` file.
|
|
62
|
-
|
|
63
|
-
```bash
|
|
64
|
-
gallery init [options]
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
**Options:**
|
|
68
|
-
|
|
69
|
-
- `-p, --path <path>` - Path to scan for media files (default: current directory)
|
|
70
|
-
- `-o, --output <path>` - Output directory for gallery.json
|
|
71
|
-
- `-r, --recursive` - Scan subdirectories recursively
|
|
5
|
+
This is a free, open-source tool that you can use to generate galleries and self-host them. If you don't want to use the command line or bother with self-hostting, please check out [simple.photo](https://simple.photo) for a hosted solution.
|
|
72
6
|
|
|
73
|
-
|
|
7
|
+
## Example Gallries
|
|
74
8
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
gallery
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
gallery init --path /path/to/photos
|
|
81
|
-
|
|
82
|
-
# Scan recursively
|
|
83
|
-
gallery init --path /path/to/photos --recursive
|
|
84
|
-
|
|
85
|
-
# Specify output directory
|
|
86
|
-
gallery init --path /path/to/photos --output /path/to/output
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### `gallery thumbnails`
|
|
90
|
-
|
|
91
|
-
Generate thumbnails for all media files in the gallery.
|
|
92
|
-
|
|
93
|
-
```bash
|
|
94
|
-
gallery thumbnails [options]
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
**Options:**
|
|
98
|
-
|
|
99
|
-
- `-p, --path <path>` - Path containing .simple-photo-gallery folder (default: current directory)
|
|
100
|
-
- `-s, --size <size>` - Thumbnail height in pixels (default: 200)
|
|
101
|
-
|
|
102
|
-
**Examples:**
|
|
103
|
-
|
|
104
|
-
```bash
|
|
105
|
-
# Generate thumbnails with default size
|
|
106
|
-
gallery thumbnails
|
|
107
|
-
|
|
108
|
-
# Generate thumbnails with custom size
|
|
109
|
-
gallery thumbnails --size 300
|
|
110
|
-
|
|
111
|
-
# Specify gallery path
|
|
112
|
-
gallery thumbnails --path /path/to/gallery
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### `gallery build`
|
|
116
|
-
|
|
117
|
-
Configure Astro template to work with external image directories and build galleries.
|
|
118
|
-
|
|
119
|
-
```bash
|
|
120
|
-
gallery build [options]
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
**Options:**
|
|
124
|
-
|
|
125
|
-
- `-i, --images-path <path>` - Path to images directory (required)
|
|
126
|
-
- `-r, --recursive` - Scan subdirectories recursively for gallery/gallery.json files
|
|
127
|
-
|
|
128
|
-
**Examples:**
|
|
129
|
-
|
|
130
|
-
```bash
|
|
131
|
-
# Setup template for a single gallery directory
|
|
132
|
-
gallery build --images-path ../my-photos
|
|
133
|
-
|
|
134
|
-
# Setup template recursively for multiple gallery directories
|
|
135
|
-
gallery build --images-path ../my-photos --recursive
|
|
136
|
-
```
|
|
9
|
+
<div align="center">
|
|
10
|
+
<a href="https://simple.photo/demo-australia">
|
|
11
|
+
<img src="docs/images/simple-photo-gallery-demo.jpg" alt="Simple Photo Gallery Demo" width="50%">
|
|
12
|
+
</a>
|
|
13
|
+
</div>
|
|
137
14
|
|
|
138
|
-
|
|
15
|
+
### More examples
|
|
139
16
|
|
|
140
|
-
|
|
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)
|
|
141
20
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
```bash
|
|
145
|
-
mkdir my-photos
|
|
146
|
-
# Copy your photos and videos to my-photos/
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
2. **Scan for media files:**
|
|
150
|
-
|
|
151
|
-
```bash
|
|
152
|
-
cd my-photos
|
|
153
|
-
gallery init
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
3. **Generate thumbnails:**
|
|
157
|
-
|
|
158
|
-
```bash
|
|
159
|
-
gallery thumbnails --size 250
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
4. **Set up Astro template:**
|
|
163
|
-
|
|
164
|
-
```bash
|
|
165
|
-
cd ../template
|
|
166
|
-
gallery build
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
5. **Build and serve:**
|
|
170
|
-
|
|
171
|
-
```bash
|
|
172
|
-
npm run dev
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### Advanced Workflow with Multiple Sections
|
|
176
|
-
|
|
177
|
-
1. **Organize photos in subdirectories:**
|
|
178
|
-
|
|
179
|
-
```
|
|
180
|
-
my-photos/
|
|
181
|
-
βββ vacation/
|
|
182
|
-
β βββ beach.jpg
|
|
183
|
-
β βββ mountains.jpg
|
|
184
|
-
β βββ sunset.mp4
|
|
185
|
-
βββ family/
|
|
186
|
-
β βββ birthday.jpg
|
|
187
|
-
β βββ christmas.jpg
|
|
188
|
-
βββ events/
|
|
189
|
-
βββ wedding.jpg
|
|
190
|
-
βββ graduation.jpg
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
2. **Scan with recursive option:**
|
|
194
|
-
|
|
195
|
-
```bash
|
|
196
|
-
cd my-photos
|
|
197
|
-
gallery init --recursive
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
3. **Edit gallery.json to create sections:**
|
|
201
|
-
|
|
202
|
-
```json
|
|
203
|
-
{
|
|
204
|
-
"title": "My Photo Collection",
|
|
205
|
-
"description": "A collection of my favorite moments",
|
|
206
|
-
"headerImage": "vacation/beach.jpg",
|
|
207
|
-
"metadata": { "ogUrl": "" },
|
|
208
|
-
"sections": [
|
|
209
|
-
{
|
|
210
|
-
"title": "Vacation Memories",
|
|
211
|
-
"description": "Amazing trips and adventures",
|
|
212
|
-
"images": [
|
|
213
|
-
// vacation images will be here
|
|
214
|
-
]
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
"title": "Family Moments",
|
|
218
|
-
"description": "Precious family memories",
|
|
219
|
-
"images": [
|
|
220
|
-
// family images will be here
|
|
221
|
-
]
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"title": "Special Events",
|
|
225
|
-
"description": "Important life events",
|
|
226
|
-
"images": [
|
|
227
|
-
// events images will be here
|
|
228
|
-
]
|
|
229
|
-
}
|
|
230
|
-
]
|
|
231
|
-
}
|
|
232
|
-
```
|
|
21
|
+
## Features
|
|
233
22
|
|
|
234
|
-
|
|
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
|
|
235
31
|
|
|
236
|
-
|
|
237
|
-
gallery thumbnails --size 300 --recursive
|
|
238
|
-
```
|
|
32
|
+
## Quick Start
|
|
239
33
|
|
|
240
|
-
|
|
34
|
+
The fastest way to create a gallery is to use `npx` in your photos folder:
|
|
241
35
|
|
|
242
36
|
```bash
|
|
243
|
-
|
|
244
|
-
gallery build
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
## File Structure
|
|
248
|
-
|
|
249
|
-
After running the CLI, your project will have this structure:
|
|
250
|
-
|
|
37
|
+
npx simple-photo-gallery init
|
|
38
|
+
npx simple-photo-gallery build
|
|
251
39
|
```
|
|
252
|
-
my-photos/
|
|
253
|
-
βββ .simple-photo-gallery/
|
|
254
|
-
β βββ gallery.json # Gallery metadata and file list
|
|
255
|
-
β βββ thumbnails/ # Generated thumbnails
|
|
256
|
-
β βββ image1.jpg
|
|
257
|
-
β βββ image2.jpg
|
|
258
|
-
β βββ video1.jpg
|
|
259
|
-
βββ photo1.jpg
|
|
260
|
-
βββ photo2.jpg
|
|
261
|
-
βββ video1.mp4
|
|
262
|
-
|
|
263
|
-
template/
|
|
264
|
-
βββ astro.config.ts # Modified Astro config
|
|
265
|
-
βββ gallery.json # Copied gallery data
|
|
266
|
-
βββ ... (other Astro files)
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
## Supported Media Formats
|
|
270
|
-
|
|
271
|
-
**Images:**
|
|
272
|
-
|
|
273
|
-
- JPEG (.jpg, .jpeg)
|
|
274
|
-
- PNG (.png)
|
|
275
|
-
- WebP (.webp)
|
|
276
|
-
- GIF (.gif)
|
|
277
|
-
- TIFF (.tiff, .tif)
|
|
278
|
-
|
|
279
|
-
**Videos:**
|
|
280
|
-
|
|
281
|
-
- MP4 (.mp4)
|
|
282
|
-
- MOV (.mov)
|
|
283
|
-
- AVI (.avi)
|
|
284
|
-
- WebM (.webm)
|
|
285
|
-
- MKV (.mkv)
|
|
286
40
|
|
|
287
|
-
|
|
41
|
+
This will:
|
|
288
42
|
|
|
289
|
-
|
|
43
|
+
1. Install the [simple-photo-gallery](https://www.npmjs.com/package/simple-photo-gallery) package from NPM (if you don't already have it)
|
|
44
|
+
2. Prompt you for your gallery title, description, and header image
|
|
45
|
+
3. Scan your photos and create a `gallery.json` file
|
|
46
|
+
4. Generate optimized thumbnails
|
|
47
|
+
5. Build a static HTML gallery that you can open in your browser and self-host
|
|
290
48
|
|
|
291
|
-
|
|
49
|
+
## Installation Requirements
|
|
292
50
|
|
|
293
|
-
**
|
|
51
|
+
- **Node.js 20+** - [Download here](https://nodejs.org/)
|
|
52
|
+
- **FFmpeg** (for video support) - Install via:
|
|
53
|
+
- macOS: `brew install ffmpeg`
|
|
54
|
+
- Ubuntu/Debian: `sudo apt install ffmpeg`
|
|
55
|
+
- Windows: [Download from ffmpeg.org](https://ffmpeg.org/download.html)
|
|
294
56
|
|
|
295
|
-
|
|
296
|
-
- Ensure ffmpeg is in your PATH
|
|
57
|
+
## Supported Formats
|
|
297
58
|
|
|
298
|
-
**
|
|
59
|
+
**Images:** JPEG, PNG, WebP, GIF, TIFF
|
|
60
|
+
**Videos:** MP4, MOV, AVI, WebM, MKV
|
|
299
61
|
|
|
300
|
-
|
|
301
|
-
- Check that the path to .simple-photo-gallery folder is correct
|
|
62
|
+
## Detailed Documentation
|
|
302
63
|
|
|
303
|
-
|
|
64
|
+
For advanced usage, customization, and deployment options, see the comprehensive [documentation](./docs/README.md):
|
|
304
65
|
|
|
305
|
-
-
|
|
306
|
-
-
|
|
307
|
-
-
|
|
66
|
+
- **[Commands Reference](./docs/commands/README.md)** - Detailed guide for all CLI commands
|
|
67
|
+
- [`init`](./docs/commands/init.md) - Initialize new galleries
|
|
68
|
+
- [`build`](./docs/commands/build.md) - Generate static HTML galleries
|
|
69
|
+
- [`thumbnails`](./docs/commands/thumbnails.md) - Generate optimized thumbnails
|
|
70
|
+
- [`clean`](./docs/commands/clean.md) - Remove gallery files
|
|
71
|
+
- **[Gallery Configuration](./docs/configuration.md)** - Manual editing of `gallery.json` and advanced features like sections
|
|
72
|
+
- **[Deployment Guide](./docs/deployment.md)** - Guidelines for hosting your gallery
|
|
308
73
|
|
|
309
|
-
|
|
74
|
+
## Python Version
|
|
310
75
|
|
|
311
|
-
|
|
312
|
-
- Verify file paths are correct and accessible
|
|
313
|
-
- Ensure ffmpeg is properly installed for video processing
|
|
314
|
-
- Review the generated gallery.json file for any issues
|
|
315
|
-
|
|
316
|
-
## Development
|
|
317
|
-
|
|
318
|
-
### Building from Source
|
|
319
|
-
|
|
320
|
-
```bash
|
|
321
|
-
# Install dependencies
|
|
322
|
-
npm install
|
|
323
|
-
|
|
324
|
-
# Build the CLI
|
|
325
|
-
npm run build
|
|
326
|
-
|
|
327
|
-
# Run in development mode
|
|
328
|
-
npm run gallery
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
### Code Quality
|
|
332
|
-
|
|
333
|
-
```bash
|
|
334
|
-
# Check TypeScript
|
|
335
|
-
npm run check
|
|
336
|
-
|
|
337
|
-
# Lint code
|
|
338
|
-
npm run lint
|
|
339
|
-
|
|
340
|
-
# Fix linting issues
|
|
341
|
-
npm run lint:fix
|
|
342
|
-
|
|
343
|
-
# Format code
|
|
344
|
-
npm run format
|
|
345
|
-
```
|
|
76
|
+
The old Python version of Simple Photo Gallery V1 is still available [here](https://github.com/haltakov/simple-photo-gallery), but is now deprecated.
|
|
346
77
|
|
|
347
78
|
## License
|
|
348
79
|
|
|
349
|
-
MIT License - see LICENSE file for details.
|
|
80
|
+
Simple Photo Gallery is licensed under the MIT License - see [LICENSE](./LICENSE) file for details.
|