introducing previpus/next question component
This commit is contained in:
parent
d4d101c672
commit
df4d309cb2
|
|
@ -1,3 +1,58 @@
|
|||
.previous-next-questions {
|
||||
@apply grid grid-cols-2 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;
|
||||
transition: all 0.2s ease-out;
|
||||
&:hover {
|
||||
@apply -translate-y-1;
|
||||
}
|
||||
.thematique_icon {
|
||||
@apply object-contain
|
||||
w-20
|
||||
h-20;
|
||||
}
|
||||
.question_type,
|
||||
.question_title {
|
||||
@apply font-bold;
|
||||
}
|
||||
.question_type {
|
||||
@apply mb-1;
|
||||
}
|
||||
.question_title {
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
&__previous {
|
||||
@apply text-right justify-end;
|
||||
&: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%;
|
||||
}
|
||||
}
|
||||
&__next {
|
||||
&: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%;
|
||||
}
|
||||
}
|
||||
&__link-content {
|
||||
@apply h-fit pt-1;
|
||||
}
|
||||
}
|
||||
|
||||
.suggested-publications {
|
||||
.section_titling__title {
|
||||
@apply text-secondary;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ get_header();
|
|||
$currentThematique = get_the_terms(get_the_ID(), 'thematiques')[0];
|
||||
$mainThematique = getMainThematique($currentThematique);
|
||||
$thematiqueColorSlug = $mainThematique->slug;
|
||||
$thematique_icon = get_field('taxonomy_pictures', 'thematiques' . '_' . $mainThematique->term_id)['icon'];
|
||||
|
||||
$args = array(
|
||||
'post_type' => 'conseils',
|
||||
|
|
@ -31,12 +32,52 @@ get_header();
|
|||
'postID' => get_the_ID(),
|
||||
)); ?>
|
||||
|
||||
<!-- ARTICLE -->
|
||||
<article class="container my-8 mx-auto entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>">
|
||||
|
||||
|
||||
<?php the_content() ?>
|
||||
</article>
|
||||
|
||||
<!-- PREVIOUS / NEXT ARTICLES -->
|
||||
<div class="previous-next-questions">
|
||||
<?php
|
||||
$args = array(
|
||||
'post_type' => 'questions',
|
||||
'posts_per_page' => 2,
|
||||
'post_status' => 'publish',
|
||||
'orderby' => 'rand',
|
||||
'post__not_in' => array(get_the_ID()),
|
||||
'tax_query' => array(
|
||||
array(
|
||||
'taxonomy' => 'thematiques',
|
||||
'field' => 'term_id',
|
||||
'terms' => $mainThematique->term_id,
|
||||
)
|
||||
)
|
||||
);
|
||||
$otherQuestions = new WP_Query($args);
|
||||
$previousPost = $otherQuestions->posts[0];
|
||||
$nextPost = $otherQuestions->posts[1];
|
||||
|
||||
?>
|
||||
<a class="previous-next-questions__previous" href="<?php echo get_the_permalink($previousPost->ID) ?>">
|
||||
<div class="previous-next-questions__link-content">
|
||||
<p class="question_type"><?php echo __("Question précédente ", "homegrade-theme__texte-fonctionnel") ?></p>
|
||||
<p class="question_title"><?php echo $previousPost->post_title ?></p>
|
||||
</div>
|
||||
|
||||
<img class="thematique_icon" src="<?php echo $thematique_icon['url'] ?>" alt="">
|
||||
</a>
|
||||
<a class="previous-next-questions__next" href="<?php echo get_the_permalink($previousPost->ID) ?>">
|
||||
<img class="thematique_icon" src="<?php echo $thematique_icon['url'] ?>" alt="">
|
||||
<div class="previous-next-questions__link-content">
|
||||
<p class="question_type"><?php echo __(" Question suivante ", "homegrade-theme__texte-fonctionnel") ?></p>
|
||||
<p class="question_title"><?php echo $nextPost->post_title ?></p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RELATED CONSEILS -->
|
||||
<?php get_template_part('template-components/post-conseils/chapter-header', null, array(
|
||||
'postID' => get_the_ID(),
|
||||
'subtitle' => $mainThematique->name,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user