From 591fa31b63c1750e4d3924f48e5b6266b2659970 Mon Sep 17 00:00:00 2001
From: Joe Hutchinson <hutch7995@gmail.com>
Date: Sun, 26 Jan 2020 00:30:29 -0500
Subject: [PATCH] Fix margin spacing on smallimg shortcode and add clear
 functionality

---
 README.md                          |  6 +++---
 assets/css/style.css               | 15 +++++++++++----
 layouts/shortcodes/clearfloat.html |  1 +
 layouts/shortcodes/smallimg.html   | 20 +++++++++-----------
 4 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 layouts/shortcodes/clearfloat.html

diff --git a/README.md b/README.md
index ed435bd..0071ac1 100644
--- a/README.md
+++ b/README.md
@@ -106,18 +106,18 @@ Shortcodes extend markdown to make writing easier and more powerful.
 {{< /raw >}}
 ```
 
-`image` is how you add WebP images to your posts with a fallback in case WebP is not supported. Image just needs the src and alt parameters. WebP is a next-gen image format that was created to make the web fast. To use the image shortcode simply store a WebP image with the same name in the same directory as your normal image.
+`image` is how you add WebP images to your posts with a fallback in case WebP is not supported. Image just needs the src and alt parameters. WebP is a next-gen image format that was created to make the web fast. To use the image shortcode simply store a WebP image with the same name in the same directory as your normal image.  Keep in mind that the Hugo image processing pipeline does not support resizing webp.
 
 ```html
 <!--- Will display a WebP image on supported browsers if awesome.webp exists -->
 {{<image src="awesome.jpg" alt="An awesome image that will use webp when possible. Much faster!" >}}
 ```
 
-`smallimg` allows you to add images to your posts without stretching them to be as wide as the content area.  Smallimg takes the parameters src, alt, smartfloat (optional), and width (optional). The smartfloat parameter can be set to right or left, and it floats the image to the right or left on big enough screens.
+`smallimg` allows you to add smaller images to your posts that aren't stretched to be as wide as the content area.  Smallimg takes the parameters src, alt, smartfloat (optional), width (optional, in pixels only), and clear (optional). The smartfloat parameter can be set to right or left, and it floats the image to the right or left on big enough screens. The clear parameter allows you to clear a previous float which is helpful if you are using multiple smallimgs close to each other.
 
 ```html
 <!--- smallimg will also display a WebP image on supported browsers if smile.webp exists -->
-{{<smallimg src="smile.png" alt="A big beautiful smile" smartfloat="left" width="100px">}}
+{{<smallimg src="smile.png" alt="A big beautiful smile" smartfloat="left" width="100px" clear="true" >}}
 ```
 
 ### Further Customization
diff --git a/assets/css/style.css b/assets/css/style.css
index 11629b5..32fe64b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -289,10 +289,14 @@ strong {
     padding-right: 1.2rem !important;
     box-sizing: border-box !important;
 }
+.small-pic {
+    display: block;
+    margin-top: 1.5em;
+}
 .small-img {
     width: unset;
     max-width: 100%;
-    margin: 1.5em auto;
+    margin: 0 auto 1.5em auto;
 }
 .muted-text {
     color: #7a7b7c;
@@ -309,6 +313,9 @@ strong {
     overflow: hidden;
     position: fixed;
 }
+.clear {
+    clear: both;
+}
 h1, h2, h3, h4, h5, h6 {
     margin: 1.5em 0 -0.5em 0;
     clear: both;
@@ -375,7 +382,7 @@ th {
 }
 th {
     font-family: 'LatoLatinWebHeavy';
-    font-weight: normal
+    font-weight: normal;
 }
 tr:nth-child(even) td {
     background: #f5f6f7;
@@ -456,11 +463,11 @@ footer {
     }
     .smartfloat-right {
         float: right;
-        margin: 0em 0em 1em 1em;
+        margin: 0 0 1.5em 1.5em;
     }
     .smartfloat-left {
         float: left;
-        margin: 0em 1em 1em 0em;
+        margin: 0 1.5em 1.5em 0;
     }
     code {
         border-radius: 0.2rem;
diff --git a/layouts/shortcodes/clearfloat.html b/layouts/shortcodes/clearfloat.html
new file mode 100644
index 0000000..e071ab7
--- /dev/null
+++ b/layouts/shortcodes/clearfloat.html
@@ -0,0 +1 @@
+<div style="clear: both;"></div>
\ No newline at end of file
diff --git a/layouts/shortcodes/smallimg.html b/layouts/shortcodes/smallimg.html
index 4279adc..dd75690 100644
--- a/layouts/shortcodes/smallimg.html
+++ b/layouts/shortcodes/smallimg.html
@@ -1,38 +1,36 @@
-<picture>
+<picture class="small-pic {{ if eq .Params.clear "true" -}} clear {{- end }}">
     {{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}
         <source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">
     {{- end }}
     {{ $image := $.Page.Resources.GetMatch (.Get "src") }}
     {{ if or (gt $image.Width 800) (and (isset .Params "width") (gt $image.Width (.Get "width"))) -}}
-        {{ $.Scratch.Set "imgwidth" 800 }}
-        {{ if lt (.Get "width") 800 -}}
+        {{ $.Scratch.Set "imgwidth" "800" }}
+        {{ if and (isset .Params "width") (lt (.Get "width") 800) -}}
             {{ $.Scratch.Set "imgwidth" (trim (.Get "width") "px") }}
         {{- end }}
         {{ $resized := $image.Resize (printf "%sx Lanczos" ($.Scratch.Get "imgwidth")) }}
         <source srcset="{{ $resized.Permalink }}">
-        <img src="{{ $resized.Permalink }}"
-            {{- if isset .Params "alt" }} alt="{{ .Get "alt"}}" {{ end -}}
-            class="small-img {{ if isset .Params "smartfloat" -}}
+        <img src="{{ $resized.Permalink }}" class="small-img {{ if isset .Params "smartfloat" -}}
                 {{- if eq .Params.smartfloat "left" -}}
                     smartfloat-left
                 {{- else if eq .Params.smartfloat "right" -}}
                     smartfloat-right
                 {{- end -}}
             {{- end }}"
-            {{- if isset .Params "width" }} style="width: {{ .Get "width" }};" {{- end -}}
+            {{- with .Get "alt" }} alt="{{ . }}" {{ end -}}
+            {{- with .Get "width" }} style="width: {{ . }};" {{- end -}}
         />
     {{ else }}
         <source srcset="{{ $image.Permalink }}">
-        <img src="{{ $image.Permalink }}"
-            {{- if isset .Params "alt" }} alt="{{ .Get "alt"}}" {{ end -}}
-            class="small-img {{ if isset .Params "smartfloat" -}}
+        <img src="{{ $image.Permalink }}" class="small-img {{ if isset .Params "smartfloat" -}}
                 {{- if eq .Params.smartfloat "left" -}}
                     smartfloat-left
                 {{- else if eq .Params.smartfloat "right" -}}
                     smartfloat-right
                 {{- end -}}
             {{- end }}"
-            {{- if isset .Params "width" }} style="width: {{ .Get "width" }};" {{- end -}}
+            {{- with .Get "alt" }} alt="{{ . }}" {{ end -}}
+            {{- with .Get "width" }} style="width: {{ . }};" {{- end -}}
         />
     {{- end }}
 </picture>
\ No newline at end of file