Browse Source

add and document extra classes and parameters

max.mehl 7 months ago
parent
commit
676c7adfc1
No account linked to committer's email address
3 changed files with 32 additions and 24 deletions
  1. 2
    1
      README.md
  2. 25
    23
      layouts/shortcodes/figure.html
  3. 5
    0
      static/css/snap-gallery.css

+ 2
- 1
README.md View File

@@ -41,7 +41,8 @@ Specifying your image files:
41 41
 Optional parameters:
42 42
 
43 43
 - All the [features/parameters](https://gohugo.io/content-management/shortcodes/#figure) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, rel, title, caption, class, attr (attribution), attrlink, alt. width and height might lead to strange results when used inside `{{< gallery >}}`.
44
-- `class` allows you to set any custom classes you want on the `<figure>` tag.
44
+- `class` allows you to set any custom classes you want on the `<figure>` tag. The values `no-border`, `small`, `medium`, `pull-left` and `pull-right` are made available by this project.
45
+- `lightbox` allows you to control the lightbox. The value `none` will disable the lightbox completely.
45 46
 
46 47
 Optional parameters work for standalone `{{< figure >}}` shortcodes and inside of `{{< gallery >}}`. However, they cannot be applied to `{{< snap-dir >}}`.
47 48
 

+ 25
- 23
layouts/shortcodes/figure.html View File

@@ -40,7 +40,7 @@
40 40
          {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
41 41
          >
42 42
     {{ else -}}
43
-      <a href="#{{ $id }}">
43
+      {{ if not (eq (.Get "lightbox") "none") }}<a href="#{{ $id }}">{{ end }}
44 44
     {{- end -}}
45 45
     <!-- THUMBNAIL -->
46 46
       <img src="{{ $thumb | relURL }}" class="snap-thumb"
@@ -57,29 +57,31 @@
57 57
       {{- end }}
58 58
     </a>
59 59
     <!-- FULL IMAGE; HIDDEN -->
60
-    <div class="snap-lightbox" id="{{ $id }}">
61
-      <a href="#_" class="snap-lightbox-close"></a>
62
-      <div class="snap-lightbox-inner">
63
-        <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
64
-        <p>
65
-        {{- if or (.Get "caption") (.Get "attr") -}}
66
-          {{- .Get "caption" | markdownify -}}
67
-          {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
68
-          {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
69
-          {{- with .Get "attrlink" }}</a>{{- end -}}
60
+    {{- if not (eq (.Get "lightbox") "none") -}}
61
+      <div class="snap-lightbox" id="{{ $id }}">
62
+        <a href="#_" class="snap-lightbox-close"></a>
63
+        <div class="snap-lightbox-inner">
64
+          <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
65
+          <p>
66
+          {{- if or (.Get "caption") (.Get "attr") -}}
67
+            {{- .Get "caption" | markdownify -}}
68
+            {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
69
+            {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
70
+            {{- with .Get "attrlink" }}</a>{{- end -}}
71
+          {{- end }}
72
+          </p>
73
+        </div>
74
+        <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
75
+        {{- if .Parent -}}
76
+          {{- if not (eq $figid 1) -}}
77
+            <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
78
+          {{- else -}}
79
+            <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
80
+          {{- end -}}
81
+          <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
82
+          <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
70 83
         {{- end }}
71
-        </p>
72 84
       </div>
73
-      <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
74
-      {{- if .Parent -}}
75
-        {{- if not (eq $figid 1) -}}
76
-          <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
77
-        {{- else -}}
78
-          <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
79
-        {{- end -}}
80
-        <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
81
-        <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
82
-      {{- end }}
83
-    </div>
85
+    {{- end -}}
84 86
   </div>
85 87
 </figure>

+ 5
- 0
static/css/snap-gallery.css View File

@@ -56,6 +56,11 @@ figure figcaption {
56 56
   color: #FFF;
57 57
 }
58 58
 
59
+/* Extra classes for figures */
60
+figure.no-border .snap-wrapper {
61
+  box-shadow: none;
62
+}
63
+
59 64
 /** GALLERY MARKUP **/
60 65
 .snap-gallery {
61 66
   margin: 10px;

Loading…
Cancel
Save