Gallery shortcode for Hugo. Fork of Li-Wen Yip's Easy Gallery
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

figure.html 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!--
  2. SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
  3. SPDX-License-Identifier: MIT
  4. -->
  5. <!-- count how many times we've called this shortcode; load the css if it's the first time -->
  6. {{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
  7. {{- $.Page.Scratch.Add "figurecount" 1 -}}
  8. <!-- use src image -->
  9. {{- $thumb := .Get "src" -}}
  10. <!-- set unique ID depending on whether part of gallery or alone -->
  11. {{- $figid := "" -}}
  12. {{- $galid := "" -}}
  13. {{- $id := "" -}}
  14. {{- $previd := "" -}}
  15. {{- $nextid := "" -}}
  16. {{- if .Parent -}} <!-- gallery -->
  17. {{- $galid = .Page.Scratch.Get "gallery" -}}
  18. {{- if not $galid }}{{ $galid = 0 }}{{ end -}}
  19. {{- $galid = add $galid 1 -}}
  20. {{- $.Page.Scratch.Add "thisgalfig" 1 -}}
  21. {{- $figid = .Page.Scratch.Get "thisgalfig" -}}
  22. {{- else -}} <!-- standalone figure -->
  23. {{- $.Page.Scratch.Add "nogalfig" 1 -}}
  24. {{- $figid = .Page.Scratch.Get "nogalfig" -}}
  25. {{- end -}}
  26. {{- if $galid -}} <!-- gallery -->
  27. {{- $id = print "gal" $galid "-" "fig" $figid -}}
  28. {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
  29. {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
  30. {{- else -}} <!-- standalone figure -->
  31. {{- $id = print "fig" $figid -}}
  32. {{- end -}}
  33. <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
  34. <div class="snap-wrapper">
  35. {{ if (.Get "link") -}}
  36. <a href="{{ .Get "link" }}"
  37. {{- with .Get "target" }} target="{{ . }}"{{ end -}}
  38. {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
  39. >
  40. {{ else -}}
  41. {{ if not (eq (.Get "lightbox") "none") }}<a href="#{{ $id }}">{{ end }}
  42. {{- end -}}
  43. <!-- THUMBNAIL -->
  44. <img src="{{ $thumb | relURL }}" class="snap-thumb"
  45. {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
  46. {{- with .Get "title" }} title="{{ . }}"{{ end -}}
  47. {{- with .Get "height" }} height="{{ . }}"{{ end -}}
  48. {{- with .Get "width" }} width="{{ . }}"{{ end -}}
  49. />
  50. {{- if or (.Get "caption") (.Get "attr")}}
  51. <figcaption>
  52. {{- .Get "caption" | markdownify -}}
  53. {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
  54. </figcaption>
  55. {{- end }}
  56. </a>
  57. <!-- FULL IMAGE; HIDDEN -->
  58. {{- if not (eq (.Get "lightbox") "none") -}}
  59. <div class="snap-lightbox" id="{{ $id }}">
  60. <a href="#_" class="snap-lightbox-close"></a>
  61. <div class="snap-lightbox-inner">
  62. <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
  63. <p>
  64. {{- if or (.Get "caption") (.Get "attr") -}}
  65. {{- .Get "caption" | markdownify -}}
  66. {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
  67. {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
  68. {{- with .Get "attrlink" }}</a>{{- end -}}
  69. {{- end }}
  70. </p>
  71. </div>
  72. <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
  73. {{- if .Parent -}}
  74. {{- if not (eq $figid 1) -}}
  75. <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
  76. {{- else -}}
  77. <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
  78. {{- end -}}
  79. <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
  80. <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
  81. {{- end }}
  82. </div>
  83. {{- end -}}
  84. </div>
  85. </figure>