blob: 0ece5ffe0b2340e6211ed001f5be7a71bb13aea0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
# Photo Grid
This responsive grid theme provides a beautiful layout to showcase your photograghy and manage your gallery with ease.
2021-01-30: Added embedded video support
## Distinguishing Features
- Easy photo management
- Configurable photo display order
- Automatic thumbnail creation
- Automatic EXIF info extraction
- Full lazy loading for maximum bandwidth savings
## Origin
Photo Grid is based on [Hugird](http://themes.gohugo.io/theme/hugrid/), a responsive grid-layout boilerplate theme for Hugo.
## Demo
- [My own photo gallery](https://chen-zhe.github.io/portfolio/)
## Screenshot
## Contents
- [Installation](#installation)
- [Getting started](#getting-started)
- [The config file](#the-config-file)
- [Photo Management](#photo-management)
- [Nearly finished](#nearly-finished)
- [Contributing](#contributing)
- [License](#license)
- [Annotations](#annotations)
## Installation
Inside the folder of your new Hugo site run:
```sh
$ mkdir themes
$ cd themes
$ git clone https://github.com/chen-zhe/photo-grid
```
For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo.
## Getting started
After installing the theme successfully it requires a just a few more steps to get your site running.
### The config file
Take a look inside the [`exampleSite`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/config.toml). To use it, copy the `config.toml` in the root folder of your Hugo site. Feel free to change the strings in this theme.
EXIF info display can be disabled by setting `no_exif = true` in the config
### Photo Management
All photos are stored in the [`photo`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/content/photo) folder under the `content` folder. You can put multiple directories under it and the theme will enumerate all photos within in order of the directory listing. Within each subfolder, e.g. [`1-trip1`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/content/photo/1-trip1), you can put all relevant photos in it and then copy over the `index.md` file.
Within [`index.md`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/content/photo/1-trip1/index.md) file, you can specify each photo's name, description and other properties. Take a look at the descriptions to understand what can be customized.
#### Video Playback
To add a video, simply put its thumbnail in the same way as a regular photo and
specify `video_embed_link` (refer to [`index.md`](https://github.com/Chen-Zhe/photo-grid/blob/master/exampleSite/content/photo/1-trip1/index.md), which should be the URL in the `src` attribute of an embedded iframe provided by
video-sharing sites such as YouTube.
A video icon will appear on the thumbnail in the gallery view and expanding it will reveal the embedded video
player.
### Nearly finished
In order to see your site in action, run Hugo's built-in local server.
$ hugo server
Now enter `localhost:1313` in the address bar of your browser.
## Contributing
Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](https://github.com/chen-zhe/photo-grid/issues) to let me know. Or make directly a [pull request](https://github.com/chen-zhe/photo-grid/pulls).
## License
This work is licensed under the MIT License. For more information read the [License](https://github.com/Chen-Zhe/photo-grid/blob/master/LICENSE.md).
## Annotations
Thanks
- to [spf13](https://github.com/spf13) for creating Hugo and the awesome community around the project
- to [digitalcraftsman](https://github.com/digitalcraftsman) for creating Hugo themes and writing nice READMEs
- to Codrops for original [Thumbnail Grid with Expanding Preview](http://tympanus.net/codrops/?p=14530).
- to Pavel for porting over the aforementioned theme to Hugo as [Hugrid](https://github.com/aerohub/hugrid)
|
