mirror of
https://github.com/theNewDynamic/gohugo-theme-ananke.git
synced 2025-06-08 00:52:43 +00:00
Support static images (#362)
This commit is contained in:
Nedjo Rogers
parent
3e8a37ef60
commit
9774c78a2e
@ -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") -}}
|
||||
|
||||
@ -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 }}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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" }}">
|
||||
|
||||
@ -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" . }}
|
||||
<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 }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user