# Hugo Shortcodes - Simple Gallery
Hugo Shortcodes - Simple Gallery 简易画廊。使用 jquery 插件 justifiedGallery 和 view-image.js
## Code
layouts/shortcodes/gallery.html
### 简易版本
单个页面只允许一个该画廊存在,默认开启 view-image.js 。
```html
{{- $content := .Inner -}}
```
### 允许多个画廊存在版本
单个页面允许多个该画廊存在,默认不开启 view-image.js , 需要在最后一个画廊开启初始化 view-image。
https://gitee.com/kkbt/www.ftls.xyz/blob/master/layouts/shortcodes/gallery.html
```html
{{- $content := .Inner -}}
{{- $md5Hash := md5 $content -}}
{{- $md5Short := substr $md5Hash 0 8 -}}
```
### 从 URL 获取版本
https://gitee.com/kkbt/www.ftls.xyz/blob/master/layouts/shortcodes/gallery2.html
```html
{{- $url := .Get 2 -}}
{{- $md5Hash := md5 $url -}}
{{- $md5Short := substr $md5Hash 0 8 -}}
```
## 使用
默认每行高度 200
```markdown
{{* gallery */>}}
https://example.com/1.jpg
https://example.com/2.jpg
{{* /gallery */>}}
```
或者指定每行高度为 150
```markdown
{{* gallery 150 */>}}
https://example.com/1.jpg
https://example.com/2.jpg
{{* /gallery */>}}
```
多个允许版本:单个页面允许多个该画廊存在,默认不开启 view-image.js , 需要在最后一个画廊开启初始化 view-image。因此每行高度是必须的。使用 md5 区分,如果发送碰撞可加换行。
```markdown
{{* gallery 200 true */>}}
https://cdn.ftls.xyz/images/2023/06/jxCOit.jpg
https://cdn.ftls.xyz/images/2023/06/0072Vf1pgy1foxk7h6p4zj31hc0u0asb.jpg
{{* /gallery */>}}
```
从 URL 获取
```markdown
{{* gallery2 200 true "https://note.ftls.xyz/ZK/202309091936.md" */>}}
```
## Demo
### Demo Shortcodes
```markdown
### Demo
#### Demo RowHeight 200
{{* gallery 200 */>}}
https://cdn.ftls.xyz/images/2023/08/1688306399523.jpg
https://cdn.ftls.xyz/images/2023/08/404371.jpg
https://cdn.ftls.xyz/images/2023/07/1688620098526.jpg
https://cdn.ftls.xyz/images/2023/01/55754e0f99940687fc310e2752e86064c455772b.jpg
https://cdn.ftls.xyz/images/2023/01/41c5c54fccccad55d07201f04c40fff6a421abbf_raw.jpg
https://cdn.ftls.xyz/images/2023/01/103578274_p0_master1200.jpg
https://cdn.ftls.xyz/images/2022/12/IMG_20230105_104639_613.jpg
https://cdn.ftls.xyz/images/2022/12/1671200096483.jpg
https://cdn.ftls.xyz/images/2022/12/1671200047862.jpg
https://cdn.ftls.xyz/images/2021/12/309906.jpg
https://cdn.ftls.xyz/images/2022/12/543a81c509926239f2f7979a2468ec8a24d90ba1_raw.jpg
{{* /gallery */>}}
#### Demo RowHeight 100
{{* gallery 100 true */>}}
https://cdn.ftls.xyz/images/2023/06/jxCOit.jpg
https://cdn.ftls.xyz/images/2023/06/0072Vf1pgy1foxk7h6p4zj31hc0u0asb.jpg
{{* /gallery */>}}
```
### Demo
#### Demo RowHeight 200
{{< gallery 200 >}}
https://cdn.ftls.xyz/images/2023/08/1688306399523.jpg
https://cdn.ftls.xyz/images/2023/08/404371.jpg
https://cdn.ftls.xyz/images/2023/07/1688620098526.jpg
https://cdn.ftls.xyz/images/2023/01/55754e0f99940687fc310e2752e86064c455772b.jpg
https://cdn.ftls.xyz/images/2023/01/41c5c54fccccad55d07201f04c40fff6a421abbf_raw.jpg
https://cdn.ftls.xyz/images/2023/01/103578274_p0_master1200.jpg
https://cdn.ftls.xyz/images/2022/12/IMG_20230105_104639_613.jpg
https://cdn.ftls.xyz/images/2022/12/1671200096483.jpg
https://cdn.ftls.xyz/images/2022/12/1671200047862.jpg
https://cdn.ftls.xyz/images/2021/12/309906.jpg
https://cdn.ftls.xyz/images/2022/12/543a81c509926239f2f7979a2468ec8a24d90ba1_raw.jpg
{{< /gallery >}}
#### Demo RowHeight 100
{{< gallery 100 true >}}
https://cdn.ftls.xyz/images/2023/06/jxCOit.jpg
https://cdn.ftls.xyz/images/2023/06/0072Vf1pgy1foxk7h6p4zj31hc0u0asb.jpg
{{< /gallery >}}