Resize image with 3000 width before publishing, ~300/400ko per image, nice

content/posts/smartphone/introduction/index.md

@@ -6,6 +6,7 @@ categories:
   - Réflexion
 summary: Ce billet est le premier d'une série qui s'intéresse à la place du smartphone dans nos vies. J'y raconte comment j'en suis venu à interroger mes usages, ce que j'en ai compris, et ce que j'ai décidé pour m'en extirper.
 imgLicence: CC BY-SA 4.0 - Quentin Duchemin
+imgExplanation: En image d'illustration, un escalier en haut du Puy de Sancy, pendant une jolie semaine loin de tout.
 ---
 
 ## Pourquoi ?

themes/chosto/layouts/partials/head.html

@@ -8,13 +8,13 @@
   <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
   <style>
     /* Default to home image */
-    {{ $image := resources.Get "img/hero_home.png" }}
+    {{ $image := resources.Get "img/home.jpg" }}
-    {{ $imageURL := $image.Permalink }}
     /* If header image exists in current context, use it instead */
     {{ with .Resources.GetMatch "top.jpg" }}
-      {{ $imageURL = .Permalink }}
+      {{ $image = . }}
     {{ end }}
-    .has-bg-img { background: url('{{ $imageURL }}')center center; background-size:cover; }
+    {{ $image = $image.Resize "3000x" }}
+    .has-bg-img { background: url('{{ $image.Permalink }}')center center; background-size:cover; }
   </style>
   <!-- Favico -->
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

themes/chosto/layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header>
-  <section class="hero has-bg-img is-primary has-text-centered is-large">
+  <section class="hero has-bg-img is-info has-text-centered is-large">
     <div class="hero-head mx-5">
       <div class="level subtitle is-5">
         <div class="level-left">
@@ -23,7 +23,7 @@
       </div>
 
     </div>
-    <div class="hero-body">
+    <div class="hero-body content">
       <p class="title is-1 is-uppercase">{{ .Title }}</p>
       {{ with .Params.subtitle }}
       <p class="subtitle is-2">{{ . }}</p>
@@ -31,7 +31,7 @@
     </div>
     <!-- Words and date stuff makes sens only for blog posts, not other pages -->
     {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
-    <div class="hero-foot mb-5 mx-5">
+    <div class="hero-foot mb-5 mx-5 content">
       <div class="level subtitle is-5">
         <div class="level-left">
           <div class="level-item has-text-left">