Make images responsive (#362)

exampleSite/config.toml

@@ -35,6 +35,8 @@ enableRobotsTXT = true
   # choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
   background_color_class = "bg-black"
   recent_posts_number = 3
+  # Use defaults from tailwindcss, https://tailwindcss.com/docs/responsive-design.
+  breakpoints = [640,768,1024,1280,1536]
 
 [[params.ananke_socials]]
 name = "twitter"

exampleSite/content/en/about/index.md

@@ -2,6 +2,11 @@
 title: "About"
 description: "A few years ago, while visiting or, rather, rummaging about Notre-Dame, the author of this book found, in an obscure nook of one of the towers, the following word, engraved by hand upon the wall: —ANANKE."
 featured_image: '/images/Victor_Hugo-Hunchback.jpg'
+featured_image_data:
+  # Used as a setting when cropping the featured image for use in the header.
+  # See valid values at https://gohugo.io/content-management/image-processing/#anchor.
+  anchor: "Center"
+  alt: "Illustration from Victor Hugo et son temps (1881). Drawing of the Hunchback of Notre Dame, showing the recently restored galerie des chimères."
 menu:
   main:
     weight: 1

i18n/en.toml

@@ -7,6 +7,9 @@ other = "All {{.Title }}"
 [recentTitle]
 other = "Recent {{.Title }}"
 
+[imgAltFromTitle]
+other = "Image from {{.Title }}"
+
 [readMore]
 other = "read more"
 

i18n/es.toml

@@ -7,6 +7,9 @@ other = "Todos los {{.Title }}"
 [recentTitle]
 other = "{{.Title }} recientes"
 
+[imgAltFromTitle]
+other = "Imagen de {{.Title }}"
+
 [readMore]
 other = "Leer más"
 

i18n/fr.toml

@@ -7,6 +7,9 @@ other = "Tous les {{.Title }}"
 [recentTitle]
 other = "{{.Title }} récents"
 
+[imgAltFromTitle]
+other = "Image de {{.Title }}"
+
 [readMore]
 other = "lire plus"
 

layouts/_default/summary-with-image.html

@@ -2,12 +2,20 @@
 <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 $featured_image -}}
-          {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+        {{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
-        {{ $featured_image := (trim $featured_image "/") | absURL }}
+        {{- $default_image_url := (trim $featured_image.RelPermalink "/") | 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 }}">
+            {{ $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 }}
+              <img src="{{ $default_image_url }}" srcset="{{ delimit $srcset ", " }}" class="img" alt="{{ $alt }}">
+            {{ else }}
+              <img src="{{ $default_image_url }}" class="img" alt="{{ $alt }}">
+            {{- end -}}
           </a>
         </div>
       {{ end }}

layouts/partials/func/GetFeaturedImage.html

@@ -1,7 +1,7 @@
 {{/*
 	GetFeaturedImage
 
-	This partial gets the url for featured image for a given page.
+	This partial gets the featured image for a given page.
 
 	If a featured_image was set in the page's front matter, then that will be used.
 
@@ -9,31 +9,30 @@
 	"cover", and if found, returns the path to that resource.
 
 	If no featured_image was set, and there's no "cover" image in page resources, then
-	this partial returns an empty string (which evaluates to false).
+	this partial returns false.
 
 	@return RelPermalink to featured image, or an empty string if not found.
 
 */}}
 
-{{/* Declare a new string variable, $linkToCover */}}
+{{/* Declare a new variable, $coverImage */}}
-{{ $linkToCover := "" }}
+{{ $coverImage := false }}
 {{ $matches := "feature,cover" }}
 {{/* Use the value from front matter if present */}}
 {{ with .Params.featured_image }}
-	{{ $linkToCover = . }}
+	{{ $coverImage = . }}
   {{/* If we find a Page Resource matching the exact value, we use it instead. */}}
   {{ with $.Resources.GetMatch . }}
-    {{ $linkToCover = .RelPermalink }}
+    {{ $coverImage = . }}
   {{ end }}
 {{/* Find the first image with 'cover' in the name in this page bundle. */}}
 {{ else }}
   {{ with .Resources.ByType "image" }}
     {{ with .GetMatch (printf "**{%s}*" $matches) }}
-      {{ $linkToCover = .RelPermalink }}
+      {{ $coverImage = . }}
     {{ end }}
   {{ end }}
 {{ end }}
-
+{{/* Return either an image or false. Note that partials can only have a single
-{{/* return either a permalink, or an empty string. Note that partials can only have a single
 return statement, so this needs to be at the end of the partial (and not in the if block) */}}
-{{ return $linkToCover }}
+{{ return $coverImage }}

layouts/partials/func/GetImageSrcset

@@ -0,0 +1,28 @@
+{{/*
+  GetImageSrcset
+
+  This partial gets a srcset for a given image.
+
+  @return Slice of sources suitable for use in a srcset attribute. May be empty.
+
+*/}}
+
+{{/* Declare a new variable, $srcset */}}
+{{ $srcset := slice }}
+
+{{ with site.Param "breakpoints" }}
+    {{ $scratch := newScratch }}
+    {{ range $breakpoint := . }}
+        {{ $target_width := mul $breakpoint $.target_width }}
+        {{/* Default mobile breakpoint for Tachyons is 480 */}}
+        {{ if and (ge $breakpoint 480) (ge $.original.Width $target_width) }}
+            {{ $breakpoint_image := $.original.Resize (print (math.Round $target_width) "x") }}
+            {{ $breakpoint_image_url := (trim $breakpoint_image.RelPermalink "/") | absURL }}
+            {{ $scratch.Add "srcset" (slice (print $breakpoint_image_url " " (math.Round $target_width) "w")) }}
+        {{ end }}
+    {{ end }}
+    {{ $srcset = $scratch.Get "srcset" }}
+{{ end }}
+
+{{/* Return a srcset. */}}
+{{ return $srcset }}

layouts/partials/header-image-style.html

@@ -0,0 +1,34 @@
+{{- $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>

layouts/partials/page-header.html

@@ -1,8 +1,8 @@
-{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+{{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
-{{ if $featured_image }}
+{{- if $featured_image -}}
-  {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+  {{- .Scratch.Set "featured_image" $featured_image -}}
-  {{ $featured_image := (trim $featured_image "/") | absURL }}
+  {{- partial "header-image-style.html" . }}
-  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  <header class="cover bg-top has-header-image">
     <div class="bg-black-60">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv6 ph3 ph4-ns">

layouts/partials/site-header.html

@@ -1,8 +1,8 @@
-{{ $featured_image := partial "func/GetFeaturedImage.html" . }}
+{{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
-{{ if $featured_image }}
+{{- if $featured_image }}
-  {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
+  {{- .Scratch.Set "featured_image" $featured_image -}}
-  {{ $featured_image := (trim $featured_image "/") | absURL }}
+  {{- partial "header-image-style.html" . }}
-  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  <header class="cover bg-top has-header-image">
     <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
       {{ partial "site-navigation.html" .}}
       <div class="tc-l pv4 pv6-l ph3 ph4-ns">

layouts/shortcodes/figure.html

@@ -0,0 +1,36 @@
+{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
+{{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
+{{- $default_image_url := (trim $original.RelPermalink "/") | absURL }}
+{{- /* Standard width of main is 70% (w-70-ns) */ -}}
+{{- $target_width := 0.70 -}}
+{{ $srcset := partial "func/GetImageSrcset" (dict "original" $original "target_width" $target_width) }}
+{{ $class := .Get "class" | default "mh0" }}
+<figure{{ with $class }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end -}}
+    <img src="{{ $default_image_url }}"
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with $srcset }} srcset="{{ delimit . ", " }}"{{ end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    /><!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption class="tc">
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p class="i">
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>