Fix margin spacing on smallimg shortcode and add clear functionality

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

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;

layouts/shortcodes/clearfloat.html

@@ -0,0 +1 @@
+<div style="clear: both;"></div>

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 }}
+        {{ $.Scratch.Set "imgwidth" "800" }}
-        {{ if lt (.Get "width") 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 }}"
+        <img src="{{ $resized.Permalink }}" class="small-img {{ if isset .Params "smartfloat" -}}
-            {{- if isset .Params "alt" }} alt="{{ .Get "alt"}}" {{ end -}}
-            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 }}"
+        <img src="{{ $image.Permalink }}" class="small-img {{ if isset .Params "smartfloat" -}}
-            {{- if isset .Params "alt" }} alt="{{ .Get "alt"}}" {{ end -}}
-            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>