mirror of
https://github.com/theNewDynamic/gohugo-theme-ananke.git
synced 2025-06-08 09:12:47 +00:00
41 lines
1.8 KiB
SCSS
41 lines
1.8 KiB
SCSS
{{- /* 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 $default_image_url "/") | absURL }}
|
|
.has-header-image {
|
|
background-image: url('{{ $default_image_url }}');
|
|
}
|
|
{{- /* 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") -}}
|
|
{{- $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 }}
|