added option to show image in article preview

README.md

@@ -31,6 +31,8 @@ paginate = 5  # number of articles per page in the index
     favicon = "/images/myfavicon.png"
     showTags = true  # show the Tags menu item; default true
     showRss = true  # show the link for the RSS feed; default true
+    
+    imageInArticlePreview = false  # show images in article preview; default false
 
     navtype = "standard"  # changes the style of the pagination, available styles are: "standard", "circle"
     fontFamily = "JetBrains Mono"  # changes the font, default "JetBrains Mono"

assets/scss/style.scss

@@ -257,8 +257,26 @@ h1, h2, h3, h4, h5, h6 {
 
 // only hide hr in cards if they are in the article list
 // cards in list are divs, cards as in full-blown articles use the article tag
-div.card.discrete {
+.postlistitem.card.discrete {
-        hr { display: none; }
+    hr { display: none; }
+}
+
+.postlistitem.card {
+    img {
+        margin: 15px auto;
+    }
+}
+
+@media only screen and (min-width: 500px) {
+    .postlistitem.card {
+        img {
+            max-width: 250px;
+            float: left;
+            margin-right: 15px;
+            margin-bottom: 15px;
+        }
+        overflow: auto; // clearfix
+    }
 }
 
 ul {

layouts/index.html

@@ -6,7 +6,7 @@
 
     {{/* pagination */}}
     {{ range (.Paginate $postsList).Pages }}
-        <div class="card {{ if .Site.Params.discreteCards }}discrete{{ end }}">
+        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
             <h2>
                 <a href="{{ .Permalink }}">{{ .Title }}</a>
             </h2>
@@ -21,12 +21,17 @@
                     {{ end }}
                 {{ end }}
             </p>
+            {{ if .Site.Params.imageInArticlePreview }}
+                {{ if .Params.Image }}
+                    <img src="{{ .Params.Image }}" />
+                {{ end }}
+            {{end}}
             <div class="articlePreview">
                 {{ .Summary }}
                 <a href="{{ .Permalink }}">Continue reading </a>
             </div>
             <hr />
-        </div>
+        </article>
     {{ end }}
     {{- partial "paginator.html" . -}}