handling previous/next news

This commit is contained in:
Antoine M 2024-01-09 09:29:53 +01:00
parent 521b0b0f44
commit 51975d1bc0
2 changed files with 98 additions and 4 deletions

View File

@ -1,8 +1,6 @@
body.acoustisque {
@apply bg-slate-800;
}
.entry-content.single-news-editor-content {
@apply mx-auto mt-8 px-4;
ul li::marker,
ol li::marker {
@apply text-purple-500;
@ -11,3 +9,65 @@ body.acoustisque {
@apply !bg-secondary;
}
}
.post-news-page-container {
.previous-next-posts {
@apply grid md:grid-cols-2 gap-y-4 gap-8 mx-auto max-w-screen-xl px-6 xl:px-24 my-16;
&__previous,
&__next {
@apply flex gap-4 bg-white rounded-lg shadowed py-4 px-6 items-center;
transition: all 0.2s ease-out;
text-decoration: none !important;
&:hover {
@apply -translate-y-1;
}
.post_thumbnail {
@apply object-contain
rounded-lg
w-20
h-20;
}
.post_denomination,
.post_title {
@apply font-bold no-underline;
}
.post_denomination {
@apply mb-1 text-secondary;
}
.post_title {
@apply text-neutral-900;
line-height: 1.4;
}
}
&__previous {
@apply text-left justify-end;
&:after {
@apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0;
content: '';
margin-top: auto;
margin-bottom: auto;
background-image: url('../resources/img/graphic-assets/chevron_right.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 50% 50%;
}
}
&__next {
@apply text-right;
&:before {
@apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0;
content: '';
margin-top: auto;
margin-bottom: auto;
background-image: url('../resources/img/graphic-assets/chevron_left.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 50% 50%;
}
}
&__link-content {
@apply h-fit pt-1;
}
}
}

View File

@ -7,6 +7,7 @@ $args = array(
$relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="single-post-container single-post-container--news <?php echo $thematiqueColorSlug ? "single-post-container--" . $thematiqueColorSlug : "" ?>">
@ -48,11 +49,44 @@ $relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
));
?>
<article class="entry-content single-news-editor-content">
<article class="entry-content single-news-editor-content">
<?php
the_content();
?>
</article>
<!-- PREVIOUS / NEXT ARTICLES -->
<div class="previous-next-posts">
<?php
$prev_post = get_previous_post() ?? null;
$next_post = get_next_post() ?? null;
$prev_thumbnail_url = get_the_post_thumbnail_url($prev_post, 'thumbnail');
$next_thumbnail_url = get_the_post_thumbnail_url($next_post, 'thumbnail');
?>
<?php if ($next_post) : ?>
<a class="previous-next-posts__next" href="<?php echo get_the_permalink($next_post->ID) ?>">
<div class="previous-next-posts__link-content">
<p class="post_denomination"><?php echo __("News suivante ", "homegrade-theme__texte-fonctionnel") ?></p>
<p class="post_title"><?php echo $next_post->post_title ?></p>
</div>
<img class="post_thumbnail" src="<?php echo $next_thumbnail_url ?>" alt="">
</a>
<?php endif; ?>
<?php if ($prev_post) : ?>
<a class="previous-next-posts__previous" href="<?php echo get_the_permalink($prev_post->ID) ?>">
<img class="post_thumbnail" src="<?php echo $prev_thumbnail_url ?>" alt="">
<div class="previous-next-posts__link-content">
<p class="post_denomination"><?php echo __("News précédente ", "homegrade-theme__texte-fonctionnel") ?></p>
<p class="post_title"><?php echo $prev_post->post_title ?></p>
</div>
</a>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>