From 9774c78a2e201de9fc60fcf6929c2c257c24da09 Mon Sep 17 00:00:00 2001 From: Nedjo Rogers Date: Sat, 16 Apr 2022 19:22:19 -0700 Subject: [PATCH] Support static images (#362) --- assets/sass/header-image.scss | 32 +++++++++++++++--------- layouts/_default/summary-with-image.html | 30 ++++++++++++++-------- layouts/partials/page-header.html | 12 ++++++--- layouts/partials/site-header.html | 12 ++++++--- layouts/partials/summary-with-image.html | 18 ++++++++----- 5 files changed, 70 insertions(+), 34 deletions(-) diff --git a/assets/sass/header-image.scss b/assets/sass/header-image.scss index b17b093..2e9e38c 100644 --- 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") -}} diff --git a/layouts/_default/summary-with-image.html b/layouts/_default/summary-with-image.html index 8a932a4..3002364 100644 --- 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" . -}}
- {{ 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 }}
- {{ $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 }} {{ $alt }} - {{ else }} + {{- else }} {{ $alt }} {{- end -}}
{{ end }} -
+

{{ .Title }} diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html index 3f71f01..973a8d8 100644 --- 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 -}}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 8e1bfe2..84ae72e 100755 --- 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 -}}
diff --git a/layouts/partials/summary-with-image.html b/layouts/partials/summary-with-image.html index dbc2760..4a1a000 100644 --- a/layouts/partials/summary-with-image.html +++ b/layouts/partials/summary-with-image.html @@ -1,20 +1,26 @@ -{{ partial "func/warn" `You are currently using 'partial "summary-with-image"' in your project templates. +{{ partial "func/warn" `You are currently using 'partial "summary-with-image"' in your project templates. You should replace it with '.Render "summary-with-image"' as the use of this partial will be deprecated in future releases. More info here: https://github.com/theNewDynamic/gohugo-theme-ananke/releases/tag/v2.8.1` }} {{ $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 }} + {{- 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 }}
- image from {{ .Title }} + image from {{ .Title }}
{{ end }} -
+

{{ .Title }}