feat: images de couverture (liste, vue article, og:image)

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 {

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">

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): ?>

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>