mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git
parent: 248fd183 | patch | commit | ignore whitespace
Patrick Kollitsch
yesterday 4a0eecac2f7533dbed30716f47680737060a9c42 
fix: generate responsive hero background images
1 files modified
27 ■■■■■ changed files
layouts/_partials/page-header.html 27 ●●●●● patch | view | raw | blame | history 
 layouts/_partials/page-header.html


@@ -1,9 +1,34 @@


{{ $featured_image := partials.Include "func/GetFeaturedImage.html" . }}


{{ $featured_image_resource := partials.Include "func/GetFeaturedImageResource.html" . }}


{{ if $featured_image }}


  {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}


  {{ $featured_image_class := .Params.featured_image_class | compare.Default "cover bg-center" }}


  {{ $cover_dimming_class := .Params.cover_dimming_class | compare.Default "bg-black-60" }}


  <header class="{{ $featured_image_class }}" style="background-image: url('{{ $featured_image }}');">


  {{ $responsive_image_widths := .Site.Params.ananke.responsive_image_widths | compare.Default (slice 480 960 1440 1920) }}


  {{ $responsive_header_id := "" }}


  {{ $background_image := $featured_image }}


  {{ if and $featured_image_resource (compare.Ne $featured_image_resource.MediaType.SubType "svg") }}


    {{ $responsive_header_id = printf "featured-image-%s" (crypto.MD5 $featured_image_resource.RelPermalink) }}


    {{ range first 1 $responsive_image_widths }}


      {{ if compare.Le . $featured_image_resource.Width }}


        {{ $resized_image := $featured_image_resource.Resize (printf "%dx" .) }}


        {{ $background_image = $resized_image.RelPermalink }}


      {{ end }}


    {{ end }}


  {{ end }}


  {{ if $responsive_header_id }}


    <style>


      {{ range $responsive_image_widths }}


        {{ if compare.Le . $featured_image_resource.Width }}


          {{ $resized_image := $featured_image_resource.Resize (printf "%dx" .) }}


          @media screen and (min-width: {{ . }}px) {


            #{{ $responsive_header_id }} { background-image: url('{{ $resized_image.RelPermalink }}'); }


          }


        {{ end }}


      {{ end }}


    </style>


  {{ end }}


  <header {{ with $responsive_header_id }}id="{{ . }}" {{ end }}class="{{ $featured_image_class }}" style="background-image: url('{{ $background_image }}');">


    <div class="{{ $cover_dimming_class }}">


      {{ partials.Include "site-navigation.html" . }}


      <div class="tc-l pv6 ph3 ph4-ns">