page-cover with caption

2026-02-25 19:05:22 +01:00 · 2026-02-25 19:05:22 +01:00 · 6cd89d11fb
commit 6cd89d11fb
parent c34384adab
17 changed files with 355 additions and 23 deletions
--- a/assets/css/components/_figures.scss
+++ b/assets/css/components/_figures.scss
@ -15,3 +15,12 @@
 }


+  figcaption, .caption{
+        font-size: var(--fs-small);
+        color: var(--color-txt-light);
+        font-weight: 500;
+        line-height: 1.1;
+        margin: calc(var(--spacing) * 0.5) 0!important;
+    }
+
+
--- a/assets/css/components/_text.scss
+++ b/assets/css/components/_text.scss
@ -50,13 +50,7 @@
    }


-    figcaption, .caption{
-        font-size: var(--fs-small);
-        color: var(--color-txt-light);
-        font-weight: 500;
-        line-height: 1.1;
-        margin: calc(var(--spacing) * 0.5) 0!important;
-    }
+  

    video, figure, img, picture{
        width: 100%;
--- a/assets/css/partials/_main-layout.scss
+++ b/assets/css/partials/_main-layout.scss
@ -30,7 +30,4 @@ body{

   
    
-
-   
-    
 }
--- a/assets/css/partials/_page-header.scss
+++ b/assets/css/partials/_page-header.scss
@ -33,6 +33,10 @@ margin-bottom: calc(var(--spacing) * 1);
      
    }

+    .page__cover{
+       margin-top: calc(var(--spacing) * 2);
+    }
+
    .date{
      display: block;
       margin-top: calc(var(--spacing) * -1.5);
@ -73,4 +77,6 @@ margin-bottom: calc(var(--spacing) * 1);

    }

+
+   
 }
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -856,6 +856,14 @@ button.sort[data-sort-type=up] .arrow {
    opacity: 0 !important;
  }
 }
+figcaption, .caption {
+  font-size: var(--fs-small);
+  color: var(--color-txt-light);
+  font-weight: 500;
+  line-height: 1.1;
+  margin: calc(var(--spacing) * 0.5) 0 !important;
+}
+
 #investigation__hero {
  width: 100%;
  max-width: var(--max-w-cards);
@ -1454,17 +1462,6 @@ button.sort[data-sort-type=up] .arrow {
 #investigation__content ul li {
  margin: calc(var(--spacing) * 0.5) 0;
 }
-[data-template=package] .page__content figcaption, [data-template=package] .page__content .caption,
-.main__single .page__content figcaption,
-.main__single .page__content .caption,
-#investigation__content figcaption,
-#investigation__content .caption {
-  font-size: var(--fs-small);
-  color: var(--color-txt-light);
-  font-weight: 500;
-  line-height: 1.1;
-  margin: calc(var(--spacing) * 0.5) 0 !important;
-}
 [data-template=package] .page__content video, [data-template=package] .page__content figure, [data-template=package] .page__content img, [data-template=package] .page__content picture,
 .main__single .page__content video,
 .main__single .page__content figure,
@ -2963,6 +2960,9 @@ main .page__header .page__title {
    margin-bottom: calc(var(--spacing) * 1);
  }
 }
+main .page__header .page__cover {
+  margin-top: calc(var(--spacing) * 2);
+}
 main .page__header .date {
  display: block;
  margin-top: calc(var(--spacing) * -1.5);
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
--- a/site/blueprints/pages/database.yml
+++ b/site/blueprints/pages/database.yml
@ -33,6 +33,9 @@ columns:
      projectCategories:
        label: Catégories des projets
        type: tags
+      resourceCategories:
+        label: Catégories des ressources
+        type: tags
      robots:
        type: hidden
        default: noindex, nofollow
--- a/site/blueprints/pages/resource.yml
+++ b/site/blueprints/pages/resource.yml
@ -0,0 +1,64 @@
+title: Ressource
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 2/6
+        sections:
+          createdSection:
+            type: fields
+            fields:
+              created:
+                label: Date de publication
+                type: date
+                display: DD / MM / YYYY
+                default: today
+                width: 1/2
+              category:
+                label: Catégorie
+                type: tags
+                max: 1
+                options: query
+                query: page('database').resourceCategories.split
+              cover:
+                label: Image de couverture
+                type: files
+                multiple: false
+                layout: cards
+                image:
+                  ratio: 12/7
+                  cover: true
+                help: Optionnelle — utilisée dans la liste des ressources
+
+      - width: 4/6
+        fields:
+          chapo:
+            label: Chapeau
+            type: writer
+            nodes: false
+            marks:
+              - bold
+              - italic
+          linkedInvestigations:
+            label: Enquêtes liées
+            type: pages
+            query: page('enquetes').children.listed
+            multiple: true
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.created }}"
+          body:
+            label: Corps
+            type: blocks
+            fieldsets:
+              - heading
+              - text
+              - image
+              - beforeafter
+              - video
+              - gallery
+              - insert
+
+  seo: seo/page
--- a/site/blueprints/pages/resources.yml
+++ b/site/blueprints/pages/resources.yml
@ -0,0 +1,27 @@
+title: Ressources
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          resourcesSection:
+            type: pages
+            label: Liste des ressources
+            template: resource
+            create: resource
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
+            sortBy: created desc
+
+  seo: seo/page
--- a/site/languages/en.php
+++ b/site/languages/en.php
@ -25,5 +25,8 @@ return [
    'project.type.plural'    => 'Projects',
    'projects.title'         => 'Projects',
    'lab.title'              => 'Laboratory',
+    'resource.type'          => 'Resource',
+    'resource.type.plural'   => 'Resources',
+    'resources.title'        => 'Resources',
  ],
 ];
--- a/site/languages/fr.php
+++ b/site/languages/fr.php
@ -26,5 +26,8 @@ return [
    'project.type.plural'    => 'Projets',
    'projects.title'         => 'Projets',
    'lab.title'              => 'Laboratoire',
+    'resource.type'          => 'Ressource',
+    'resource.type.plural'   => 'Ressources',
+    'resources.title'        => 'Ressources',
  ],
 ];
--- a/site/templates/impact.php
+++ b/site/templates/impact.php
@ -23,6 +23,9 @@
    <figure class="page__cover">
        <?php snippet('picture', ['file' => $cover]) ?>
    </figure>
+    <?php if ($cover->caption()->isNotEmpty()): ?>
+    <p class="caption"><?= $cover->caption()->html() ?></p>
+    <?php endif ?>
    <?php endif ?>

 </header>
--- a/site/templates/news-item.php
+++ b/site/templates/news-item.php
@ -28,6 +28,9 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
    <figure class="page__cover">
        <?php snippet('picture', ['file' => $cover]) ?>
    </figure>
+        <?php if ($cover->caption()->isNotEmpty()): ?>
+    <p class="caption"><?= $cover->caption()->html() ?></p>
+    <?php endif ?>
    <?php endif ?>

 </header>
--- a/site/templates/package.php
+++ b/site/templates/package.php
@ -1,6 +1,6 @@

 <?php snippet('header') ?>
-<main>
+<main class="main__single">

 <?php
 $lang = kirby()->language();
@ -25,8 +25,21 @@ $impacts = $page->linkedImpacts()->toPages();
        <?php endif ?>
    </ul>
    <?php endif ?>
+
+      <?php if ($cover = $page->cover()->toFile()): ?>
+    <figure class="page__cover">
+        <?php snippet('picture', ['file' => $cover]) ?>
+    </figure>
+        <?php if ($cover->caption()->isNotEmpty()): ?>
+    <p class="caption"><?= $cover->caption()->html() ?></p>
+    <?php endif ?>
+    <?php endif ?>
+
+
 </header>

+
+
 <?php if ($page->description()->isNotEmpty()): ?>
 <div class="page__content">
    <p><?= $page->description() ?></p>
--- a/site/templates/project.php
+++ b/site/templates/project.php
@ -27,6 +27,9 @@
    <figure class="page__cover">
        <?php snippet('picture', ['file' => $cover]) ?>
    </figure>
+        <?php if ($cover->caption()->isNotEmpty()): ?>
+    <p class="caption"><?= $cover->caption()->html() ?></p>
+    <?php endif ?>
    <?php endif ?>

 </header>
--- a/site/templates/resource.php
+++ b/site/templates/resource.php
@ -0,0 +1,123 @@
+<?php snippet('header') ?>
+
+<main class="main__single">
+
+<header class="page__header">
+    <?php
+    $lang = kirby()->language();
+    $locale = $lang ? $lang->locale(LC_ALL) : 'fr_FR.UTF-8';
+    $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
+
+    $categories = $page->category()->split();
+    $category   = $categories[0] ?? '';
+    ?>
+    <p class="page__type"><?= t('resource.type') ?></p>
+    <?php if ($category): ?>
+    <p class="page__category"><?= esc($category) ?></p>
+    <?php endif ?>
+    <h2 class="page__title"><?= $page->title()->esc() ?></h2>
+    <?php if ($page->created()->isNotEmpty()): ?>
+    <time class="date" datetime="<?= $page->created()->toDate('yyyy-MM-dd') ?>"><?= $page->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+    <?php endif ?>
+    <?php if ($page->chapo()->isNotEmpty()): ?>
+    <p class="page__description"><?= $page->chapo()->inline() ?></p>
+    <?php endif ?>
+
+    <?php if ($cover = $page->cover()->toFile()): ?>
+    <figure class="page__cover">
+        <?php snippet('picture', ['file' => $cover]) ?>
+    </figure>
+        <?php if ($cover->caption()->isNotEmpty()): ?>
+    <p class="caption"><?= $cover->caption()->html() ?></p>
+    <?php endif ?>
+    <?php endif ?>
+
+</header>
+
+
+    <?php if ($page->body()->isNotEmpty()): ?>
+        <div class="page__content">
+        <?= $page->body()->toBlocks() ?>
+        </div>
+    <?php endif ?>
+
+
+    <?php $investigations = $page->linkedInvestigations()->toPages() ?>
+    <?php if ($investigations->isNotEmpty()): ?>
+    <aside class="page__aside" id="related-investigations">
+        <h3 class="aside__title"><?= t('investigations.related') ?></h3>
+
+        <?php foreach ($investigations as $investigation): ?>
+        <article class="card--article-small">
+            <?php if ($cover = $investigation->cover()->toFile()): ?>
+            <figure>
+                <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
+            </figure>
+            <?php endif ?>
+            <div class="content">
+                <p class="type"><?= t('investigation.type') ?></p>
+                <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
+                <?php if ($investigation->incidentDate()->isNotEmpty()): ?>
+                <time class="date" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+                <?php endif ?>
+            </div>
+            <button class="btn--go-to"><a href="<?= $investigation->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+            <a class="link-block" href="<?= $investigation->url() ?>" aria-hidden="true"></a>
+        </article>
+        <?php endforeach ?>
+
+        <div class="see-more">
+            <button class="btn--bold-inline">
+                <a href="/enquetes">
+                    <span class="text"><?= t('investigations.see_all') ?></span>
+                    <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
+                </a>
+            </button>
+        </div>
+    </aside>
+    <?php endif ?>
+
+
+    <?php
+    $latestResources = site()->find('ressources')
+        ->children()->listed()->not($page)
+        ->sortBy('created', 'desc')
+        ->limit(5);
+    ?>
+
+    <?php if ($latestResources->isNotEmpty()): ?>
+    <aside class="page__aside" id="latest-resources">
+        <h3 class="aside__title">Voir aussi</h3>
+
+        <?php foreach ($latestResources as $resource): ?>
+        <div class="card--block-small has-link">
+            <div class="group-top">
+                <p class="type"><?= t('resource.type') ?></p>
+                <?php if ($resource->category()->isNotEmpty()): ?>
+                <p class="category"><?= $resource->category()->esc() ?></p>
+                <?php endif ?>
+            </div>
+
+            <h4 class="title"><?= $resource->title()->esc() ?></h4>
+
+            <?php if ($resource->created()->isNotEmpty()): ?>
+            <p class="date">
+                <time datetime="<?= $resource->created()->toDate('yyyy-MM-dd') ?>"><?= $resource->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+            </p>
+            <?php endif ?>
+
+            <button class="btn--go-to">
+                <a href="<?= $resource->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a>
+            </button>
+            <a class="link-block" href="<?= $resource->url() ?>" aria-hidden="true"></a>
+        </div>
+        <?php endforeach ?>
+    </aside>
+    <?php endif ?>
+
+
+
+</main>
+
+<?php snippet('bottom-bar') ?>
+<?php snippet('footer') ?>
--- a/site/templates/resources.php
+++ b/site/templates/resources.php
@ -0,0 +1,81 @@
+<?php snippet('header') ?>
+<main>
+
+<header class="page__header">
+
+    <h2 class="page__title"><?= $page->title() ?></h2>
+
+    <?php if ($page->chapo()->isNotEmpty()): ?>
+    <div class="page__description">
+        <p><?= $page->chapo() ?></p>
+    </div>
+    <?php endif ?>
+</header>
+
+
+<div class="page__sort">
+    <button class="sort btn--small no-link" data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
+    <div class="dropdown">
+        <button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Catégories</p></button>
+        <div class="dropdown__content">
+            <ul>
+                <?php foreach (page('database')->resourceCategories()->split() as $cat): ?>
+                <li><button type="button" data-filter="<?= esc(Str::slug($cat)) ?>"><?= esc($cat) ?></button></li>
+                <?php endforeach ?>
+                <li><button type="button" data-filter=""><?= t('filter.all') ?></button></li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<div class="page__content grid-masonry" data-sort-container>
+
+    <div class="grid-sizer"></div>
+
+    <?php foreach ($page->children()->listed()->sortBy('created', 'desc') as $resource): ?>
+
+    <?php
+        $categories = $resource->category()->split();
+        $category   = $categories[0] ?? '';
+        $cover      = $resource->cover()->toFile();
+        $investigations = $resource->linkedInvestigations()->toPages();
+    ?>
+
+    <div class="card--block has-link"
+        data-filter="<?= esc(Str::slug($category)) ?>"
+        data-date="<?= $resource->created()->isNotEmpty() ? $resource->created()->toDate('yyyy-MM-dd') : '' ?>">
+
+        <?php if ($cover): ?>
+        <figure><?php snippet('picture', ['file' => $cover]) ?></figure>
+        <?php endif ?>
+
+        <div class="group-top">
+            <p class="type"><?= t('resource.type') ?></p>
+            <?php if ($category): ?>
+            <p class="category"><?= esc($category) ?></p>
+            <?php endif ?>
+        </div>
+
+        <h3 class="title"><?= $resource->title()->esc() ?></h3>
+
+        <?php if ($resource->created()->isNotEmpty()): ?>
+        <p class="date"><?= $resource->created()->toDate('d MMMM yyyy', 'fr_FR') ?></p>
+        <?php endif ?>
+
+        <?php if ($investigations->isNotEmpty()): ?>
+        <ul class="investigations">
+            <?php foreach ($investigations as $investigation): ?>
+            <li><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></li>
+            <?php endforeach ?>
+        </ul>
+        <?php endif ?>
+
+        <a class="link-block" href="<?= $resource->url() ?>"></a>
+    </div>
+
+    <?php endforeach ?>
+
+</div>
+
+</main>
+<?php snippet('footer') ?>