Compare commits
2 Commits
49042d38f0
...
dd79192ad8
| Author | SHA1 | Date | |
|---|---|---|---|
|
dd79192ad8 | ||
|
|
d6dff2c358 |
|
|
@ -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';
|
||||
|
|
|
|||
114
resources/css/blocks/reportages-list.css
Normal file
114
resources/css/blocks/reportages-list.css
Normal file
|
|
@ -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 {
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-card--reportages,
|
||||
.post-card--archives-presse {
|
||||
&::after {
|
||||
@apply !content-none;
|
||||
|
|
|
|||
94
template-parts/components/cards/reportages-card.php
Normal file
94
template-parts/components/cards/reportages-card.php
Normal file
|
|
@ -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>
|
||||
60
template-parts/post-types/reportages/reportages-grid.php
Normal file
60
template-parts/post-types/reportages/reportages-grid.php
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user