From 8703a5544f9a48d6aa80b35674aa9d8c386043e6 Mon Sep 17 00:00:00 2001
From: Cedric Abonnel <cedric.abonnel@gmail.com>
Date: Fri, 8 May 2026 23:04:05 +0200
Subject: [PATCH] feat: images de couverture (liste, vue article, og:image)

---
 public/assets/css/style.css | 17 +++++++++++++++++
 templates/layout.php        |  5 +++++
 templates/post_list.php     |  8 +++++++-
 templates/post_view.php     | 12 ++++++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 2a6cc62..e929f9c 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -151,6 +151,23 @@ a:hover {
     height: 120px;
     border-radius: var(--vl-radius) var(--vl-radius) 0 0;
     flex-shrink: 0;
+    background-size: cover;
+    background-position: center;
+}
+
+/* Couverture pleine largeur dans la vue article */
+.article-cover {
+    margin: 0;
+    overflow: hidden;
+    border-radius: var(--vl-radius) var(--vl-radius) 0 0;
+    flex-shrink: 0;
+}
+
+.article-cover img {
+    width: 100%;
+    height: 340px;
+    object-fit: cover;
+    display: block;
 }
 
 .card {
diff --git a/templates/layout.php b/templates/layout.php
index 1c496c9..03ef155 100644
--- a/templates/layout.php
+++ b/templates/layout.php
@@ -16,6 +16,11 @@
     <meta property="og:locale" content="fr_FR">
     <meta property="og:url" content="https://varlog.a5l.fr/">
     <meta property="og:site_name" content="varlog">
+    <?php if (!empty($ogImage ?? '')): ?>
+    <meta property="og:image" content="<?= htmlspecialchars($ogImage) ?>">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <?php endif; ?>
 
     <!-- RSS autodiscovery -->
     <link rel="alternate" type="application/rss+xml" title="varlog" href="/feed">
diff --git a/templates/post_list.php b/templates/post_list.php
index 5c7b044..1c5c67a 100644
--- a/templates/post_list.php
+++ b/templates/post_list.php
@@ -32,7 +32,13 @@ ob_start();
             <?php elseif ($isAvantPremiere): ?>
                 <div class="premiere-ribbon">Avant-première</div>
             <?php endif; ?>
-            <div class="card-cover" style="background: <?= $gradient ?>"></div>
+            <?php
+            $coverFile = $post['cover'] ?? '';
+    $coverStyle = $coverFile !== ''
+        ? 'background-image: url(/file?uuid=' . rawurlencode($post['uuid']) . '&name=' . rawurlencode($coverFile) . ')'
+        : 'background: ' . $gradient;
+    ?>
+            <div class="card-cover" style="<?= $coverStyle ?>"></div>
             <div class="card-body d-flex flex-column">
                 <h2 class="card-title">
                     <?php if ($isLocked): ?>
diff --git a/templates/post_view.php b/templates/post_view.php
index a586877..238515b 100644
--- a/templates/post_view.php
+++ b/templates/post_view.php
@@ -7,10 +7,22 @@ ob_start();
 
 <a href="/" class="btn btn-secondary mb-3">← Retour</a>
 
+<?php
+$coverFile = $article['cover'] ?? '';
+$ogImage   = $coverFile !== ''
+    ? url('file?uuid=' . rawurlencode($article['uuid']) . '&name=' . rawurlencode($coverFile))
+    : null;
+?>
 <div class="card mb-4">
     <?php if (!$article['published']): ?>
         <div class="draft-ribbon">Brouillon</div>
     <?php endif; ?>
+    <?php if ($coverFile !== ''): ?>
+        <div class="article-cover">
+            <img src="/file?uuid=<?= rawurlencode($article['uuid']) ?>&name=<?= rawurlencode($coverFile) ?>"
+                 alt="<?= htmlspecialchars($article['title']) ?>">
+        </div>
+    <?php endif; ?>
     <div class="card-body">
         <h2 class="card-title"><?= htmlspecialchars($article['title']) ?></h2>