yacloud/gohugo-theme-ananke
1
0
Fork 0
mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git synced 2025-06-08 17:22:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use asset files for header background images (#362)

Browse Source
This commit is contained in:
Nedjo Rogers 2022-04-13 15:15:45 -07:00
parent 3e01b66d29
commit d659d81351
4 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/sass/header-image.scss Normal file
View File

@ -0,0 +1,32 @@
{{- $featured_image := .Scratch.Get "featured_image" }}
{{- /* 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 }}
.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 := . -}}
{{- /* 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") -}}
{{- $options := print $breakpoint "x" $height " " $anchor -}}
{{- $breakpoint_image = $breakpoint_image.Crop ($options) -}}
{{- $breakpoint_image_url := (trim $breakpoint_image.RelPermalink "/") | absURL }}
@media only screen and (max-width: {{ $breakpoint }}px) {
.has-header-image {
background-image: url('{{ $breakpoint_image_url }}');
}
}
{{- end -}}
{{- end -}}
{{- end }}

34
layouts/partials/header-image-style.html
View File

@ -1,34 +0,0 @@
{{- $featured_image := .Scratch.Get "featured_image" }}
<style type="text/css">
{{- /* 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 }}
.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 := . -}}
{{- /* 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") -}}
{{- $options := print $breakpoint "x" $height " " $anchor -}}
{{- $breakpoint_image = $breakpoint_image.Crop ($options) -}}
{{- $breakpoint_image_url := (trim $breakpoint_image.RelPermalink "/") | absURL }}
@media only screen and (max-width: {{ $breakpoint }}px) {
.has-header-image {
background-image: url('{{ $breakpoint_image_url }}');
}
}
{{- end -}}
{{- end -}}
{{- end }}
</style>

4
layouts/partials/page-header.html
View File

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

4
layouts/partials/site-header.html
View File

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