mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git
parent: ddfc42c7 | patch | commit | show whitespace
Patrick Kollitsch
2 days ago 9570264992f1f4923255bd8522a99c5552595d65 
fix: generate responsive hero background images (#970)

Fixes #362 by generating responsive hero background image CSS when the
featured image is available as a Hugo Page Resource.

* Adds `layouts/_partials/func/GetFeaturedImageResource.html` to resolve
the same featured-image candidates as a Hugo image resource.
* Updates `layouts/_partials/page-header.html` to generate resized hero
background images with media queries.
* Adds the optional `[params.ananke] responsive_image_widths` setting,
defaulting to `[480, 960, 1440, 1920]`.
* Keeps the existing behaviour for static paths, remote paths, SVG
files, and images Hugo cannot resize.

Documentation PR: gohugo-ananke/documentation#14

* Checked issue #362 and its comments, including the earlier unmerged PR
* Checked `CONTRIBUTING.md` and used the required `development` base
branch.
* Compared `issues/362` against `development`; the branch is cleanly
ahead by two commits and behind by zero commits.
* Unable to run a local Hugo build in this environment because direct
`git clone` failed with DNS resolution for `github.com`; verified
changes by repository API inspection and compare output instead.

This implementation is intentionally narrower than the older closed PR
and avoids changing summary images or the figure shortcode.
1 files modified
1 files added
72 ■■■■■ changed files
layouts/_partials/func/GetFeaturedImageResource.html 45 ●●●●● patch | view | raw | blame | history
layouts/_partials/page-header.html 27 ●●●●● patch | view | raw | blame | history 
 layouts/_partials/func/GetFeaturedImageResource.html


New file


@@ -0,0 +1,45 @@


{{/*


    GetFeaturedImageResource




    This partial gets the featured image resource for a given page.




    If a featured_image was set in the page's front matter and it matches a page


    resource, then that resource will be used.




    If no featured_image was set, this will use the first matching page resource from


    the page's images front matter array.




    If not set, this will search page resources to find an image that contains the word


    "cover" or "feature", and if found, returns that resource.




    If no matching page resource can be found, this partial returns false.




    @return Featured image resource, or false if not found.




*/}}




{{ $resource := false }}


{{ $matches := "feature,cover" }}


{{ with .Params.featured_image }}


  {{ with $.Resources.GetMatch . }}


    {{ $resource = . }}


  {{ end }}


{{ else }}


  {{ with .Params.images }}


    {{ range first 1 . }}


      {{ with . }}


        {{ with $.Resources.GetMatch . }}


          {{ $resource = . }}


        {{ end }}


      {{ end }}


    {{ end }}


  {{ else }}


    {{ with .Resources.ByType "image" }}


      {{ with .GetMatch (fmt.Printf "**{%s}*" $matches) }}


        {{ $resource = . }}


      {{ end }}


    {{ end }}


  {{ end }}


{{ end }}




{{ return $resource }}




 layouts/_partials/page-header.html


@@ -1,10 +1,35 @@


{{ $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_section_class := .Param "header_section_class" | compare.Default "tc-l pv6 ph3 ph4-ns" }}


  <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="{{ $header_section_class }}">