Support static images (#362)

assets/sass/header-image.scss

@@ -1,21 +1,29 @@
+{{- /* Use a featured image resource if available and otherwise a featured_image string */ -}}
 {{- $featured_image := .Scratch.Get "featured_image" }}
+{{- $default_image_url := "" -}}
+{{- with $featured_image -}}
+  {{- $default_image_url = .RelPermalink -}}
+{{- else -}}
+  {{- $default_image_url = .Params.featured_image -}}
+{{- end -}}
 {{- /* Default to the full size image */ -}}
 {{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
-{{- $default_image_url := (trim $featured_image.RelPermalink "/") | absURL }}
+{{- $default_image_url := (trim $default_image_url "/") | absURL }}
 .has-header-image {
   background-image: url('{{ $default_image_url }}');
 }
-{{ $scratch := newScratch -}}
+{{- /* Responsive background images require both a featured image resource and breakpoints */ -}}
-{{- /* If breakpoints are defined, provide a resized image for each */ -}}
+{{- if and $featured_image .Site.Params.breakpoints -}}
-{{- $anchor := .Params.featured_image_data.anchor | default "Top" -}}
+  {{- $scratch := newScratch -}}
-{{- /* Default header image height is approximately 500px */ -}}
+  {{- $anchor := .Params.featured_image_data.anchor | default "Top" -}}
-{{- $height := 500 -}}
+  {{- /* Default header image height is approximately 500px */ -}}
-{{- /* If there's a description, the header is taller */ -}}
+  {{- $height := 500 -}}
-{{- if .Description -}}
+  {{- /* If there's a description, the header is taller */ -}}
+  {{- if .Description -}}
     {{- $height = add $height 100 -}}
-{{- end -}}
+  {{- end -}}
-{{- with .Site.Params.breakpoints -}}
+  {{- /* Provide a resized image for each breakpoint */ -}}
-  {{- range $breakpoint := . -}}
+  {{- range $breakpoint := .Site.Params.breakpoints -}}
     {{- /* Default mobile breakpoint for Tachyons is 480 */ -}}
     {{- if and (ge $breakpoint 480) (ge $featured_image.Width $breakpoint) -}}
       {{- $breakpoint_image := $featured_image.Resize (print $breakpoint "x") -}}

layouts/_default/summary-with-image.html

@@ -1,25 +1,35 @@
-{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+{{- $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 $featured_image -}}
+      {{- if or $featured_image .Params.featured_image -}}
+        {{- $default_image_url := "" -}}
+        {{- with $featured_image -}}
+          {{- $default_image_url = .RelPermalink -}}
+        {{- else -}}
+          {{- $default_image_url = .Params.featured_image -}}
+        {{- end -}}
         {{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
-        {{- $default_image_url := (trim $featured_image.RelPermalink "/") | absURL }}
+        {{- $default_image_url := (trim $default_image_url "/") | absURL }}
         <div class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }} mb4 mb0-ns w-100 w-40-ns">
           <a href="{{.RelPermalink}}" class="db grow">
-            {{ $alt := .Params.featured_image_data.alt | default (i18n "imgAltFromTitle" .) }}
+            {{- $alt := .Params.featured_image_data.alt | default (i18n "imgAltFromTitle" .) -}}
+            {{- $srcset := slice -}}
+            {{- /* An image srcset requires both a featured image resource and breakpoints */ -}}
+            {{- if and $featured_image .Site.Params.breakpoints -}}
               {{- /* Standard width of image div is 40% (w-40-ns) of a 70% container (w-70-ns) */ -}}
               {{- $target_width := 0.28 -}}
-            {{ $srcset := partial "func/GetImageSrcset" (dict "original" $featured_image "target_width" $target_width) }}
+              {{- $srcset = partial "func/GetImageSrcset" (dict "original" $featured_image "target_width" $target_width) -}}
-            {{ with $srcset }}
+            {{- end -}}
+            {{- with $srcset }}
               <img src="{{ $default_image_url }}" srcset="{{ delimit $srcset ", " }}" class="img" alt="{{ $alt }}">
-            {{ else }}
+            {{- else }}
               <img src="{{ $default_image_url }}" class="img" alt="{{ $alt }}">
             {{- end -}}
           </a>
         </div>
       {{ end }}
-      <div class="blah w-100{{ if $featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
+      <div class="blah w-100{{ if or $featured_image .Params.featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
         <h1 class="f3 fw1 athelas mt0 lh-title">
           <a href="{{.RelPermalink}}" class="color-inherit dim link">
             {{ .Title }}

layouts/partials/page-header.html

@@ -1,8 +1,14 @@
 {{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
-{{- if $featured_image -}}
+{{- if or $featured_image .Params.featured_image -}}
+  {{- $featured_image_link := "" -}}
+  {{- if $featured_image -}}
     {{- .Scratch.Set "featured_image" $featured_image -}}
+    {{- $featured_image_link = $featured_image.RelPermalink -}}
+  {{- else -}}
+    {{- $featured_image_link = .Params.featured_image -}}
+  {{- end -}}
   {{- $sassTemplate := resources.Get "sass/header-image.scss" -}}
-  {{- $style := $sassTemplate | resources.ExecuteAsTemplate (print ($featured_image.RelPermalink | base64Encode) "header-image.scss") . | resources.ToCSS -}}
+  {{- $style := $sassTemplate | resources.ExecuteAsTemplate (print ($featured_image_link | base64Encode) "header-image.scss") . | resources.ToCSS -}}
   <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
   <header class="cover bg-top has-header-image">
     <div class="bg-black-60">

layouts/partials/site-header.html

@@ -1,8 +1,14 @@
 {{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
-{{- if $featured_image }}
+{{- if or $featured_image .Params.featured_image -}}
+  {{- $featured_image_link := "" -}}
+  {{- if $featured_image -}}
     {{- .Scratch.Set "featured_image" $featured_image -}}
+    {{- $featured_image_link = $featured_image.RelPermalink -}}
+  {{- else -}}
+    {{- $featured_image_link = .Params.featured_image -}}
+  {{- end -}}
   {{- $sassTemplate := resources.Get "sass/header-image.scss" -}}
-  {{- $style := $sassTemplate | resources.ExecuteAsTemplate (print ($featured_image.RelPermalink | base64Encode) "header-image.scss") . | resources.ToCSS -}}
+  {{- $style := $sassTemplate | resources.ExecuteAsTemplate (print ($featured_image_link | base64Encode) "header-image.scss") . | resources.ToCSS -}}
   <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
   <header class="cover bg-top has-header-image">
     <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">

layouts/partials/summary-with-image.html

@@ -5,16 +5,22 @@ More info here: https://github.com/theNewDynamic/gohugo-theme-ananke/releases/ta
 <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 $featured_image }}
+      {{- if or $featured_image .Params.featured_image -}}
-          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+        {{- $default_image_url := "" -}}
-        {{ $featured_image := (trim $featured_image "/") | absURL }}
+        {{- with $featured_image -}}
+          {{- $default_image_url = .RelPermalink -}}
+        {{- else -}}
+          {{- $default_image_url = .Params.featured_image -}}
+        {{- end -}}
+        {{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
+        {{- $default_image_url := (trim $default_image_url "/") | absURL }}
         <div class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }} mb4 mb0-ns w-100 w-40-ns">
           <a href="{{.RelPermalink}}" class="db grow">
-            <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+            <img src="{{ $default_image_url }}" class="img" alt="image from {{ .Title }}">
           </a>
         </div>
       {{ end }}
-      <div class="blah w-100{{ if $featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
+      <div class="blah w-100{{ if or $featured_image .Params.featured_image }} w-60-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr3-ns" "pl3-ns" }}{{ end }}">
         <h1 class="f3 fw1 athelas mt0 lh-title">
           <a href="{{.RelPermalink}}" class="color-inherit dim link">
             {{ .Title }}