Prechádzať zdrojové kódy

feat(shortcodes): add support for image gallery in page bundle

To use:

1. Create a gallery album folder in page bundle
2. Add images to album folder
3. Paste `{{< gallery album="<ALBUM FOLDER>" >}}` in your page content

Close #786
George Cushen 6 rokov pred
rodič
commit
0ff174bbf4

BIN
exampleSite/content/post/getting-started/gallery/theme-1950s.png


BIN
exampleSite/content/post/getting-started/gallery/theme-apogee.png


BIN
exampleSite/content/post/getting-started/gallery/theme-coffee-playfair.png


BIN
exampleSite/content/post/getting-started/gallery/theme-cupcake.png


BIN
exampleSite/content/post/getting-started/gallery/theme-dark.png


BIN
exampleSite/content/post/getting-started/gallery/theme-default.png


BIN
exampleSite/content/post/getting-started/gallery/theme-forest.png


BIN
exampleSite/content/post/getting-started/gallery/theme-ocean.png


+ 18 - 16
exampleSite/content/post/getting-started/index.md

@@ -30,44 +30,46 @@ summary = "Create a beautifully simple website or blog in under 10 minutes."
   # Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
   focal_point = ""
 
+# Set captions for image gallery.
+
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-default.png"
+album = "gallery"
+image = "theme-default.png"
 caption = "Default"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-ocean.png"
+album = "gallery"
+image = "theme-ocean.png"
 caption = "Ocean"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-forest.png"
+album = "gallery"
+image = "theme-forest.png"
 caption = "Forest"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-dark.png"
+album = "gallery"
+image = "theme-dark.png"
 caption = "Dark"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-apogee.png"
+album = "gallery"
+image = "theme-apogee.png"
 caption = "Apogee"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-1950s.png"
+album = "gallery"
+image = "theme-1950s.png"
 caption = "1950s"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-coffee-playfair.png"
+album = "gallery"
+image = "theme-coffee-playfair.png"
 caption = "Coffee theme with Playfair font"
 
 [[gallery_item]]
-album = "1"
-image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-cupcake.png"
+album = "gallery"
+image = "theme-cupcake.png"
 caption = "Cupcake"
 +++
 

+ 26 - 4
layouts/shortcodes/gallery.html

@@ -1,7 +1,28 @@
-{{ $.Scratch.Set "album" "1" }}
-{{ with .Get "album" }}{{ $.Scratch.Set "album" . }}{{ end }}
+{{ $album := "gallery" }}
+{{ with .Get "album" }}{{ $album = . }}{{ end }}
 <div class="gallery">
-  {{ range (where $.Page.Params.gallery_item "album" ($.Scratch.Get "album")) }}
+
+  {{/* Attempt to automatically load gallery images from page bundle */}}
+  {{ $images := ($.Page.Resources.ByType "image").Match (printf "%s/*" $album) }}
+  {{ with $images }}
+  {{ range $images }}
+    {{/* Check if the user set a caption for this image */}}
+    {{ $filename := .Name }}
+    {{ $caption := "" }}
+    {{ if $.Page.Params.gallery_item }}
+    {{ range (where $.Page.Params.gallery_item "album" $album) }}
+      {{if eq (printf "%s/%s" $album .image) $filename}}{{ with .caption }}{{ $caption = . }}{{end}}{{end}}
+    {{ end }}
+    {{ end }}
+  <a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.}}"{{ end }}>
+  <img src="{{ .RelPermalink }}" alt="">
+  </a>
+  {{end}}
+
+  {{else}}
+  {{/* Load gallery images from the `static/img/` media library or internet */}}
+
+  {{ range (where $.Page.Params.gallery_item "album" $album) }}
   {{/* Set image path. */}}
   {{ $.Scratch.Set "src" .image }}
   {{ if gt (len .image) 4 }}
@@ -10,7 +31,8 @@
     {{ end }}
   {{ end }}
   <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.}}"{{ end }} href="{{$.Scratch.Get "src"}}">
-    <img alt="" src="{{$.Scratch.Get "src"}}">
+    <img src="{{$.Scratch.Get "src"}}" alt="">
   </a>
   {{ end }}
+  {{end}}
 </div>