From 094c75bf7dbbe501c0ca3fd95e6f3960411dec49 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 3 Mar 2026 17:01:08 +0100
Subject: [PATCH] FEATURE Handling thumbnail and post date label variations

---
 resources/css/components/post-header.css      | 22 +++++++++++++++----
 .../components/posts/post-header.php          | 17 ++++++++------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css
index 7d9422e..e190b8c 100644
--- a/resources/css/components/post-header.css
+++ b/resources/css/components/post-header.css
@@ -8,7 +8,7 @@
   }
   &__main-author {
     @apply text-white font-light tracking-wide  flex items-center gap-3 mt-4;
-    
+
     &::before {
       @apply w-6 h-6 block  bg-no-repeat bg-center bg-contain;
       content: '';
@@ -25,7 +25,21 @@
       @apply container;
     }
     @apply max-w-screen-2xl mx-auto;
-    &--has-thumbnail {
+    /* &--has-thumbnail {
+      @screen lg {
+        grid-template-columns: 4fr 1fr;
+      }
+    } */
+    &--thumbnail-left {
+      @apply gap-4;
+      @screen lg {
+        grid-template-columns: 1fr 4fr;
+      }
+    }
+    &--thumbnail-right {
+      .thumbnail-wrapper {
+        @apply order-2 lg:order-1;
+      }
       @screen lg {
         grid-template-columns: 4fr 1fr;
       }
@@ -41,7 +55,7 @@
     @apply text-white;
   }
   .thumbnail-wrapper {
-    @apply order-2 lg:order-1 relative z-20 h-fit;
+    @apply relative z-20 h-fit;
     width: calc(100% - 40px);
     padding: 1.2rem;
     /* max-width: calc(70% - 40px);
@@ -59,7 +73,7 @@
     img {
       aspect-ratio: 4/5;
       /* max-height: 200px; */
-      @apply max-h-[200px] lg:max-h-full  h-full relative z-10;
+      @apply max-h-[200px] lg:max-h-full h-full w-full relative z-10;
       @apply object-cover;
 
       /* width: calc(100% - 2rem);
diff --git a/template-parts/components/posts/post-header.php b/template-parts/components/posts/post-header.php
index 63e1d4a..85191ae 100644
--- a/template-parts/components/posts/post-header.php
+++ b/template-parts/components/posts/post-header.php
@@ -6,8 +6,9 @@ $postTitle = get_the_title($post_id);
 $hasNumerotation = hasPostTypeNumerotation($post_id);
 $hasThumbnail = has_post_thumbnail();
 $authors = get_field('authors', $ID);
-
-
+$post_date_info_label = $args['post_date_info_label'] ?? 'Parution';
+$thumbnail_position = $args['thumbnail_position'] ?? 'left';
+$has_thumbnail_overlay = $args['has_thumbnail_overlay'] ?? false;
 ?>
 
 <?php if ($hasNumerotation) : ?>
@@ -20,7 +21,7 @@ $authors = get_field('authors', $ID);
 <?php endif; ?>
 
 <section class="post-header post-header--<?php echo $post_type; ?> ">
-	<div class="post-header__inner post-header__inner--<?php echo $hasThumbnail ? 'has-thumbnail' : 'no-thumbnail'; ?> ">
+	<div class="post-header__inner post-header__inner--<?php echo $hasThumbnail ? 'has-thumbnail post-header__inner--thumbnail-' . $thumbnail_position : 'no-thumbnail'; ?> ">
 
 		<?php if ($hasThumbnail) : ?>
 			<div class="thumbnail-wrapper">
@@ -31,13 +32,13 @@ $authors = get_field('authors', $ID);
 					'style' => 'object-fit: cover; object-position: ' . esc_attr($focal_position) . ';'
 				]);
 				?>
-				<div class="thumbnail-overlay"></div>
+				<?php if ($has_thumbnail_overlay) : ?>
+					<div class="thumbnail-overlay"></div>
+				<?php endif; ?>
 			</div>
 		<?php endif; ?>
 
 		<div class="content">
-
-
 			<?php get_template_part('template-parts/components/content-meta', null, array(
 				'current_post_id' => $post_id,
 				'current_post_type' => $post_type
@@ -52,9 +53,11 @@ $authors = get_field('authors', $ID);
 
 			<div class="post-details">
 
+
+
 				<div class="post-meta">
 					<div class="post-date-info">
-						<p class="post-details__label">Parution</p>
+						<p class="post-details__label"><?php echo $post_date_info_label; ?></p>
 						<time class="post-details__value" datetime="<?php echo get_the_date('Y-m-d', $currentRevueID); ?>"><?php echo get_the_date('d F Y', $currentRevueID); ?></time>
 					</div>
 				</div>