diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 3a2b28c..601ef97 100644 --- a/exampleSite/config.toml +++ b/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" diff --git a/exampleSite/content/en/about/index.md b/exampleSite/content/en/about/index.md index 415e83e..f1d53d4 100644 --- a/exampleSite/content/en/about/index.md +++ b/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 diff --git a/i18n/en.toml b/i18n/en.toml index 4e5638d..e66ce33 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -7,6 +7,9 @@ other = "All {{.Title }}" [recentTitle] other = "Recent {{.Title }}" +[imgAltFromTitle] +other = "Image from {{.Title }}" + [readMore] other = "read more" diff --git a/i18n/es.toml b/i18n/es.toml index e5d61b1..1673584 100644 --- a/i18n/es.toml +++ b/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" @@ -38,4 +41,4 @@ other = "Enviar" other = "A continuación encontrará las páginas asociadas a “{{ .Title }}”" [pageTitle] -other = "{{ .Name }} pagina" \ No newline at end of file +other = "{{ .Name }} pagina" diff --git a/i18n/fr.toml b/i18n/fr.toml index 3393844..129a2d0 100644 --- a/i18n/fr.toml +++ b/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" @@ -46,4 +49,4 @@ one = "Un mot" other = "{{ .Count }} mots" [pageTitle] -other = "{{ .Name }} page" \ No newline at end of file +other = "{{ .Name }} page" diff --git a/layouts/_default/summary-with-image.html b/layouts/_default/summary-with-image.html index 3c94240..8a932a4 100644 --- a/layouts/_default/summary-with-image.html +++ b/layouts/_default/summary-with-image.html @@ -2,12 +2,20 @@
- {{ if $featured_image }} - {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}} - {{ $featured_image := (trim $featured_image "/") | absURL }} + {{ if $featured_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 }}
- 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 }} + {{ $alt }} + {{ else }} + {{ $alt }} + {{- end -}}
{{ end }} diff --git a/layouts/partials/func/GetFeaturedImage.html b/layouts/partials/func/GetFeaturedImage.html index 12ffe1c..1c8dd3b 100644 --- a/layouts/partials/func/GetFeaturedImage.html +++ b/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 */}} -{{ $linkToCover := "" }} +{{/* Declare a new variable, $coverImage */}} +{{ $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 a permalink, or an empty string. Note that partials can only have a single +{{/* Return either an image or false. 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 }} diff --git a/layouts/partials/func/GetImageSrcset b/layouts/partials/func/GetImageSrcset new file mode 100644 index 0000000..4ff1bb4 --- /dev/null +++ b/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 }} diff --git a/layouts/partials/header-image-style.html b/layouts/partials/header-image-style.html new file mode 100644 index 0000000..583bf23 --- /dev/null +++ b/layouts/partials/header-image-style.html @@ -0,0 +1,34 @@ +{{- $featured_image := .Scratch.Get "featured_image" }} + diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html index 9e46054..ad488d7 100644 --- a/layouts/partials/page-header.html +++ b/layouts/partials/page-header.html @@ -1,8 +1,8 @@ -{{ $featured_image := partial "func/GetFeaturedImage.html" . }} -{{ if $featured_image }} - {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}} - {{ $featured_image := (trim $featured_image "/") | absURL }} -
+{{- $featured_image := partial "func/GetFeaturedImage.html" . -}} +{{- if $featured_image -}} + {{- .Scratch.Set "featured_image" $featured_image -}} + {{- partial "header-image-style.html" . }} +
{{ partial "site-navigation.html" . }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index aad8749..0a5aafe 100755 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -1,8 +1,8 @@ -{{ $featured_image := partial "func/GetFeaturedImage.html" . }} -{{ if $featured_image }} - {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}} - {{ $featured_image := (trim $featured_image "/") | absURL }} -
+{{- $featured_image := partial "func/GetFeaturedImage.html" . -}} +{{- if $featured_image }} + {{- .Scratch.Set "featured_image" $featured_image -}} + {{- partial "header-image-style.html" . }} +
{{ partial "site-navigation.html" .}}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html new file mode 100644 index 0000000..92db075 --- /dev/null +++ b/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" }} + + {{- if .Get "link" -}} + + {{- end -}} + {{ with .Get + {{- if .Get "link" }}{{ end -}} + {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}} +
+ {{ with (.Get "title") -}} +

{{ . }}

+ {{- end -}} + {{- if or (.Get "caption") (.Get "attr") -}}

+ {{- .Get "caption" | markdownify -}} + {{- with .Get "attrlink" }} + + {{- end -}} + {{- .Get "attr" | markdownify -}} + {{- if .Get "attrlink" }}{{ end }}

+ {{- end }} +
+ {{- end }} +