FEATURE Addinf the reportage variations

resources/css/app.css

@@ -125,6 +125,7 @@
 @import './blocks/random-collection-image.css';
 @import './blocks/variants.css';
 @import './blocks/statistiques-collections.css';
+@import './blocks/reportages-list.css';
 
 /* ########### COMPOSITIONS ############ */
 @import './compositions/nos-collections.css';

resources/css/blocks/reportages-list.css

@@ -0,0 +1,114 @@
+.reportages-list {
+  &__list {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-8;
+  }
+}
+
+/* .block-front-header + .press-ressources {
+  margin-top: -300px;
+}
+
+.block-front-header:has(+ .press-ressources) {
+  @apply pb-72;
+} */
+
+.reportages-grid {
+  @apply mt-12;
+  .wp-block-carhop-blocks-content-box {
+    @apply !w-full !m-0;
+    .content-box__innerblocks {
+      @apply p-0;
+      > * {
+        @apply w-full max-w-none;
+      }
+    }
+  }
+  &__inner {
+    @apply grid gap-8;
+    grid-template-columns: 1fr;
+    @screen lg {
+      grid-template-columns: 250px 3fr;
+    }
+  }
+  aside {
+    ul.reportages-grid__years-list {
+      @apply sticky top-0;
+
+      li.reportages-grid__year {
+        @apply !list-none border border-primary border-solid text-4xl fjalla;
+        a {
+          @apply !no-underline block  p-6;
+        }
+
+        &:hover {
+          @apply bg-carhop-green-700 text-white;
+          a {
+            @apply !text-white !no-underline filter-none;
+          }
+        }
+      }
+      li.reportages-grid__year + li.reportages-grid__year {
+        @apply mt-4;
+      }
+
+      @media (max-width: 1024px) {
+        @apply flex items-center gap-4;
+
+        li.reportages-grid__year {
+          @apply !mt-0;
+        }
+      }
+    }
+  }
+
+  &__archives-list {
+    @apply grid grid-cols-1 gap-8;
+    .reportages-grid__year-title-wrapper {
+      @apply relative mb-6;
+      &:after {
+        @apply content-[''] block w-full bg-primary absolute;
+        top: 50%;
+        height: 1px;
+      }
+      h3 {
+        @apply bg-white w-fit mx-auto px-8 relative z-10 text-lg nunito !font-bold tracking-wide;
+      }
+    }
+  }
+  &__archives-decade {
+    .post-card + .post-card {
+      @apply mt-8;
+    }
+  }
+
+  &__title {
+    @apply my-12;
+  }
+  ul.archives-decade-used-types {
+    @apply flex items-center gap-10;
+
+    li.archives-decade-used-type {
+      @apply text-primary flex items-center gap-2;
+
+      &::before {
+        @apply content-[''] block w-8 h-8 bg-no-repeat bg-center bg-contain;
+      }
+
+      &--audio::before {
+        background-image: url('../resources/img/icons/carhop-source-audio.svg');
+      }
+      &--video::before {
+        background-image: url('../resources/img/icons/carhop-source-video.svg');
+      }
+      &--photo::before {
+        background-image: url('../resources/img/icons/carhop-source-photo.svg');
+      }
+      &--article::before {
+        background-image: url('../resources/img/icons/carhop-source-ecrits.svg');
+      }
+    }
+  }
+}
+
+.ressources-tabs-grid {
+}

resources/css/components/content-meta.css

@@ -31,6 +31,7 @@
     &--dbmob:before {
       @apply w-4 bg-carhop-red-700;
     }
+    &--reportages:before,
     &--fonds-archives:before {
       @apply w-6 bg-carhop-blue-500 rotate-45;
     }

resources/css/components/post-card.css

@@ -134,7 +134,7 @@
     }
   }
 }
-
+.post-card--reportages,
 .post-card--archives-presse {
   &::after {
     @apply !content-none;

template-parts/components/cards/reportages-card.php

@@ -0,0 +1,94 @@
+<?php
+$ID = $args['ID'] ?? null;
+$current_post_type = 'reportages';
+$title = get_the_title($ID);
+$description = get_field('description', $ID) ?? false;
+
+$excerpt = get_the_excerpt($ID);
+$link = get_field('url', $ID) ?? "#";
+
+$has_post_thumbnail = has_post_thumbnail($ID);
+$thumbnail_url = get_the_post_thumbnail_url($ID) ?? null;
+
+$year = get_field('year', $ID);
+
+$authors = get_field('authors', $ID);
+$editors = get_field('editors', $ID);
+
+$numerotation = get_post_meta($ID, 'post_numerotation', true);
+$tags = get_the_terms($ID, 'etiquettes');
+
+$media_types = get_field('media_type', $ID);
+
+$media_types_list = array(
+    'audio' => 'Audio',
+    'video' => 'Vidéo',
+    'photo' => 'Photo',
+    'image' => 'Image',
+    'article' => 'Article',
+);
+
+?>
+
+<a class="post-card post-card--reportages <?php $has_post_thumbnail ? 'post-card--has-thumbnail' : ''; ?> card" href="<?php echo $link; ?> " target="_blank">
+    <?php if ($has_post_thumbnail) : ?>
+        <div class="post-card__thumbnail">
+            <img src="<?php echo $thumbnail_url; ?>" alt="<?php echo $title; ?>">
+        </div>
+    <?php endif; ?>
+    <div class="card__inner">
+        <?php get_template_part('template-parts/components/content-meta', null, array(
+            'current_post_type' => $current_post_type,
+            'current_post_id' => $ID
+        )); ?>
+        <div class="card__content">
+            <h3 class="card__title"><?php echo $title; ?></h3>
+            <?php if ($showExcerpt) : ?>
+                <div class="card__excerpt"><?php echo $excerpt; ?></div>
+            <?php endif; ?>
+        </div>
+        <div class="card__details">
+
+            <div class="post-card__details-text">
+                <time datetime="<?php echo $year; ?>" class="card__details-date date"><?php echo $year; ?></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; ?>
+                        <?php foreach ($editors as $editor) : ?>
+                            <li class="editor"><?php echo $editor->post_title; ?></li>
+                        <?php endforeach; ?>
+                    </ul>
+                <?php endif; ?>
+            </div>
+
+            <?php if ($tags) : ?>
+                <ul class="tag-list">
+                    <?php foreach ($tags as $tag) : ?>
+                        <li class="tag-list__tag"><?php echo $tag->name; ?></li>
+                    <?php endforeach; ?>
+                </ul>
+            <?php endif; ?>
+            <?php if ($description) : ?>
+                <div class="card__description"><?php echo $description; ?></div>
+            <?php endif; ?>
+            <?php if ($media_types) : ?>
+                <ul class="media-type-list">
+                    <?php foreach ($media_types as $media_type) : ?>
+                        <?php
+                        $amount = $media_type['amount'];
+                        $media_type = $media_type['acf_fc_layout'];
+                        if (!$amount || !$media_type) continue;
+                        ?>
+                        <li class="media-type media-type--<?php echo esc_attr($media_type); ?>"><?php echo $amount . ' ' . ($media_types_list[$media_type] ?? $media_type) . ($amount > 1 ? 's' : ''); ?></li>
+                    <?php endforeach; ?>
+                </ul>
+            <?php endif; ?>
+        </div>
+
+
+    </div>
+
+</a>

template-parts/post-types/reportages/reportages-grid.php

@@ -0,0 +1,60 @@
+<?php
+$archives_presse = get_posts(array(
+	'post_type' => 'reportages',
+	'posts_per_page' => -1,
+	'meta_key' => 'year',
+	'orderby' => 'meta_value_num',
+	'order' => 'ASC',
+));
+
+
+$archives_presse_by_decade = [];
+
+foreach ($archives_presse as $archive) {
+	$year = (int) get_field('year', $archive->ID);
+	$media_types = get_field('media_type', $archive->ID);
+
+	if (!$year) continue;
+	$decade = floor($year / 10) * 10;
+	$archives_presse_by_decade[$decade][] = $archive;
+}
+
+$media_types_list = array(
+	'audio' => 'Audios',
+	'video' => 'Vidéos',
+	'photo' => 'Photo',
+	'image' => 'Images',
+	'article' => 'Articles',
+);
+
+?>
+
+
+<div class="reportages-grid">
+
+
+	<div class="reportages-grid__inner">
+		<aside>
+			<ul class="reportages-grid__years-list">
+				<?php foreach ($archives_presse_by_decade as $decade => $archives) : ?>
+					<li class="reportages-grid__year">
+						<a href="#archives-presse-year-<?php echo $decade; ?>"><?php echo $decade; ?></a>
+					</li>
+				<?php endforeach; ?>
+			</ul>
+		</aside>
+		<div class="reportages-grid__archives-list">
+
+			<?php foreach ($archives_presse_by_decade as $decade => $archives) : ?>
+				<div class="reportages-grid__archives-decade">
+					<div id="reportages-grid-year-<?php echo $decade; ?>" class="reportages-grid__year-title-wrapper">
+						<h3><?php echo $decade; ?></h3>
+					</div>
+					<?php foreach ($archives as $archive) : ?>
+						<?php get_template_part('template-parts/components/cards/reportages-card', '', array('ID' => $archive->ID)); ?>
+					<?php endforeach; ?>
+				</div>
+			<?php endforeach; ?>
+		</div>
+	</div>
+</div>