You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -15,7 +16,7 @@ Focused on content and typography, the stylized index page is really just a list
15
16
16
17
- Showcase content
17
18
- Content-focused page templates for list pages, single pages, and posts
18
-
- A responsive CSS grid gallery page that renders from a folder of images
19
+
- A responsive CSS grid gallery page that renders from images in your [Page Bundle](https://gohugo.io/content-management/organization/#page-bundles)
19
20
- Customize
20
21
- Custom navigation menu set via `config.toml`
21
22
- Custom footer text
@@ -91,65 +92,56 @@ $ hugo new posts/your-post-title.md
91
92
92
93
## Image gallery
93
94
94
-
To create an image gallery, place all the files you want included in a folder called "images" (you can change the name of the "images" folder in `config.toml` if you wish). Place your "images" folder in a subfolder of `content/` with any name. The directory structure then looks like this:
95
+
To create an image gallery, place all the files you want included in your [Page Bundle](https://gohugo.io/content-management/organization/#page-bundles). The directory structure might then look like this:
95
96
96
97
```
97
98
content/
98
99
└── gallery/
99
-
└── images/
100
-
| ├── file_1.jpg
101
-
| ├── file_2.jpg
102
-
|└── file_3.jpg
103
-
└── _index.md
100
+
└── _index.md
101
+
└── images/
102
+
├── file_1.jpg
103
+
├── file_2.jpg
104
+
└── file_3.jpg
104
105
```
105
106
106
-
To automagically generate a gallery from the images, set `type: "gallery"` in the front-matter of `_index.md`. The gallery title is defined in the front-matter as well. You can also optionally define the page URL using `url`. Here is an example of a gallery's `_index.md`:
107
+
To automagically generate a gallery from the images, set `type: "gallery"` in the front-matter of `_index.md`. You can also set other options for the gallery:
107
108
108
-
```
109
+
* The gallery `title`
110
+
* The page link with `url`
111
+
* The `maxWidth` of the resized images
112
+
* Whether you want the images to link to the full size files, with `clickablePhotos`
113
+
114
+
Here is an example of a gallery's `_index.md`:
115
+
116
+
```yaml
109
117
---
110
118
title: "Portraits"
111
119
type: "gallery"
112
120
url: "/portrait-gallery"
121
+
maxWidth: "800x"
122
+
clickablePhotos: true
113
123
---
114
124
```
115
125
116
-
In order to create more than one gallery, create multiple subfolders in `content/` with this file structure and `type: "gallery"` defined in the `_index.md` front matter. For example:
117
-
126
+
In order to create more than one gallery, create multiple Page Bundles with images and `type: "gallery"` defined in the `_index.md` front matter. For example:
118
127
119
128
```
120
129
content/
121
130
| └── gallery/
122
-
| └── images/
123
-
| | ├── file_1.jpg
124
-
| | ├── file_2.jpg
125
-
| |└── file_3.jpg
126
-
| └── _index.md
131
+
| └── _index.md
132
+
| └── images/
133
+
| ├── file_1.jpg
134
+
| ├── file_2.jpg
135
+
| └── file_3.jpg
127
136
|
128
137
└── portfolio/
129
-
└── images/
130
-
| ├── file_1.jpg
131
-
| ├── file_2.jpg
132
-
|└── file_3.jpg
133
-
└── _index.md
138
+
└── _index.md
139
+
└── images/
140
+
├── file_1.jpg
141
+
├── file_2.jpg
142
+
└── file_3.jpg
134
143
```
135
144
136
-
In `config.toml`, you can set `smallPreviewImages` to `true` in order to use small sized thumbnails. Include those thumbnail files in your gallery image folder. In exampleSite, this looks like:
137
-
138
-
```
139
-
content/
140
-
└── gallery/
141
-
└── images/
142
-
│ └── small/
143
-
| ├── file_1.jpg
144
-
| ├── file_2.jpg
145
-
| └── file_3.jpg
146
-
├── file_1.jpg
147
-
├── file_2.jpg
148
-
└── file_3.jpg
149
-
```
150
-
151
-
The thumbnails need to have the same filenames as the larger images they represent.
152
-
153
145
That's it! Sam's gallery layout template will automagically build the page from your images.
0 commit comments