REFINE Removing grayscale filter from author card image for improved visual clarity

resources/css/blocks/press-ressources.css

@@ -33,7 +33,16 @@
   &__list {
     @apply grid grid-cols-1 md:grid-cols-2 gap-8;
     .communique-card {
+      h3 {
+        @apply mb-6 text-2xl;
+      }
       @apply border border-primary border-solid bg-white p-8;
+      .communique-card__file-infos {
+        @apply flex items-center gap-2 text-primary;
+      }
+      .communique-card__file-type {
+        @apply uppercase;
+      }
     }
   }
 }
@@ -60,7 +69,7 @@
       @apply grid gap-4 bg-primary text-white p-4 uppercase tracking-wider;
       grid-template-columns: 4fr 1fr 1fr 1fr;
 
-      column-gap: ;
+      column-gap:;
       /* span {
         @apply nunito text-sm font-bold tracking-widest mb-3;
         } */

resources/css/components/author-card.css

@@ -18,7 +18,7 @@
   }
 
   &__profile-picture {
-    @apply w-full h-32 object-cover  mb-6 border border-carhop-green-700 relative bg-white;
+    @apply w-full h-40 object-cover  mb-6 border border-carhop-green-700 relative bg-white;
   }
 
   &__name {
@@ -29,7 +29,7 @@
   }
 
   &__email {
-    @apply mt-4 text-lg !normal-case;
+    @apply mt-8 text-lg !normal-case mx-auto;
 
     &:is(a) {
       @apply !text-primary;

resources/css/components/content-meta.css

@@ -11,6 +11,10 @@
     &--revue:before {
       @apply rounded-full bg-carhop-orange-400;
     }
+
+    &--communique-presse:before {
+      @apply rounded-full bg-white border-2 border-primary;
+    }
     &--articles:before,
     &--article:before {
       @apply w-6 bg-carhop-purple-300 -rotate-45;

resources/css/components/member-author-card.css

@@ -14,7 +14,7 @@
 
     img {
       @apply w-full h-full object-cover;
-      filter: grayscale(100%);
+      /* filter: grayscale(100%); */
     }
     &-placeholder {
       @apply bg-carhop-green-100 flex items-center justify-center;

resources/css/components/post-card.css

@@ -5,6 +5,18 @@
   }
   .card__details {
     @apply flex flex-col gap-3;
+
+    &:has(.card__thumbnail) {
+      @apply grid  gap-6;
+      grid-template-columns: 3fr 1fr;
+    }
+    .card__thumbnail {
+      @apply bg-white border border-solid border-primary p-2;
+      img {
+        aspect-ratio: 4/5;
+        @apply w-full h-auto  bg-green-400 object-cover;
+      }
+    }
   }
 
   time.date {

template-parts/cards/author-card.php

@@ -6,13 +6,13 @@ $member_thumbnail = get_field('profile_thumbnail', $member_id);
 $member_description = get_field('description', $member_id);
 $member_email = get_field('email', $member_id);
 
-
+$tumbnailPosition = get_field('profile_thumbnail_position', $member_id) ?? '50%';
 ?>
 <li class="comity-type__item author-card">
 	<div class="author-card__profile-picture">
 		<?php if ($member_thumbnail) : ?>
 			<a href="<?php echo get_the_permalink($author->ID); ?>">
-				<img src="<?php echo $member_thumbnail['url']; ?>" alt="<?php echo $member_thumbnail['alt']; ?>">
+				<img style="object-position: 50% <?php echo $tumbnailPosition; ?>%;" src="<?php echo $member_thumbnail['url']; ?>" alt="<?php echo $member_thumbnail['alt']; ?>">
 			</a>
 		<?php else : ?>
 			<a href="<?php echo get_the_permalink($member_id); ?>">

template-parts/cards/communique-presse-card.php

@@ -0,0 +1,26 @@
+<?php
+$communique_id = $args['communique_id'];
+$communique_file = get_field(selector: 'file', post_id: $communique_id);
+$communique_file_url = $communique_file['url'];
+$communique_file_size = size_format($communique_file['filesize']);
+$communique_file_type = $communique_file['subtype'];
+?>
+
+<div class="communique-card">
+	<?php get_template_part('template-parts/components/content-meta', null, array(
+		'current_post_type' => 'communique-presse',
+		'current_post_id' => $communique_id
+	)); ?>
+	<h3><?php echo get_the_title($communique_id); ?></h3>
+	<div class="communique-card__file-infos">
+		<time datetime="<?php echo get_the_date('Y-m-d', $communique_id); ?>"><?php echo get_the_date('d F Y', $communique_id); ?></time>
+		<?php if ($communique_file) : ?>
+			<span>|</span>
+			<span class="communique-card__file-type"><?php echo $communique_file_type; ?></span>
+			<span class="communique-card__file-size">(<?php echo $communique_file_size; ?>)</span>
+		<?php endif; ?>
+	</div>
+
+	
+	<!-- <a href="<?php echo get_permalink($communique_id); ?>" class="button">Voir le communiqué</a> -->
+</div>

template-parts/components/post-card.php

@@ -28,17 +28,25 @@ $numerotation = get_post_meta($ID, 'post_numerotation', true);
 		</div>
 		<div class="card__details">
 
-			<time datetime="<?php echo $date; ?>" class="card__details-date date"><?php echo $date; ?></time>
+			<div class="card__details-text">
+				<time datetime="<?php echo $date; ?>" class="card__details-date date"><?php echo $date; ?></time>
 
-			<?php if ($authors) : ?>
-				<ul class="post-card__authors">
-					<?php foreach ($authors as $author) : ?>
-						<li class="author"><?php echo $author->post_title; ?></li>
-					<?php endforeach; ?>
-				</ul>
+				<?php if ($authors) : ?>
+					<ul class="post-card__authors">
+						<?php foreach ($authors as $author) : ?>
+							<li class="author"><?php echo $author->post_title; ?></li>
+						<?php endforeach; ?>
+					</ul>
+				<?php endif; ?>
+			</div>
+			<?php if ($current_post_type === 'outils-pedagogiques' && has_post_thumbnail($ID)) : ?>
+				<div class="card__thumbnail">
+					<?php the_post_thumbnail('medium'); ?>
+				</div>
 			<?php endif; ?>
 		</div>
 
+
 	</div>
 
 </div>