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

FEATURE Handling thumbnail and post date label variations

Browse Source
This commit is contained in:
Antoine M 2026-03-03 17:01:08 +01:00
parent 542d341335
commit 094c75bf7d
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/css/components/post-header.css
View File

@ -25,7 +25,21 @@
@apply container; @apply container;
} }
@apply max-w-screen-2xl mx-auto; @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 { @screen lg {
grid-template-columns: 4fr 1fr; grid-template-columns: 4fr 1fr;
} }
@ -41,7 +55,7 @@
@apply text-white; @apply text-white;
} }
.thumbnail-wrapper { .thumbnail-wrapper {
@apply order-2 lg:order-1 relative z-20 h-fit; @apply relative z-20 h-fit;
width: calc(100% - 40px); width: calc(100% - 40px);
padding: 1.2rem; padding: 1.2rem;
/* max-width: calc(70% - 40px); /* max-width: calc(70% - 40px);
@ -59,7 +73,7 @@
img { img {
aspect-ratio: 4/5; aspect-ratio: 4/5;
/* max-height: 200px; */ /* 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; @apply object-cover;
/* width: calc(100% - 2rem); /* width: calc(100% - 2rem);

17
template-parts/components/posts/post-header.php
View File

@ -6,8 +6,9 @@ $postTitle = get_the_title($post_id);
$hasNumerotation = hasPostTypeNumerotation($post_id); $hasNumerotation = hasPostTypeNumerotation($post_id);
$hasThumbnail = has_post_thumbnail(); $hasThumbnail = has_post_thumbnail();
$authors = get_field('authors', $ID); $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) : ?> <?php if ($hasNumerotation) : ?>
@ -20,7 +21,7 @@ $authors = get_field('authors', $ID);
<?php endif; ?> <?php endif; ?>
<section class="post-header post-header--<?php echo $post_type; ?> "> <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) : ?> <?php if ($hasThumbnail) : ?>
<div class="thumbnail-wrapper"> <div class="thumbnail-wrapper">
@ -31,13 +32,13 @@ $authors = get_field('authors', $ID);
'style' => 'object-fit: cover; object-position: ' . esc_attr($focal_position) . ';' '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> </div>
<?php endif; ?> <?php endif; ?>
<div class="content"> <div class="content">
<?php get_template_part('template-parts/components/content-meta', null, array( <?php get_template_part('template-parts/components/content-meta', null, array(
'current_post_id' => $post_id, 'current_post_id' => $post_id,
'current_post_type' => $post_type 'current_post_type' => $post_type
@ -52,9 +53,11 @@ $authors = get_field('authors', $ID);
<div class="post-details"> <div class="post-details">
<div class="post-meta"> <div class="post-meta">
<div class="post-date-info"> <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> <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>
</div> </div>