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

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

@ -8,7 +8,7 @@
}
&__main-author {
@apply text-white font-light tracking-wide flex items-center gap-3 mt-4;
&::before {
@apply w-6 h-6 block bg-no-repeat bg-center bg-contain;
content: '';
@ -25,7 +25,21 @@
@apply container;
}
@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 {
grid-template-columns: 4fr 1fr;
}
@ -41,7 +55,7 @@
@apply text-white;
}
.thumbnail-wrapper {
@apply order-2 lg:order-1 relative z-20 h-fit;
@apply relative z-20 h-fit;
width: calc(100% - 40px);
padding: 1.2rem;
/* max-width: calc(70% - 40px);
@ -59,7 +73,7 @@
img {
aspect-ratio: 4/5;
/* 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;
/* 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);
$hasThumbnail = has_post_thumbnail();
$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) : ?>
@ -20,7 +21,7 @@ $authors = get_field('authors', $ID);
<?php endif; ?>
<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) : ?>
<div class="thumbnail-wrapper">
@ -31,13 +32,13 @@ $authors = get_field('authors', $ID);
'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>
<?php endif; ?>
<div class="content">
<?php get_template_part('template-parts/components/content-meta', null, array(
'current_post_id' => $post_id,
'current_post_type' => $post_type
@ -52,9 +53,11 @@ $authors = get_field('authors', $ID);
<div class="post-details">
<div class="post-meta">
<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>
</div>
</div>