posts: Add featured image option and stream layout for widget

To use:

1. Set `list_format = 2` in `content/home/posts.md`
2. Refactor a post named `X.md` to `content/post/X/index.md`
3. Add an image named `featured.*` to your post's new folder

exampleSite/config.toml

@@ -60,7 +60,7 @@ enableGitInfo = false
 
   gravatar = false  # Get your avatar from Gravatar.com? (true/false)
   avatar = "portrait.jpg"  # Specify an avatar image (in `static/img/` folder) or delete value to disable avatar.
-  
+
   # Details for the Contact Widget
   email = "test@example.org"
   address = "Building 1 Room 1, Stanford University, California, 90210, USA"
@@ -107,7 +107,7 @@ enableGitInfo = false
 
   # Description for social sharing and search engines. If undefined, author role is used in place.
   description = ""
-  
+
   # Default image for social sharing and search engines. Place image in `static/img/` folder and specify image name here.
   sharing_image = ""
 

exampleSite/content/home/posts.md

@@ -23,6 +23,7 @@ count = 5
 # List format.
 #   0 = Simple
 #   1 = Detailed
-list_format = 1
+#   2 = Stream
+list_format = 2
 +++
 

exampleSite/content/post/getting-started.md → exampleSite/content/post/getting-started/index.md

@@ -12,8 +12,7 @@ tags = ["Academic"]
 summary = "Create a beautifully simple website or blog in under 10 minutes."
 
 [header]
-image = "headers/getting-started.png"
-caption = "Image credit: [**Academic**](https://github.com/gcushen/hugo-academic/)"
+caption = "Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)"
 
 [[gallery_item]]
 album = "1"

layouts/partials/css/academic.css

@@ -775,6 +775,39 @@ article .article-metadata {
   padding-top: 1rem;
 }
 
+/*************************************************
+ *  Stream
+ **************************************************/
+
+.media.stream-item {
+  margin-bottom: 2rem;
+}
+
+.media.stream-item .article-title {
+  font-size: 1.2rem;
+}
+
+.media.stream-item .article-style {
+  margin-top: 2px;
+  font-size: 0.8rem;
+}
+
+.media.stream-item .stream-meta {
+  margin-top: 12px;
+}
+
+.media.stream-item img {
+  max-width: 150px;
+  height: auto;
+  object-fit: cover;
+}
+
+@media screen and (max-width: 768px) {
+  .media.stream-item img {
+    max-width: 80px;
+  }
+}
+
 /*************************************************
  *  Publications
  **************************************************/

layouts/partials/header_image.html

@@ -1,4 +1,13 @@
-{{ if .Params.header.image }}
+{{ $featured := (.Resources.ByType "image").GetMatch "*featured*" }}
+{{ with $featured }}
+{{ $image := .Fill "1600x400" }}
+<div class="article-header">
+  <img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" style="width: 100%; min-height: 400px; height: auto;">
+  {{ with $.Params.header.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+</div>
+{{end}}
+
+{{ if and .Params.header.image (not $featured) }}
 <div class="article-header">
   {{ $img_src := urls.Parse .Params.header.image }}
   {{ if $img_src.Scheme }}

layouts/partials/post_li_stream.html

@@ -0,0 +1,36 @@
+{{ $post := .post }}
+
+<div class="media stream-item" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
+  <div class="media-body">
+
+    <h3 class="article-title mb-0 mt-0" itemprop="headline">
+      <a href="{{ $post.RelPermalink }}" itemprop="url">{{ $post.Title }}</a>
+    </h3>
+
+    {{ $summary := "" }}
+    {{ if $post.Params.summary }}
+      {{ $summary = $post.Params.summary | markdownify }}
+    {{ else if $post.Truncated }}
+      {{ $summary = $post.Summary }}
+    {{ end }}
+    {{ with $summary }}
+    <div class="article-style" itemprop="articleBody">
+      {{ . | truncate 135 }}
+    </div>
+    {{ end }}
+
+    <div class="stream-meta">
+    {{ partial "article_metadata" (dict "content" $post "is_list" 1) }}
+    </div>
+
+  </div>
+  <div class="ml-3">
+    {{ $resource := ($post.Resources.ByType "image").GetMatch "*featured*" }}
+    {{ with $resource }}
+    {{ $image := .Resize "150x" }}
+    <a href="{{ $post.RelPermalink }}">
+      <img src="{{ $image.RelPermalink }}" itemprop="image">
+    </a>
+    {{end}}
+  </div>
+</div>

layouts/partials/widgets/posts.html

@@ -81,8 +81,10 @@
         {{ $params := dict "post" . }}
         {{ if eq $page.Params.list_format 0 }}
           {{ partial "post_li_simple" $params }}
-        {{ else }}
+        {{ else if eq $page.Params.list_format 1 }}
           {{ partial "post_li_detailed" $params }}
+        {{ else }}
+          {{ partial "post_li_stream" $params }}
         {{ end }}
       {{end}}