handling previous/next news
This commit is contained in:
parent
521b0b0f44
commit
51975d1bc0
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 : "" ?>">
|
||||
|
|
@ -53,6 +54,39 @@ $relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
|
|||
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; ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user