layouts: use Hugo's image resizing facilities

layouts/_default/baseof.html

@@ -21,7 +21,8 @@
     <title>{{- if not .IsHome }}{{ .Title }} - {{ .Site.Title }}{{- else }}{{ .Site.Title }} - {{ .Site.Params.Tagline }}{{- end}}</title>
     <link href="https://fonts.googleapis.com/css?family=Ubuntu|Dosis" rel="stylesheet">
     <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/style.css" />
+    {{ $stylesheet := resources.Get "scss/style.scss" | toCSS | minify }}
+    <link rel="stylesheet" href="{{ $stylesheet.Permalink }}" />
     {{- block "css" . }}{{- end }}
 
     {{ if eq (getenv "HUGO_ENV") "PRD" }}

layouts/entry/single.html

@@ -1,7 +1,9 @@
 {{ define "header" }}
+{{ $banner := (.Page.Resources.ByType "image").GetMatch "banner.png" }}
+{{ $resized := $banner.Resize "1280x q99 jpg" }}
 {{ $author := index .Site.Data.authors ( .Params.author | default "" ) }}
 {{ $coauthors := split ( .Params.coauthor | default "" ) "," }}
-<div class="mb-md blog-entry-header single" style="background-image: url('{{ .Site.BaseURL }}/{{ .Dir }}banner.png');background-repeat:no-repeat;background-size:contain;background-position:center;"></div>
+<div class="mb-md blog-entry-header single" style="background-image: url('{{ $resized.Permalink }}');background-repeat:no-repeat;background-size:contain;background-position:center;"></div>
 <div class="has-text-centered">
     <div>
         <span class="title px-md py-sm">{{ .Title }}</span>

layouts/partials/entry/summary.html

@@ -15,7 +15,9 @@
 </div>
 {{ else }}
 {{ $author := index .Site.Data.authors ( .Params.author | default "" ) }}
-<div class="mb-md blog-entry-header summary entry" style="background-image: url('/{{ path.Join .File.Dir "summary.png" }}')" data-href="{{ .Permalink }}">
+{{ $original := (.Page.Resources.ByType "image").GetMatch "summary.png" }}
+{{ $resized := $original.Resize "1280x q90 jpg" }}
+<div class="mb-md blog-entry-header summary entry" style="background-image: url('{{ $resized.Permalink }}')" data-href="{{ .Permalink }}">
     <div class="px-md">
         <span class="title">{{ .Title }}</span>
     </div>

layouts/shortcodes/imgs.html

@@ -1,3 +1,4 @@
+{{ $originals := (.Page.Resources.ByType "image") }}
 <div class="columns is-img-preview">
     {{ range $param := .Params }}
     <!-- image -->
@@ -15,7 +16,10 @@
         {{ else }}
             <a href="{{ $src }}" title="{{ $title }}">
                 {{- if eq $extension "png" -}}
-                <img src="{{ $src }}.jpg" alt="{{ $title }}">
+                {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
+                {{ $resized_width := math.Min $original.Width 1024 }}
+                {{ $resized := $original.Resize (print $resized_width "x q90 jpg" ) }}
+                <img src="{{ $resized.Permalink }}" alt="{{ $title }}">
                 {{- else -}}
                 <img src="{{ $src }}" alt="{{ $title }}">
                 {{- end -}}

layouts/shortcodes/single-title-imgs-compare.html

@@ -1,4 +1,5 @@
 {{ $title := .Get 0 }}
+{{ $originals := (.Page.Resources.ByType "image") }}
 <div class="columns is-bottom-marginless">
     <div class="column is-bottom-paddingless juxtapose">
     {{ range $param := last 2 .Params }}
@@ -9,7 +10,10 @@
     {{ $split_src := split $src "." }}
     {{ $extension := index $split_src (sub (len $split_src) 1) }}
         {{- if eq $extension "png" -}}
-        <img src="{{ $src }}.jpg" alt="{{ $title }}">
+        {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
+        {{ $resized_width := math.Min $original.Width 1024 }}
+        {{ $resized := $original.Resize (print $resized_width "x q90 jpg" ) }}
+        <img src="{{ $resized.Permalink }}" alt="{{ $title }}">
         {{- else -}}
         <img src="{{ $src }}" alt="{{ $title }}">
         {{- end -}}

layouts/shortcodes/single-title-imgs.html

@@ -1,4 +1,5 @@
 {{ $title := .Get 0 }}
+{{ $originals := (.Page.Resources.ByType "image") }}
 <div class="columns is-img-preview is-bottom-marginless">
     {{ range $param := last (sub (len .Params) 1) .Params }}
     <!-- image -->
@@ -16,7 +17,9 @@
         {{ else }}
             <a href="{{ $src }}" title="{{ $subtitle }}">
                 {{- if eq $extension "png" -}}
-                <img src="{{ $src }}.jpg" alt="{{ $title }}">
+                {{ $original := $originals.GetMatch (printf "*%s" (path.Base $src)) }}
+                {{ $resized := $original.Resize "800x q90 jpg" }}
+                <img src="{{ $resized.Permalink }}" alt="{{ $title }}">
                 {{- else -}}
                 <img src="{{ $src }}" alt="{{ $title }}">
                 {{- end -}}