Support static images (#362)

2025-06-08 09:12:47 +00:00 · 2022-04-16 19:22:19 -07:00 · 2022-04-16 19:22:19 -07:00 · 9774c78a2e
commit 9774c78a2e
parent 3e8a37ef60
5 changed files with 70 additions and 34 deletions
--- a/assets/sass/header-image.scss
+++ b/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 -}}
-{{- /* If breakpoints are defined, provide a resized image for each */ -}}
-{{- $anchor := .Params.featured_image_data.anchor | default "Top" -}}
-{{- /* Default header image height is approximately 500px */ -}}
-{{- $height := 500 -}}
-{{- /* If there's a description, the header is taller */ -}}
-{{- if .Description -}}
-  {{- $height = add $height 100 -}}
-{{- end -}}
-{{- with .Site.Params.breakpoints -}}
-  {{- range $breakpoint := . -}}
+{{- /* Responsive background images require both a featured image resource and breakpoints */ -}}
+{{- if and $featured_image .Site.Params.breakpoints -}}
+  {{- $scratch := newScratch -}}
+  {{- $anchor := .Params.featured_image_data.anchor | default "Top" -}}
+  {{- /* Default header image height is approximately 500px */ -}}
+  {{- $height := 500 -}}
+  {{- /* If there's a description, the header is taller */ -}}
+  {{- if .Description -}}
+    {{- $height = add $height 100 -}}
+  {{- end -}}
+  {{- /* Provide a resized image for each 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") -}}
--- a/layouts/_default/summary-with-image.html
+++ b/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" .) }}
-            {{- /* 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) }}
-            {{ with $srcset }}
+            {{- $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) -}}
+            {{- 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 }}
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@ -1,8 +1,14 @@
 {{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
-{{- if $featured_image -}}
-  {{- .Scratch.Set "featured_image" $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">
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@ -1,8 +1,14 @@
 {{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
-{{- if $featured_image }}
-  {{- .Scratch.Set "featured_image" $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" }}">
--- a/layouts/partials/summary-with-image.html
+++ b/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 }}
-          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-        {{ $featured_image := (trim $featured_image "/") | absURL }}
+      {{- 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 $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 }}