Add photos

content/_index.md

@@ -21,3 +21,7 @@ Certaines recettes ont été plus testées que les autres et sont *bien rodées*
 {{< partial1 "quality_badge" "true" >}}. Elles sont normalement très fiables en
 termes de proportions — pour certaines, ça veut même dire que j'ai déjà fait
 des batches pour de l'ordre de la centaine de personnes.
+
+Enfin, certaines recettes ont subi mes maigres talents de photographe
+{{< partial1 "photo_badge" "true" >}}, et sont indiquées comme telles. Ouais,
+je sais, il y a encore du boulot côté artistique.

content/recettes/entrees/tartines_algues.md

@@ -3,6 +3,7 @@ title: Tartines d'algues
 date: 2019-07-13T10:43:40+02:00
 veganness: vegan
 quality: true
+photo: tartines_algues
 portions:
   qt: 16
   name: tartines

content/recettes/plats/borsch.md

@@ -3,6 +3,7 @@ title: Borsch
 date: 2020-11-06T00:40:05+01:00
 veganness: "veganisable"
 season: winter
+photo: borsch
 portions:
   qt: 10
   name: personnes

layouts/_default/baseof.html

@@ -25,6 +25,11 @@
           {{ block "main" . }}
           {{ end }}
         </div>
+
+        <div id="main_photo">
+          {{ block "photo" . }}
+          {{ end }}
+        </div>
       </div>
     </div>
 

layouts/partials/photo_badge.html

@@ -0,0 +1,6 @@
+{{- if . -}}
+<span class="badge badge-photo"
+      title="Recette avec photo">
+  <i class="fa fa-camera" aria-hidden="true"></i>
+</span>
+{{- end -}}

layouts/partials/recipe_list_entry.html

@@ -11,6 +11,9 @@
       {{ with .Params.quality }}
         {{- partial "quality_badge.html" . -}}
       {{ end }}
+      {{ with .Params.photo }}
+        {{- partial "photo_badge.html" . -}}
+      {{ end }}
     </span>
   </a>
 </li>

layouts/recettes/single.html

@@ -35,3 +35,16 @@
 {{ define "main" }}
   {{ .Content }}
 {{ end }}
+
+
+{{ define "photo" }}{{ with .Params.photo }}{{ if . }}
+  <a
+    href="/img/photo/{{ . }}.orig.jpg"
+    title="Photo en plus grand"
+    >
+    <img
+      alt="Photo de la recette"
+      src="/img/photo/{{ . }}.min.jpg"
+      />
+  </a>
+{{ end }}{{ end }}{{ end }}

scss/_params.scss

@@ -28,6 +28,9 @@ $season_summer_color: #ff3838;
 // Quality recipe
 $quality_recipe_color: #ffee00;
 
+// Photo badge
+$photo_badge_color: #7faca8;
+
 // Responsiveness
 $width_xlarge: 1250px;
 $width_large: 1000px;

scss/style.scss

@@ -177,6 +177,27 @@ body {
   }
 }
 
+#main_photo {
+  display: flex;
+  justify-content: space-around;
+
+  @media (min-width: $width_large) {
+    margin: 50px 0;
+  }
+  margin: 25px 0;
+
+  a {
+    display: block;
+    @media (min-width: $width_large) {
+      width: 75%;
+    }
+    width: 85%;
+  }
+  img {
+    border-radius: 10px;
+  }
+}
+
 #foot {
   font-size: 0.7em;
   color: $footer_fg_color;
@@ -311,6 +332,11 @@ ul {
     border-color: $quality_recipe_color;
     color: $quality_recipe_color;
   }
+
+  &-photo {
+    border-color: $photo_badge_color;
+    color: $photo_badge_color;
+  }
 }
 
 .content-inner {

static/css/style.css

@@ -126,6 +126,22 @@ body {
     font-size: 1.5em;
     font-weight: bold; }
 
+#main_photo {
+  display: flex;
+  justify-content: space-around;
+  margin: 25px 0; }
+  @media (min-width: 1000px) {
+    #main_photo {
+      margin: 50px 0; } }
+  #main_photo a {
+    display: block;
+    width: 85%; }
+    @media (min-width: 1000px) {
+      #main_photo a {
+        width: 75%; } }
+  #main_photo img {
+    border-radius: 10px; }
+
 #foot {
   font-size: 0.7em;
   color: #989898;
@@ -220,6 +236,9 @@ ul {
   .badge-quality {
     border-color: #ffee00;
     color: #ffee00; }
+  .badge-photo {
+    border-color: #7faca8;
+    color: #7faca8; }
 
 .content-inner figure {
   margin: 40px 0; }

static/img/photo/Makefile

@@ -0,0 +1,13 @@
+PHOTOS_ORIG = $(wildcard *.orig.jpg)
+PHOTOS_MIN = $(patsubst %.orig.jpg,%.min.jpg,$(PHOTOS_ORIG))
+
+MIN_WIDTH = 800
+CONVERT_OPTIONS = -quality 75
+
+all: $(PHOTOS_MIN)
+
+%.min.jpg: %.orig.jpg
+	convert "$<" -size '$(MIN_WIDTH)x' $(CONVERT_OPTIONS) "$@"
+
+clean:
+	rm -f *.min.jpg