added thumbnail to posts page

config.toml

@@ -22,7 +22,7 @@ DefaultContentLanguage           = "en"                    # Default language fo
         introHeight              = "fullheight"            # Input either "medium" or "large" or "fullheight"
         showLatest               = false                    # Show latest blog post summary
         showAllPosts             = false                   # Set true to list all posts on home page, or set false to link to separate blog list page
-        allPostsArchiveFormat    = true                    # show all posts in an archive format
+        allPostsArchiveFormat    = false                    # show all posts in an archive format
         numberOfProjectsToShow   = 0                       # Maximum number of projects to show on home page. Unset or comment out to show all projects
         localTime                = false                    # Show your current local time in contact section
         timeZone                 = "America/Los_Angeles"   # Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

content/blog/PrettyRivers/index.md

@@ -1,6 +1,7 @@
 +++
 date = '2024-01-01T19:13:02Z'
 title = 'Pretty rivers'
+image = 'wisconsin_rivers.png'
 +++
 
 I like maps that isolate different natural features. And I think that rivers make pretty patterns. So I made a series of scripts that generates a pretty map of rivers. I hope to print the maps of places that are important to me as art.

content/blog/RiverLevelCharts/index.md

@@ -1,6 +1,7 @@
 +++
 date = '2024-10-14T19:13:18Z'
 title = 'River level charts'
+image = 'example_last_6_months.png'
 +++
 
 I'm interested in rivers (both ecologically and recreationally) and I want to know

layouts/blog/list.html

@@ -0,0 +1,31 @@
+{{ define "main" }}
+<div class="container markdown top-pad">
+    {{ .Content }}
+</div>
+<div class="container">
+    {{ if .Site.Params.home.showLatest | default true }}
+    <h2 class="title is-2 top-pad">{{ i18n "index_blog_latestPosts" . }}</h2>
+    {{ range first 1 .Pages.ByPublishDate.Reverse }}
+    <div class="summary">
+        {{ if .Params.date }}{{ .Date.Format (.Site.Params.dateFormat | default ":date_medium") }}{{ end }}
+        <h3 class="title is-3 strong-post-title">
+            <a href="{{ .Permalink }}">
+                {{ .Title | markdownify }}
+            </a>
+        </h3>
+        <div class="markdown">
+            {{ .Summary }}
+            {{ if .Truncated }}
+            <a href="{{ .Permalink }}">{{ i18n "index_blog_readMore" . }}</a>
+            {{ end }}
+        </div>
+    </div>
+    {{ end }}
+    {{ end }}
+    {{if .Site.Params.home.allPostsArchiveFormat}}
+    {{ partialCached "blog/archive.html" .}}
+    {{else}}
+        {{ partialCached "blog/li.html" . }}
+        {{end}}
+</div>
+{{ end }}

layouts/partials/blog/li.html

@@ -0,0 +1,29 @@
+{{ range .Pages.ByPublishDate.Reverse }}
+{{ $post := . }}
+<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
+    {{ with .Params.image }}
+        {{ with $post.Resources.GetMatch . }}
+            {{ with .Resize "400x" }}
+                <div style="flex-shrink: 0;">
+                    <a href="{{ $post.Permalink }}">
+                        <img src="{{ .Permalink }}" alt="{{ $post.Title }}" style="max-width: 300px; height: auto; border-radius: 4px;">
+                    </a>
+                </div>
+            {{ end }}
+        {{ end }}
+    {{ end }}
+    <div style="flex-grow: 1;">
+        <h3 class="title is-4" style="margin-bottom: 0.5rem;">
+            <a href="{{ $post.Permalink }}">{{ $post.Title | markdownify }}</a>
+        </h3>
+        {{ if $post.Params.date }}
+        <p class="has-text-grey" style="margin-bottom: 0.5rem;">
+            {{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }}
+        </p>
+        {{ end }}
+        {{ if $post.Summary }}
+        <p>{{ $post.Summary | truncate 150 }}</p>
+        {{ end }}
+    </div>
+</div>
+{{ end }}

public/blog/index.html

@@ -139,46 +139,67 @@ Posts - Dendroalsia
 </div>
 <div class="container">
     
-    <h2 class="title is-2 top-pad">All Posts</h2>
-    
-    <section>
     
         
 
+<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
     
         
             
+                <div style="flex-shrink: 0;">
+                    <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">
+                        <img src="https://www.dendroalsia.net/blog/riverlevelcharts/example_last_6_months_hu_3ee8d3a026ad5207.png" alt="River level charts" style="max-width: 300px; height: auto; border-radius: 4px;">
+                    </a>
+                </div>
             
         
     
+    <div style="flex-grow: 1;">
+        <h3 class="title is-4" style="margin-bottom: 0.5rem;">
+            <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a>
+        </h3>
+        
+        <p class="has-text-grey" style="margin-bottom: 0.5rem;">
+            Oct 14, 2024
+        </p>
+        
+        
+        <p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p>
+<ul>
+<li>what water level different rivers are currently at</li>
+<li>how does …</li></ul></p>
+        
+    </div>
+</div>
+
+
+<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
     
         
             
-    
-    <h2 class="title is-2 top-pad">2024</h2>
-    
-    <li class="post-item">
-        
-        <span>Oct 14, 2024</span> -
-        
-        <span><a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a></span>
-    </li>
+                <div style="flex-shrink: 0;">
+                    <a href="https://www.dendroalsia.net/blog/prettyrivers/">
+                        <img src="https://www.dendroalsia.net/blog/prettyrivers/wisconsin_rivers_hu_d6e96c96b70bfc8f.png" alt="Pretty rivers" style="max-width: 300px; height: auto; border-radius: 4px;">
+                    </a>
+                </div>
             
         
     
+    <div style="flex-grow: 1;">
+        <h3 class="title is-4" style="margin-bottom: 0.5rem;">
+            <a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a>
+        </h3>
+        
+        <p class="has-text-grey" style="margin-bottom: 0.5rem;">
+            Jan 1, 2024
+        </p>
         
         
+        <p><p>I like maps that isolate different natural features. And I think that rivers make pretty patterns. So I made a series of scripts that generates a …</p></p>
         
-    <li class="post-item">
+    </div>
+</div>
 
-        <span>Jan 1, 2024</span> -
-        
-        <span><a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a></span>
-    </li>
-    
-    
-    
-</section>
 
         
 </div>

public/blog/prettyrivers/index.html

@@ -166,6 +166,8 @@ Pretty Rivers - Dendroalsia
     
     
     
+    
+    
 </div>
 
 <div class="container markdown top-pad">

public/blog/riverlevelcharts/index.html

@@ -166,6 +166,8 @@ River Level Charts - Dendroalsia
     
     
     
+    
+    
 </div>
 
 <div class="container markdown top-pad">