improve size classes

README.md

@@ -41,7 +41,8 @@ Specifying your image files:
 Optional parameters:
 
 - 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 >}}`.
-- `class` allows you to set any custom classes you want on the `<figure>` tag.
+- `class` allows you to set any custom classes you want on the `<figure>` tag. The values `no-border`, `sm`, `md`, `lg`, `pull-left` and `pull-right` are made available by this project.
+- `lightbox` allows you to control the lightbox. The value `none` will disable the lightbox completely.
 
 Optional parameters work for standalone `{{< figure >}}` shortcodes and inside of `{{< gallery >}}`. However, they cannot be applied to `{{< snap-dir >}}`.
 

layouts/shortcodes/figure.html

@@ -33,13 +33,14 @@
 {{- end -}}
 
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+  <div class="snap-wrapper">
     {{ if (.Get "link") -}}
       <a href="{{ .Get "link" }}"
          {{- with .Get "target" }} target="{{ . }}"{{ end -}}
          {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
          >
     {{ else -}}
-    <a href="#{{ $id }}">
+      {{ if not (eq (.Get "lightbox") "none") }}<a href="#{{ $id }}">{{ end }}
     {{- end -}}
     <!-- THUMBNAIL -->
       <img src="{{ $thumb | relURL }}" class="snap-thumb"
@@ -56,6 +57,7 @@
       {{- end }}
     </a>
     <!-- FULL IMAGE; HIDDEN -->
+    {{- if not (eq (.Get "lightbox") "none") -}}
       <div class="snap-lightbox" id="{{ $id }}">
         <a href="#_" class="snap-lightbox-close"></a>
         <div class="snap-lightbox-inner">
@@ -80,4 +82,6 @@
           <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
         {{- end }}
       </div>
+    {{- end -}}
+  </div>
 </figure>

static/css/snap-gallery.css

@@ -7,10 +7,15 @@
 
 figure {
   max-width: 90%;
-  margin: 30px auto 40px;
+  margin: 10px auto;
   display: block;
   text-align: center;
+}
+
+/* make box with box-shadow only as large as image */
+.snap-wrapper {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  display: inline-block;
 }
 
 figure a:hover {
@@ -22,12 +27,16 @@ figure img {
   max-height: 100%;
 }
 
-figure.small img {
+figure.sm {
-  max-height: 150px;
+  max-width: 30%;
 }
 
-figure.medium img {
+figure.md {
-  max-height: 225px;
+  max-width: 50%;
+}
+
+figure.lg {
+  max-width: 70%;
 }
 
 figure.pull-right {
@@ -51,6 +60,11 @@ figure figcaption {
   color: #FFF;
 }
 
+/* Extra classes for figures */
+figure.no-border .snap-wrapper {
+  box-shadow: none;
+}
+
 /** GALLERY MARKUP **/
 .snap-gallery {
   margin: 10px;
@@ -59,6 +73,11 @@ figure figcaption {
   flex-wrap: wrap;
 }
 
+/* avoid sick effects of inline-block on gallery elements */
+.snap-gallery .snap-wrapper {
+  display: block;
+} 
+
 .snap-gallery figure {
   position: relative;
   width: 30%;