feat: add cover images

layouts/index.html

@@ -7,7 +7,7 @@
     {{ range $paginator.Pages }}
         {{ $title := .Title }}
         {{ $summary := .Summary }}
-        <section class="item">
+        <!-- <section class="item">
           <div>
             <h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>   
             <div class="date">{{ .Date.Format "Jan 2" }}</div>
@@ -15,8 +15,6 @@
 
           <div class="summary">{{ $summary | plainify | htmlUnescape }}</div>
 
-
-
           {{ with .Resources.ByType "image" }}
             {{ $image := index . 1 }}  
             {{ range .  }}
@@ -33,6 +31,49 @@
               <img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
             </div>
           {{ end }}
+        </section> -->
+
+
+        <section class="item">
+          
+          {{ if .Resources.ByType "image" }}
+          <!-- with cover image -->
+
+              {{ $images := .Resources.ByType "image" }}
+              {{ $image := index $images 1 }}
+              {{ range .Resources.ByType "image"  }}
+                  {{ if eq .Name "images/cover.png" }} 
+                      {{ $image = . }}
+                  {{ else if eq .Name "images/cover.jpg" }}
+                      {{ $image = . }}
+                  {{ else if eq .Name "images/cover.jpeg" }}
+                      {{ $image = . }}
+                  {{ end }}
+              {{ end }}
+
+
+              <div class="left">
+                <h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>
+                <div class="summary">{{ $summary | plainify | htmlUnescape }}</div>
+              </div>
+
+              <div class="right">
+                <img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
+              </div>
+          {{ else }}
+          <!-- no cover image -->
+
+              <div>
+                <h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>   
+                <div class="date">{{ .Date.Format "Jan 2" }}</div>
+              </div>
+
+              <div class="summary">{{ $summary | plainify | htmlUnescape }}</div>
+
+          {{ end }}
+
+  
+
 
         </section>
     {{ end }}

static/css/style.css

@@ -224,7 +224,7 @@ nav.navigation a.button {
 
 
 /* index post list */
-#list-page .item {
+/* #list-page .item {
   margin: 48px 0 0 0;
 }
 
@@ -252,7 +252,7 @@ nav.navigation a.button {
 }
 
 #list-page .summary {
-  color: #6a737d;
+  color: #8c8c8c;
   margin-top: 12px;
 }
 
@@ -265,4 +265,20 @@ nav.navigation a.button {
 #list-page .cover img {
   width: 100%;
   text-align: center;
+} */
+
+#list-page .item {
+  display: inline-block;
+}
+
+#list-page .item .left {
+  float: left;
+}
+#list-page .item .right {
+  float: right;
+  width: 200px;
+  min-width: 200px;
+  max-height: 150px;
+  border-radius: 4px;
+  overflow: hidden;
 }