Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE refactoring presse components to handle datas with the new post type dedicated archives presses
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2026-03-17 14:59:24 +01:00
parent e54304b2b1
commit af540c312e
8 changed files with 237 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
resources/css/blocks/press-ressources.css
View File

@ -153,21 +153,6 @@
}
}
.presse-reviews {
@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;
}
}
}
&__list {
@apply grid grid-cols-1 md:grid-cols-2 gap-8;
}
}
.ressources-grid-content-wrapper {
&[data-active-tab='communiques'] {
.ressources-graphiques,
@ -189,9 +174,84 @@
}
}
.presse-reviews {
@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: 250px 3fr;
}
aside {
ul.presse-reviews__years-list {
@apply sticky top-0;
li.presse-reviews__year {
@apply list-none border border-primary border-solid p-6 text-4xl fjalla;
}
li.presse-reviews__year + li.presse-reviews__year {
@apply mt-4;
}
}
}
&__archives-list {
@apply grid grid-cols-1 gap-8;
.archives-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 bg-red-300;
}
&--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');
}
}
}
}
/*
.archives-presse-card {
@apply block;
@apply block bg-red-500;
&__inner {
@apply flex items-start justify-between gap-8;
}
@ -208,4 +268,4 @@
.archives-presse-card__file-type {
@apply uppercase;
}
}
} */

27
resources/css/components/post-card.css
View File

@ -84,3 +84,30 @@
}
}
}
.post-card--archives-presse {
&::after {
@apply !content-none;
}
.media-type-list {
.media-type {
@apply flex items-center gap-2 w-fit;
&::before {
@apply content-[''] block w-8 h-8 bg-no-repeat bg-center bg-contain bg-red-300;
}
&--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');
}
}
}
}

14
resources/img/icons/carhop-source-audio.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="35" height="35" fill="#136F63"/>
<g clip-path="url(#clip0_3635_16495)">
<path d="M7.58008 12.272H11.0646L19.0193 7.97668V27.0408L11.3081 23.0515H7.58008V12.272Z" stroke="white" stroke-width="2"/>
<path d="M10.873 12.2721V23.0516" stroke="white" stroke-width="2"/>
<path d="M27.4199 10.1302V25.1874" stroke="white" stroke-width="2"/>
<path d="M23.2402 14.8257V20.492" stroke="white" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0_3635_16495">
<rect width="21" height="21" fill="white" transform="translate(7 7)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 653 B

16
resources/img/icons/carhop-source-ecrits.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="35" height="35" fill="#136F63"/>
<g clip-path="url(#clip0_3635_16500)">
<path d="M12.2363 11.4052H24.1386H27.3785V30.3677H12.2363V11.4052Z" stroke="white" stroke-width="2"/>
<path d="M12.2362 25.8595H7.62207V5.63232H23.7778V11.4052" stroke="white" stroke-width="2"/>
<path d="M24.8103 19.1255H14.9229" stroke="white" stroke-width="2"/>
<path d="M24.8103 26.4601H14.9229" stroke="white" stroke-width="2"/>
<path d="M22.0555 15.4581H14.9229" stroke="white" stroke-width="2"/>
<path d="M22.0555 22.7927H14.9229" stroke="white" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0_3635_16500">
<rect width="21" height="26" fill="white" transform="translate(7 5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 795 B

13
resources/img/icons/carhop-source-photo.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="35" height="35" fill="#136F63"/>
<g clip-path="url(#clip0_3635_16485)">
<path d="M28.2386 6.79419H6.76074V29.2058H28.2386V6.79419Z" stroke="white" stroke-width="2"/>
<path d="M19.5779 15.7683C20.9061 15.7683 21.9829 14.6448 21.9829 13.2587C21.9829 11.8727 20.9061 10.7491 19.5779 10.7491C18.2496 10.7491 17.1729 11.8727 17.1729 13.2587C17.1729 14.6448 18.2496 15.7683 19.5779 15.7683Z" stroke="white" stroke-width="2"/>
<path d="M6.76074 29.2058L14.6913 20.9305L18.3292 24.7267L28.2386 14.3785" stroke="white" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0_3635_16485">
<rect width="23" height="24" fill="white" transform="translate(6 6)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 781 B

12
resources/img/icons/carhop-source-video.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="35" height="35" fill="#136F63"/>
<g clip-path="url(#clip0_3635_16490)">
<path d="M28.2386 5.79419H6.76074V28.2058H28.2386V5.79419Z" stroke="white" stroke-width="2"/>
<path d="M14.8519 12.9894L21.5646 17L14.7529 21.0106L14.8519 12.9894Z" stroke="white" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0_3635_16490">
<rect width="23" height="24" fill="white" transform="translate(6 5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 523 B

30
template-parts/components/cards/archive-presse-card.php
View File

@ -10,7 +10,7 @@ $link = get_field('source_url', $ID) ?? "#";
$has_post_thumbnail = has_post_thumbnail($ID);
$thumbnail_url = get_the_post_thumbnail_url($ID) ?? null;
$date = get_the_date('F Y', $ID);
$year = get_field('year', $ID);
$authors = get_field('authors', $ID);
$editors = get_field('editors', $ID);
@ -18,9 +18,19 @@ $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--<?php echo $current_post_type . ' ' . ($has_post_thumbnail ? 'post-card--has-thumbnail' : ''); ?> card" href="<?php echo $link; ?> " target="_blank">
<a class="post-card post-card--archives-presse <?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; ?>">
@ -40,7 +50,7 @@ $tags = get_the_terms($ID, 'etiquettes');
<div class="card__details">
<div class="post-card__details-text">
<time datetime="<?php echo $date; ?>" class="card__details-date date"><?php echo $date; ?></time>
<time datetime="<?php echo $year; ?>" class="card__details-date date"><?php echo $year; ?></time>
<?php if ($authors) : ?>
<ul class="post-card__authors">
@ -65,6 +75,20 @@ $tags = get_the_terms($ID, 'etiquettes');
<?php endforeach; ?>
</ul>
<?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'];
write_log($media_type);
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>

77
template-parts/post-types/archives-presse/archives-presse-grid.php
View File

@ -1,52 +1,77 @@
<?php
$archives_presse = get_posts(array(
'post_type' => 'archives-presse',
'posts_per_page' => 10,
'posts_per_page' => -1,
'meta_key' => 'year',
'orderby' => 'meta_value_num',
'order' => 'ASC',
));
$archives_presse_by_decade = array();
$archives_presse_by_decade = [];
$used_media_types_by_decade = [];
foreach ($archives_presse as $archive) {
$year = (int) get_field('year', $archive->ID);
if (!$year) {
continue;
}
$media_types = get_field('media_type', $archive->ID);
if (!$year) continue;
$decade = floor($year / 10) * 10;
$archives_presse_by_decade[$decade][] = $archive;
if (isset($media_types) && is_array($media_types)) {
foreach ($media_types as $media_type) {
if (!isset($used_media_types_by_decade[$decade])) {
$used_media_types_by_decade[$decade] = [];
}
if (!in_array($media_type['acf_fc_layout'], $used_media_types_by_decade[$decade])) {
$used_media_types_by_decade[$decade][] = $media_type['acf_fc_layout'];
}
}
}
}
write_log($archives_presse_by_decade);
$media_types_list = array(
'audio' => 'Audios',
'video' => 'Vidéos',
'photo' => 'Photo',
'image' => 'Images',
'article' => 'Articles',
);
?>
<div class="presse-reviews">
<h2 class="presse-reviews__title">Ce que dit la presse de nous</h2>
<div class="presse-reviews__inner">
<aside>
<h3>Filtres</h3>
<ul>
<li>
<a href="#">Tous</a>
</li>
<li>
<a href="#">2025</a>
</li>
<ul class="presse-reviews__years-list">
<?php foreach ($archives_presse_by_decade as $decade => $archives) : ?>
<li class="presse-reviews__year">
<a href="#archives-presse-year-<?php echo $decade; ?>"><?php echo $decade; ?></a>
</li>
<?php endforeach; ?>
</ul>
</aside>
<div class="presse-reviews__list">
<div class="presse-reviews__archives-list">
<?php foreach ($archives_presse as $archive) : ?>
<?php get_template_part('template-parts/components/cards/archive-presse-card', '', array('ID' => $archive->ID)); ?>
<?php foreach ($archives_presse_by_decade as $decade => $archives) : ?>
<div class="presse-reviews__archives-decade">
<div id="archives-presse-year-<?php echo $decade; ?>" class="archives-year-title-wrapper">
<h3><?php echo $decade; ?></h3>
</div>
<ul class="archives-decade-used-types">
<?php foreach ($used_media_types_by_decade[$decade] as $media_type) : ?>
<li class="archives-decade-used-type archives-decade-used-type--<?php echo $media_type; ?>">
<?php echo $media_types_list[$media_type] ?? $media_type; ?>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ($archives as $archive) : ?>
<?php get_template_part('template-parts/components/cards/archive-presse-card', '', array('ID' => $archive->ID)); ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</div>
</div>