Add automatic cover image support (#303)

* Add support for auto-detection of featured images.

* Rename Partial, Add Documentation

Renamed the partial to func/GetFeaturedImage.html.

Additionally added more documentation in the partial to explain how it
worked, and what values were returned.

Co-authored-by: Sean Zimmermann <[email protected]>

layouts/partials/func/GetFeaturedImage.html

@@ -0,0 +1,35 @@
+{{/* 
+    GetFeaturedImage
+
+    This partial gets the url for featured image for a given page. 
+
+    If a featured_image was set in the page's front matter, then that will be used.
+
+    If not set, this will search page resources to find an image that contains the word
+    "cover", and if found, returns the path to that resource.
+
+    If no featured_image was set, and there's no "cover" image in page resources, then
+    this partial returns an empty string (which evaluates to false).
+
+    @return Permalink to featured image, or an empty string if not found.
+
+*/}}
+
+{{/* Declare a new string variable, $linkToCover */}}
+{{ $linkToCover := "" }}
+
+{{/* Use the value from front matter if present */}}
+{{ if .Params.featured_image }}
+    {{ $linkToCover = .Params.featured_image }}
+
+{{/* Find the first image with 'cover' in the name in this page bundle. */}}
+{{ else }}
+    {{ $img := (.Resources.ByType "image").GetMatch "*cover*" }}
+    {{ with $img }}
+        {{ $linkToCover = .Permalink }}
+    {{ end }}
+{{ end }}
+
+{{/* return either a permalink, or an empty string. Note that partials can only have a single
+return statement, so this needs to be at the end of the partial (and not in the if block) */}}
+{{ return $linkToCover }}

layouts/partials/page-header.html

@@ -1,4 +1,4 @@
-{{ $featured_image := .Params.featured_image }}
+{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
   {{ $featured_image := (trim $featured_image "/") | absURL }}

layouts/partials/summary-with-image.html

@@ -1,8 +1,8 @@
-{{ $featured_image := .Params.featured_image }}
+{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 <article class="bb b--black-10">
   <div class="db pv4 ph3 ph0-l no-underline dark-gray">
     <div class="flex flex-column flex-row-ns">
-      {{ if .Params.featured_image }}
+      {{ if $featured_image }}
           {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
         {{ $featured_image := (trim $featured_image "/") | absURL }}
         <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
@@ -11,7 +11,7 @@
           </a>
         </div>
       {{ end }}
-      <div class="blah w-100{{ if .Params.featured_image }} w-60-ns pl3-ns{{ end }}">
+      <div class="blah w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
         <h1 class="f3 fw1 athelas mt0 lh-title">
           <a href="{{.Permalink}}" class="color-inherit dim link">
             {{ .Title }}

layouts/post/summary-with-image.html

@@ -1,12 +1,13 @@
 <article class="bb b--black-10">
   <a class="db pv4 ph3 ph0-l no-underline dark-gray dim" href="{{ .Permalink }}">
     <div class="flex flex-column flex-row-ns">
-      {{ if .Params.featured_image }}
+      {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+      {{ if $featured_image }}
         <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
-          <img src="{{ .Params.featured_image }}" class="db" alt="image from {{ .Title }}">
+          <img src="{{ $featured_image }}" class="db" alt="image from {{ .Title }}">
         </div>
       {{ end }}
-      <div class="w-100{{ if .Params.featured_image }} w-60-ns pl3-ns{{ end }}">
+      <div class="w-100{{ if $featured_image }} w-60-ns pl3-ns{{ end }}">
         <h1 class="f3 fw1 athelas mt0 lh-title">{{ .Title }}</h1>
         <div class="f6 f5-l lh-copy nested-copy-line-height">
           {{ .Summary }}