Add choice for progressive images

layouts/_default/single.html

@@ -4,7 +4,11 @@
         <div class="content">
             {{ partial "page-heading.html" . }}
             <div class="markdown">
+                {{ if .Site.Params.progressively }}
+                    {{ .Content | replaceRE "<img src=(.*)\\/(.*) alt=(.*)>" "<figure class=\"progressive\"><img class=\"progressive__img progressive--not-loaded\" data-progressive=$1/high/$2 src=$1/low/$2 alt=$3></figure>" | safeHTML }}
+                {{ else }}
                     {{ .Content }}
+                {{ end }}
             </div>
         </div>
     </div>

layouts/blog/single.html

@@ -13,7 +13,11 @@
                 </div>
             </div>
             <div class="markdown">
+                {{ if .Site.Params.progressively }}
                     {{ .Content | replaceRE "<img src=(.*)\\/(.*) alt=(.*)>" "<figure class=\"progressive\"><img class=\"progressive__img progressive--not-loaded\" data-progressive=$1/high/$2 src=$1/low/$2 alt=$3></figure>" | safeHTML }}
+                {{ else }}
+                    {{ .Content }}
+                {{ end }}
                 <br>
                 <p><a href="{{ .Section }}">Back to posts</a></p>
             </div>

layouts/partials/footer_scripts.html

@@ -9,7 +9,9 @@
   </script>
 {{ end }}
 
+{{ if .Site.Params.progressively }}
   <script src="{{ .Site.BaseURL }}js/progressively.min.js"></script>
   <script>
     progressively.init({delay: 50, throttle: 300});
   </script>
+{{ end }}

layouts/partials/head_includes.html

@@ -7,7 +7,9 @@
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/reset.css">
 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css">
 
+{{ if .Site.Params.progressively }}
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/progressively.min.css">
+{{ end }}
 
 {{range .Site.Params.extracssfiles}}
     <link rel="stylesheet" href="{{.}}">

static/css/main.css

@@ -583,9 +583,6 @@ a {
 a:hover {
   color: #2a6496;
 }
-img {
-  max-width: 100%;
-}
 img.profile {
   min-width: 100%;
 }
@@ -747,6 +744,7 @@ section.main .content .markdown figure {
 section.main .content .markdown figure img {
   height: 100%;
   width: auto;
+  max-width: 100%;
   display: block;
   position: static;
   margin: auto;
@@ -772,6 +770,10 @@ section.main .content .markdown figure img {
     width: 110%;
     margin-left: -5%;
   }
+  section.main .content .markdown img {
+    width: 110%;
+    margin-left: -5%;
+  }
 }
 section.main .content .markdown table {
   margin-bottom: 1rem;