Add images for all blog posts with a licence in hero, and an optional img explanation

README.md

@@ -25,3 +25,8 @@ For development, run `hugo server --watch` to watch for config/content changes,
 ## Using the theme
 
 TODO 😄
+
+## TODO
+
+* RSS feeds
+* Make burger menu work on mobiles

content/posts/smartphone/consequences/index.md

@@ -5,6 +5,8 @@ categories:
   - Technologie
   - Réflexion
 summary: "Les précédents billets présentent trois pistes pour explorer les raisons de l'addiction au smartphone : la curiosité, les peurs contemporaines et les notifications. Cette addiction a des conséquences tangibles."
+imgLicence: Art Libre - Sarah Brulard
+imgExplanation: En image d'illustration, moi au foyer étudiant de l'UTC, absorbé par mon téléphone et entouré de gens très chouettes.
 ---
 
 Ces mécanismes combinés font exploser le temps passé sur un smartphone dans la journée -- plusieurs heures pour la plupart d'entre nous, oscillant entre les recherches consenties, le scroll automatique, l'ingestion compulsive de nouvelles et la réponse aux stimuli des notifications.

content/posts/smartphone/curiosite/index.md

@@ -5,6 +5,7 @@ categories:
   - Technologie
   - Réflexion
 summary: « Se perdre sur Internet », voilà une activité contemporaine qui partage le haut du classement avec la destruction méthodique des écosystèmes et des acquis sociaux. Mais pourquoi se perd-on sur le web ?
+imgLicence: CC BY 2.0 - Moyan Bren
 ---
 
 ## La curiosité est un joli défaut

content/posts/smartphone/introduction/index.md

@@ -5,6 +5,7 @@ categories:
   - Technologie
   - 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
 ---
 
 ## Pourquoi ?

content/posts/smartphone/notifications/index.md

@@ -5,6 +5,7 @@ categories:
   - Technologie
   - Réflexion
 summary: Les notifications, a priori inoffensives et pratiques, offrent à tous les marchands de données la clé de notre attention, à toute heure de la journée. Tous les publicitaires en ont rêvé, les smartphones l'ont fait.
+imgExplanation: En illustration de cet article, une notification de CNN qui invite tous les utilisateurs de l'application à faire une sieste car il n'y a plus de nouveaux articles. Merci de l'autorisation, j'étais crevé !
 ---
 
 Dans les précédentes parties, on a d'abord vu que la curiosité était un besoin qui s'est construit au cours de l'évolution. Probablement d'abord utile pour le fourrageage, elle est aujourd'hui une source de motivation pour l'apprentissage, la remise en question de notre présent et la fabrique de nouveaux imaginaires. En tant qu'il rend l'accès à l'information recherchée immédiat et en propose d'autres, le web est un puissant capteur d'attention qui récompense notre curiosité et l'appétence de notre cerveau pour la nouveauté.

content/posts/smartphone/perspectives/index.md

@@ -5,6 +5,8 @@ categories:
   - Technologie
   - Réflexion
 summary: Comment casser la boucle de l'addiction au smartphones ? Quelques pistes de réflexion, certes très autocentrées, mais qui m'ont été utiles, en attendant de changer le monde.
+imgLicence: Art Libre - Baptiste Filleau
+imgExplanation: En illustration de cet article, une aquarelle de mon meilleur ami, qui m'a beaucoup fait avancer dans mes réflexions.
 ---
 
 ## S'il vous plaît, ne me tapez pas

content/posts/smartphone/peurs/index.md

@@ -5,6 +5,7 @@ categories:
   - Technologie
   - Réflexion
 summary: La curiosité ne suffit pas à expliquer à elle seule les usages déraisonnables de nos smartphones. Pour mieux comprendre, il faut faire un détour par les peurs qui caractérisent notre époque.
+imgLicence: CC BY 2.0 - robinsoncaruso
 ---
 
 Dans la précédente partie de ce billet, on a vu que la curiosité était un besoin fondamental chez les humains, que la nouveauté en tant que telle était puissamment récompensée par le cerveau et que le web était l'objet idéal pour créer et satisfaire notre curiosité dans une même boucle, encore plus à l'ère du smartphone.

themes/chosto/layouts/_default/list.html

@@ -4,7 +4,7 @@
     <main>
       {{ with .Content }}
       <article class="message mt-5 mb-2">
-        <div class="message-body">
+        <div class="message-body content">
           {{ . }}
         </div>
       </article>

themes/chosto/layouts/_default/single.html

@@ -25,10 +25,20 @@
       <section class="column is-7">
         <div>
           <article>
+            <!-- First thing is a legend for the hero image, if it exists -->
+            {{ with .Params.imgExplanation }}
+            <article class="message mb-5">
+              <div class="message-body content is-italic">
+                {{ . }}
+              </div>
+            </article>
+            {{ end }}
+            <!-- Second, a summary before ToC, if it exists -->
             {{ with .Params.summary }}
             {{ . }}
             <br /><br />
             {{ end }}
+            <!-- Then, ToC if text has more than 400 words and not explicitly asked not to -->
             {{ if (or (not .Params.notoc) (gt .WordCount 400)) }}
             <div class="message is-info">
               <div class="message-header">Sommaire</div>
@@ -36,6 +46,7 @@
               <div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
             </div>
             {{ end }}
+            <!-- Finally, content! -->
             {{ .Content }}
           </article>
         </div>

themes/chosto/layouts/_default/summary.html

@@ -1,12 +1,12 @@
 <div class="card has-equal-height mt-5">
   <div class="card-image">
-    <figure class="image is-4by3">
-      {{ $imageURL := "https://bulma.io/images/placeholders/640x480.png" }}
+    <figure class="image is-3by2">
+      {{ $imageURL := "https://bulma.io/images/placeholders/480x320.png" }}
       {{ with .Resources.GetMatch "top.jpg" }}
-        {{ $image := .Fill "640x480 smart" }}
+        {{ $image := .Fill "480x320 left" }}
         {{ $imageURL = $image.Permalink }}
       {{ end }}
-      <img src="{{ $imageURL }}" alt="Placeholder image">
+      <a href="{{ .Permalink }}"><img src="{{ $imageURL }}" alt="Placeholder image"></a>
     </figure>
   </div>
   <div class="card-content" style="height:100%;">

themes/chosto/layouts/partials/header.html

@@ -1,13 +1,27 @@
 <header>
   <section class="hero is-primary has-text-centered is-medium">
-    <div class="hero-head mt-5">
-      {{ with .Params.categories }}
-      <div class="tags colums is-justify-content-flex-end mb-2 mx-5">
-        {{ range . }}
-        <span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
-        {{ end }}
+    <div class="hero-head mx-5">
+      <div class="level subtitle is-5">
+        <div class="level-left">
+          {{ with .Params.imgLicence }}
+          <div class="level-item">
+             Image d'illustration {{ . }}
+          </div>
+          {{ end }}
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            {{ with .Params.categories }}
+            <div class="tags colums is-vcentered mb-2 mt-5">
+              {{ range . }}
+              <span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
+              {{ end }}
+            </div>
+            {{ end }}
+          </div>
+        </div>
       </div>
-      {{ end }}
+
     </div>
     <div class="hero-body">
       <p class="title is-1 is-uppercase">{{ .Title }}</p>