Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Optimizing post header thumbnail with an overlay

Browse Source
This commit is contained in:
Nonimart 2025-08-21 16:17:43 +02:00
parent 961fa2e4c5
commit c897e2e656
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,37 @@
@apply bg-white text-primary; @apply bg-white text-primary;
} }
.thumbnail-wrapper { .thumbnail-wrapper {
@apply bg-red-200; @apply relative z-20;
aspect-ratio: 4/5;
padding: 1.2rem;
&:before {
content: '';
@apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full z-10;
}
img { img {
/* max-height: 200px; */ /* max-height: 200px; */
@apply object-contain; @apply w-full h-full relative z-10;
@apply object-cover;
/* width: calc(100% - 2rem);
height: calc(100% - 2rem);
margin: 0 auto; */
}
.thumbnail-overlay {
@apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
transform: translate(12px, 12px) rotate(3deg);
background-image: linear-gradient(#efe8ff, #efe8ff);
background-size: calc(100% - 12px) calc(100% - 12px);
background-repeat: no-repeat;
background-position: center;
background-blend-mode: color-burn;
&:after {
content: '';
@apply bg-carhop-purple-200;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
}
} }
} }

1
template-parts/post-header.php
View File

@ -24,6 +24,7 @@ $citeReference = get_field('cite_reference', get_the_ID());
<?php if ($hasThumbnail) : ?> <?php if ($hasThumbnail) : ?>
<div class="thumbnail-wrapper"> <div class="thumbnail-wrapper">
<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?> <?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
<div class="thumbnail-overlay"></div>
</div> </div>
<?php endif; ?> <?php endif; ?>