feat(shortcode): figure and figures flex box

assets/sass/article.scss

@@ -8,8 +8,14 @@
     font-style: italic;
 }
 
+.article__featured-image-container {
+    padding-top: 1rem;
+}
+
 .article__featured-image {
+    min-width: 80%;
     max-width: 100%;
+    text-align: center;
 
     img {
         object-fit: fit;
@@ -19,9 +25,6 @@
     }
 }
 
-.article {
-}
-
 // card in list
 .article-card {
     display: flex;

assets/sass/figures.scss

@@ -0,0 +1,29 @@
+.fig-img {
+    display: inline-block;
+    figcaption {
+        font-size: .9rem;
+        color: $hidden;
+        text-align: center;
+        p {
+            margin: 0;
+        }
+    }
+    img {
+        max-height: 30rem;
+    }
+    margin: 0;
+    margin-bottom: 1rem;
+}
+
+.figures-grid {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+    margin-bottom: 1rem;
+    
+    figure {
+        max-width: 27rem;
+        margin: 0;
+    }
+}

assets/sass/general.scss

@@ -128,11 +128,9 @@ img {
     }
 }
 
-.fig-img {
+.single-figure-container {
-    figcaption {
+    display: flex;
-        font-size: .9rem;
+    justify-content: center;
-        color: $hidden;
-    }
 }
 
 .highlighted {
@@ -154,12 +152,6 @@ img {
     padding-top: 1rem;
 }
 
-figure {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-}
-
 .layout-two-spaced {
     display: flex;
     justify-content: space-between;

assets/sass/landing.scss

@@ -416,6 +416,9 @@
         display: flex;
         flex-direction: column-reverse;
     }
+    .organization__image {
+        text-align: center;
+    }
 }
 
 @media (min-width: $md-breakpoint) {

assets/sass/main.scss

@@ -27,6 +27,7 @@ $hidden: #2C3E50;
 @import 'general.scss';
 @import 'button.scss';
 @import 'page_container.scss';
+@import 'figures.scss';
 @import 'header.scss';
 @import 'news.scss';
 @import 'landing.scss';

content/actualites/2022-01-25_bilan/index.md

@@ -1,50 +1,61 @@
 ---
-title: Bilan
+title: Bilan du groupe facebook
 date: 2022-01-25
 ---
 
-440
+440.
-Ce n'est déjà plus le nombre de membres de notre groupe Facebook, puisqu'il dépasse maintenant les 500. 🔥
-⛪Ce n'est pas le nombre de visiteurs venus ce dimanche 23 janvier, même s'ils furent nombreux à faire le détour, à l'instar des Rois Mages, guidés par l'étoile couronnant la Chapelle de Bethléem. 🌟
-440, c'est le nombre des années qui nous sépare de la date de la fondation de la chapelle par le Cardinal de Bourbon. 😇
-🙏C'est le nombre, minimal, de remerciements que nous souhaitons vous adresser pour :
 
-    l'intérêt que vous portez à ce monument ainsi qu'au présent groupe Facebook,
+Ce n'est déjà plus le nombre de membres de notre groupe Facebook, puisqu'il dépasse maintenant les 500. 🔥
-    vos visites de dimanche,
+
-    les témoignages et photos que vous voulez bien nous communiquer,
+⛪ Ce n'est pas le nombre de visiteurs venus ce dimanche 23 janvier, même s'ils furent nombreux à faire le détour, à l'instar des Rois Mages, guidés par l'étoile couronnant la Chapelle de Bethléem. 🌟
-    vos idées, vos messages de soutien,
+
-    l'espoir dont vous êtes porteurs au travers du moindre de ces petits signes.
+440, c'est le nombre des années qui nous sépare de la date de la fondation de la chapelle par le Cardinal de Bourbon. 😇
+
+🙏 C'est le nombre, minimal, de remerciements que nous souhaitons vous adresser pour :
+
+L'intérêt que vous portez à ce monument ainsi qu'au présent groupe Facebook, vos visites de dimanche, les témoignages et photos que vous voulez bien nous communiquer, vos idées, vos messages de soutien, l'espoir dont vous êtes porteurs au travers du moindre de ces petits signes.
 
 👏 C'est aussi le nombre de remerciements que nous pouvons adresser :
 
-    à Monsieur et Madame Blondel pour leur investissement, l'accueil bienveillant qu'ils réservent à ceux qui souhaitent réveiller la Belle Chapelle aux Bois dormant,
+à Monsieur et Madame Blondel pour leur investissement, l'accueil bienveillant qu'ils réservent à ceux qui souhaitent réveiller la Belle Chapelle aux Bois dormant,
-    aux organisateurs de l'exposition et de l'ouverture du site dimanche, permettant aussi des rencontres et discussions aussi impromptues que passionnées,
+aux organisateurs de l'exposition et de l'ouverture du site dimanche, permettant aussi des rencontres et discussions aussi impromptues que passionnées,
-    à la presse régionale, qui favorise autant la redécouverte de ce lieu unique, que les liens sociaux qui s'établissent autour.
+à la presse régionale, qui favorise autant la redécouverte de ce lieu unique, que les liens sociaux qui s'établissent autour.
+
+## ✨440, peut être aussi le début d'un projet...
 
-✨440, peut être aussi le début d'un projet...
 En effet, le 24 décembre dernier, un vœu avait été formulé :
 *" Ces dernières années, une communauté virtuelle s'est créée autour de la Chapelle.
 Celle-ci peut prendre la réalité d'une magnifique équipe pour œuvrer en lien avec les propriétaires à ce que le souvenir ne soit pas une nostalgie, mais une inspiration" .*
-🧐À plusieurs reprises, il nous a été demandé s'il existait une association des amis de la chapelle qui aide à sa sauvegarde, participe à sa restauration et contribue à sa promotion.
+
+🧐 À plusieurs reprises, il nous a été demandé s'il existait une association des amis de la chapelle qui aide à sa sauvegarde, participe à sa restauration et contribue à sa promotion.
+
 👉Pour voir le jour, elle a besoin de vous. 👈
+
 Elle a besoin de tous ceux qui sont attachés à ce lieu, d'une façon ou d'une autre.
 Elle a besoin de chacun d'entre nous, avec le moindre de nos talents, aussi modeste soit-il.
+
 C'est pourquoi, pour préparer le lancement de ce projet, notamment dans la perspective d'organiser une assemblée générale constitutive, nous vous invitons à nous faire part de :
-👉 Votre intérêt, à priori, pour devenir membre de l'association,
-👉 Vos coordonnées par lesquelles vous souhaitez être joints,
-👉 Le type d'action ou d'activité que vous pourriez avoir au sein, de l'association, le talent que vous pourriez mettre en œuvre,
-👉 Toute suggestion qu'il vous plaira de soumettre.
-✍Que ce soit pour des tâches administratives, pour assurer la comptabilité, pour de menus travaux, 🚧voire pour encadrer des bénévoles, tous les talents, toutes les bonnes volontés sont les bienvenues.
-🙏Merci par avance pour votre réponse :
 
-    soit par Messenger auprès de Damien Déplanque, Bruno Edouard-Hagron ou Philippe Hachet,
+- Votre intérêt, à priori, pour devenir membre de l'association,
-    soit par mail à l'adresse : chapelledebethleem@protonmail.com
+- Vos coordonnées par lesquelles vous souhaitez être joints,
+- Le type d'action ou d'activité que vous pourriez avoir au sein, de l'association, le talent que vous pourriez mettre en œuvre,
+- Toute suggestion qu'il vous plaira de soumettre.
+- Que ce soit pour des tâches administratives, pour assurer la comptabilité, pour de menus travaux, 🚧voire pour encadrer des bénévoles, tous les talents, toutes les bonnes volontés sont les bienvenues.
+
+🙏 Merci par avance pour votre réponse :
+
+- soit par Messenger auprès de Damien Déplanque, Bruno Edouard-Hagron ou Philippe Hachet,
+- soit par mail à l'adresse : chapelledebethleem@protonmail.com
+
+🚧 En lien avec les propriétaires, nous allons travailler à un premier cadre en vue de préparer un projet d'association à lancer pour le printemps prochain.
 
-🚧En lien avec les propriétaires, nous allons travailler à un premier cadre en vue de préparer un projet d'association à lancer pour le printemps prochain.
 440 peut donc être aussi l'objectif à atteindre du nombre de personnes intéressées pour participer à une telle association.
 Un grand chantier nous attend ? Tout est à faire ?
 Ne soyons donc pas modeste car nous n'en avons pas les moyens.
-🔥💪⛪ L'engagement,
+
+## 🔥💪⛪ L'engagement,
+
 c'est maintenant ! 🤗
+
 Si vous n'êtes pas encore inscrit, rejoignez le groupe public Chapelle de Bethléem (Aubevoye) 👈
 Ci-dessous, quelques photos prises ce dimanche durant l'exposition de la crèche dans la crypte de la Chapelle de Bethléem (Aubevoye)*

content/actualites/2023-12-16_invitation-salon-gastronomie/index.md

@@ -13,8 +13,19 @@ Vous pourrez notamment y acquérir le premier panier garni local 🤩 avec les p
 
 Retrouvez-nous donc ce dimanche entre 10h et 18h à la salle des fêtes de Saint-Aubin-sur-Gaillon. ⭐️🎄
 
-![](https://static.etoiledebethleem.fr/newsletters/2023-12-16/kit_cadeau_1.jpg)
+{{<figures-grid>}}
-![](https://static.etoiledebethleem.fr/newsletters/2023-12-16/kit_cadeau_2.jpg)
+    {{<fig-img
-![](https://static.etoiledebethleem.fr/newsletters/2023-12-16/kit_cadeau_3.jpg)
+        src="https://static.etoiledebethleem.fr/newsletters/2023-12-16/kit_cadeau_1.jpg"
-![Les biscuits en forme d'étoiles emballés](https://static.etoiledebethleem.fr/newsletters/2023-12-16/gateaux.jpg)
+        caption="Le kit cadeau avec sa carte postale"
+    >}}
+    {{<fig-img
+        src="https://static.etoiledebethleem.fr/newsletters/2023-12-16/kit_cadeau_2.jpg"
+        caption="Le kit cadeau vu de l'autre coté"
+    >}}
+{{</figures-grid>}}
 
+{{<fig-img
+    single=true
+    src="https://static.etoiledebethleem.fr/newsletters/2023-12-16/gateaux.jpg"
+    caption="Les biscuits en forme d'étoiles emballés"
+>}}

content/actualites/2024-01-10_flechage-panneaux/index.md

@@ -16,7 +16,18 @@ Merci aussi aux bénévoles qui ont affronté le froid pour aller planter les pi
 
 Maintenant la Chapelle n’aura plus de secret pour personne ! 💫
 
-🔎 Nous sommes à la recherche d’une personne au talent de pyrograveur pour remplacer les affiches plastifiées par une pyrogravure comme sur la photo. Merci de vous rapprocher de nous si vous êtes candidat 
+🔎 Nous sommes à la recherche d’une personne au talent de pyrograveur pour remplacer les affiches plastifiées par une pyrogravure comme sur la photo. Merci de vous rapprocher de nous si vous êtes candidat.
 
-![Modèle de panneau](modele_panneau.jpg)
+<br>
-![Bénévoles à coté des panneaux](composition_panneaux_personnes.jpg)
+
+{{<figures-grid>}}
+    {{<fig-img
+    src="modele_panneau.jpg"
+    caption="Modèle du panneau en bois"
+    >}}
+
+    {{<fig-img
+    src="composition_panneaux_personnes.jpg"
+    caption="Nos bénévoles"
+    >}}
+{{</figures-grid>}}

content/actualites/2024-03-01_invitation-assemblee-generale/index.md

@@ -30,7 +30,11 @@ Les adhérents ont normalement reçu la convocation par e-mail et en cas d'absen
 
 Nous vous attendons nombreux pour le bien de notre belle Chapelle ! 🙏
 
-![](https://fichiers.etoiledebethleem.fr/events/2024-03-17_ag/affiche/portrait_md.png)
+{{<fig-img
+    single=true
+    src="https://fichiers.etoiledebethleem.fr/events/2024-03-17_ag/affiche/portrait_md.png"
+    caption="Affiche de l'évènement"
+>}}
 
 [Lien vers l'affiche en PDF](https://fichiers.etoiledebethleem.fr/events/2024-03-17_ag/affiche/portrait.pdf)
 

content/actualites/2024-03-18_retour-sur-assemblee-generale/index.md

@@ -1,7 +1,7 @@
 ---
 title: Retour sur l'Assemblée générale 2024
 date: 2024-03-18
-description: Notre assemblée générale s’est déroulée hier en compagnie d’une quarantaine de participants. Retour sur ce moment important de la vie associative et les perspectives futures.
+summary: Notre assemblée générale s’est déroulée hier en compagnie d’une quarantaine de participants. Retour sur ce moment important de la vie associative et les perspectives futures.
 ---
 
 Notre assemblée générale s’est déroulée hier en compagnie d’une quarantaine de participants. 🙏🏻

content/actualites/2024-04-13_travaux-aumonerie/index.md

@@ -12,7 +12,12 @@ De la douceur, la chapelle en retrouve de jour en jour ...
 
 Ce samedi 13 avril, un groupe de jeunes de l'aumônerie de Vernon est venu nous aider à rendre la chapelle sa splendeur d'autre fois.
 
-![Les jeunes dans la crypte](./imgs/crypte_1.jpg)
+{{<fig-img
+    single=true
+    src="imgs/crypte_1.jpg"
+    options="600x400"
+    caption="Les jeunes dans la crypte"
+>}}
 
 Après la coutumière visite de la crypte et une explication sur l'histoire de la chapelle, ils étaient motivés à nous aider.
 
@@ -23,12 +28,23 @@ Après la coutumière visite de la crypte et une explication sur l'histoire de l
 
 Il y avait beaucoup de travail avec l'évacuation de gravats et de la végétation. Mais munis de leur casque à l'effigie de l'association et de gants, ils ont été très vaillants. 
 
-![Décharge de pierres avec une brouette par un jeune](./imgs/decharge_brouette_pierre.jpg)
-
 Un grand merci à eux pour leur dévouement et à leurs accompagnateurs. 🙏🏻
 
 La journée a commencé par une visite de la crypte et s'est terminée dans la bonne humeur autour d'un goûter. 
 
 Peu à peu la chapelle éclot à travers toute cette végétation. Il faut poursuivre ce long marathon avec conviction et persévérance.
 
-![Coté nord](./imgs/cote_nord_1.jpg)
+{{<figures-grid>}}
+    {{<fig-img
+        src="imgs/cote_nord_1.jpg"
+        caption="Débroussaillage coté nord de la maison du vigneron."
+        >}}
+    {{<fig-img
+        src="imgs/calvaire_1.jpg"
+        caption="Nettoyage autour du calvaire à l'entrée du domaine."
+        >}}
+    {{<fig-img
+        src="imgs/decharge_brouette_pierre.jpg"
+        caption="Décharge de pierres avec une brouette par un jeune"
+        >}}
+{{</figures-grid>}}

layouts/actualites/single.html

@@ -23,12 +23,14 @@
             {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL)  }}
             {{ if $featuredImage }}
                 {{ $featuredImage = $featuredImage.Resize "900x" }}
-                <figure class="article__featured-image">
+                <div class="single-figure-container article__featured-image-container">
+                <figure class="article__featured-image fig-img">
                     <img alt="" src="{{ $featuredImage.RelPermalink }}" />
                     {{ with .Params.featured_image.caption }}
                     <figcaption>{{ . }}</figcaption>
                     {{ end }}
                 </figure>
+                </div>
             {{ end }}
             {{ end }}
 

layouts/shortcodes/fig-img.html

@@ -1,11 +1,23 @@
+<!---
+    Fig img shortcode
+-->
+{{- if .Get "single" -}}
+<div class="single-figure-container">
+{{ end }}
 <figure class="fig-img {{ with .Get "class" }}{{ . }}{{ end }}">
     {{- if .Get "link" -}}
         <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
     {{- end -}}
 
-    {{ $options := .Get "options" }}
+    {{ $options := or (.Get "options") "500x500 center" }}
-    {{ $img := (.Page.Resources.GetMatch (.Get "src")).Fit $options }}
+    {{ $permalink := "" }}
-    <img src="{{ $img.RelPermalink }}"
+    {{ if hasPrefix (.Get "src") "https://" }}
+        {{ $permalink = .Get "src" }}
+    {{ else }}
+        {{ $permalink = ((.Page.Resources.GetMatch (.Get "src")).Fill $options).Permalink }}
+    {{- end -}}
+
+    <img src="{{ $permalink }}"
          {{- if or (.Get "alt") (.Get "caption") }}
          alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
          {{- end -}}
@@ -27,4 +39,6 @@
         </figcaption>
     {{- end }}
 </figure>
-
+{{- if .Get "single" -}}
+</div>
+{{ end }}

layouts/shortcodes/figures-grid.html

@@ -0,0 +1,3 @@
+<div class="figures-grid">
+{{ .Inner }}
+</div>