diff options
| author | Justin Berthault <justin.berthault@zaclys.net> | 2018-01-30 11:56:35 +0300 |
|---|---|---|
| committer | Justin Berthault <justin.berthault@zaclys.net> | 2018-01-30 11:56:35 +0300 |
| commit | 8c0255a8e74d806fa9e62f77f38c3cf3882331e9 (patch) | |
| tree | 8d825ff584b3d8ccf9fd0fc47aeb72d1e105d573 | |
| parent | 5acd4af8ca07dce7e744072a1bdeecb75077a07c (diff) | |
Add Automatic gallery function with Page-Bundle feature
- Gallery images stored in `images/gallery`
- Auto-resizing
| -rw-r--r-- | layouts/_default/single.html | 5 | ||||
| -rw-r--r-- | layouts/partials/gallery.html | 13 | ||||
| -rw-r--r-- | static/css/style.css | 4 |
3 files changed, 18 insertions, 4 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 457d7ef..dcf5d84 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,7 +2,7 @@ {{ if isset .Params "lightbox" }} <link rel="stylesheet" href="/css/baguetteBox.min.css" /> {{- end -}} - {{ if isset .Params "gallery" }} + {{- with .Resources.ByType "image" -}} <link rel="stylesheet" href="/css/baguetteBox.min.css" /> {{- end }} <link rel="stylesheet" href="/css/pygments.min.css" /> @@ -46,6 +46,7 @@ </div> {{- end -}} {{- .Content -}} + {{ partial "gallery" . }} </article> {{ $related := .Site.RegularPages.Related . | first 5 }} {{ with $related }} @@ -69,7 +70,7 @@ return element.getElementsByTagName('img')[0].alt; }});</script> {{- end -}} - {{- if isset .Params "gallery" -}} + {{- with .Resources.ByType "image" -}} <script src="{{ "js/baguetteBox.min.js" | relURL}}"></script> <script>baguetteBox.run('.gallery', { captions: function(element) { diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html new file mode 100644 index 0000000..7123e69 --- /dev/null +++ b/layouts/partials/gallery.html @@ -0,0 +1,13 @@ +<div class="gallery"> +{{ with .Resources.Match "images/gallery/*.*" }} +{{ range . }} +{{ $scaled := .Resize "256x q80" }} +<div class="gallery-item"> +<a href="{{ .RelPermalink }}"> +<img class="thumbnail" src="{{ $scaled.Permalink }}"> +</a> +</div> +{{ end }} +{{ end }} +</div> + diff --git a/static/css/style.css b/static/css/style.css index 976bf93..b67f9ad 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -183,7 +183,7 @@ img { position: relative; } .gallery-item .thumbnail { - max-width: 80%; + max-width: 90%; } .label { display: inline; @@ -246,7 +246,7 @@ img { max-width: 50%; } .gallery-item { - width: 20%; + width: 33%; } .thumbnail { max-width: 30%; |