Add the ability to feature an image in an article on list pages

archetypes/blog/index.md

@@ -11,4 +11,10 @@ Lorem ipsum
 tags = [
   "awesome",
 ]
+
+# this image will be shown for the article in list pages
+[[resources]]
+name = "feature"
+src = "gui.webp"
+title = "Checkra1n GUI running on Arch Linux"
 +++

assets/css/bobastyle.css

@@ -7,13 +7,17 @@
   margin-bottom: 10px;
 }
 
+.post-title a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
 .post-description {
   padding-top: 10px;
 }
 
-.post-title a {
-  color: inherit;
-  text-decoration: inherit;
+.post-image {
+  padding-top: 15px;
 }
 
 .readmore {
@@ -82,6 +86,11 @@ body {
   max-width: 720px;
 }
 
+img:not(.noborder) {
+  padding: 5px;
+  border: 5px solid #1b5b9b;
+}
+
 a {
   color: #4da6ff;
   text-decoration: inherit;

layouts/_default/list.html

@@ -66,6 +66,12 @@
     </div>
     {{ end }}
 
+    {{ with .Resources.GetMatch "feature" }}
+    <div class="post-image">
+        <img src="{{ .Permalink }}" alt="{{ .Title }}" />
+    </div>
+    {{ end }}
+
     <div class="post-description">
         {{ if .Description }}
         {{ .Description | markdownify }}