From f2eba5b3875585c901c4a01cdf77ab6e9b4187ba Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Wed, 10 Mar 2021 09:25:37 +0100
Subject: [PATCH] added option to show image in article preview

---
 README.md              |  2 ++
 assets/scss/style.scss | 22 ++++++++++++++++++++--
 layouts/index.html     |  9 +++++++--
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 9519e85..0c9b99c 100644
--- a/README.md
+++ b/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"
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 6f4c9c7..d76099d 100644
--- a/assets/scss/style.scss
+++ b/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 {
-        hr { display: none; }
+.postlistitem.card.discrete {
+    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 {
diff --git a/layouts/index.html b/layouts/index.html
index e00dc99..7386a8f 100644
--- a/layouts/index.html
+++ b/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" . -}}