Add illustrations on features

data/features.toml

@@ -1,6 +1,12 @@
 [[features]]
 id = "dynamicDNS"
 
+  [features.img]
+  src = "/img/screenshots/features/dyndns.png"
+    [features.img.alt]
+    fr = "Une interface au dessus de votre serveur existant"
+    en = "An interface on top of your existing server"
+
   [features.title]
   fr = "Gérer les zones de vos serveurs BIND, Knot, PowerDNS, ..."
   en = "Manage your zones backed by BIND, Knot, PowerDNS, ..."
@@ -18,6 +24,12 @@ id = "dynamicDNS"
 [[features]]
 id = "registrar"
 
+  [features.img]
+  src = "/img/screenshots/features/hosters.png"
+    [features.img.alt]
+    fr = "Exemple de diff"
+    en = "Sample diff"
+
   [features.title]
   fr = "Gérer les zones hébergées chez des prestataires d'hébergement"
   en = "Manage your zones hosted on hosting providers"
@@ -35,6 +47,12 @@ id = "registrar"
 [[features]]
 id = "rest"
 
+  [features.img]
+  src = "/img/screenshots/features/rest.png"
+    [features.img.alt]
+    fr = "API REST"
+    en = "REST API"
+
   [features.title]
   fr = "Utiliser happyDomain comme API REST"
   en = "Use happyDomain as a API REST"
@@ -52,6 +70,12 @@ id = "rest"
 [[features]]
 id = "resolver"
 
+  [features.img]
+  src = "/img/screenshots/features/resolver.png"
+    [features.img.alt]
+    fr = "Résolveur DNS"
+    en = "DNS Resolver"
+
   [features.title]
   fr = "Tester ou déboguer votre zone en ligne"
   en = "Test or debug your zone online"
@@ -69,6 +93,12 @@ id = "resolver"
 [[features]]
 id = "diff"
 
+  [features.img]
+  src = "/img/screenshots/features/diff.png"
+    [features.img.alt]
+    fr = "Exemple de diff"
+    en = "Sample diff"
+
   [features.title]
   fr = "Visualiser clairement les changements"
   en = "Clearly visualize changes"
@@ -81,6 +111,12 @@ id = "diff"
 [[features]]
 id = "history"
 
+  [features.img]
+  src = "/img/screenshots/features/history.png"
+    [features.img.alt]
+    fr = "Historique de la zone"
+    en = "Zone's history"
+
   [features.title]
   fr = "Garder une trace des modifications"
   en = "Keeping track of changes"

layouts/partials/features.html

@@ -41,12 +41,15 @@
       {{ i18n "features-grid-title" }}
     </h3>
   </div>
-  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
+  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
 
     {{ range $.Site.Data.features.features }}
     {{ if index .title $.Language.Lang }}
     <div class="col mb-4">
       <div class="card" id="feature-{{ .id }}">
+        {{ if and .img .img.src }}
+        <img src="{{ .img.src }}" class="card-img-top" alt="{{ index .img.alt $.Language.Lang }}">
+        {{ end }}
         <div class="card-body">
           <h5 class="card-title text-center mb-0">{{ index .title $.Language.Lang }}</h5>
           <hr class="mb-1 mt-2 mr-4 ml-4">