FEATURE Improving swiper behaviour in component
This commit is contained in:
Antoine M
parent
41683a43de
commit
0efd5c2df7
|
|
@ -17,7 +17,7 @@ $last_issue = $dynamiques->posts[0];
|
|||
|
||||
$issue_related_articles = new WP_Query(array(
|
||||
'post_type' => 'articles',
|
||||
'posts_per_page' => 3,
|
||||
'posts_per_page' => -1,
|
||||
'orderby' => 'date',
|
||||
'order' => 'DESC',
|
||||
'meta_query' => array(
|
||||
|
|
@ -29,6 +29,7 @@ $issue_related_articles = new WP_Query(array(
|
|||
),
|
||||
));
|
||||
|
||||
|
||||
?>
|
||||
|
||||
<section class="block-dernieres-dynamiques content-section ">
|
||||
|
|
@ -79,7 +80,7 @@ $issue_related_articles = new WP_Query(array(
|
|||
</h3>
|
||||
|
||||
|
||||
<div class="article-caroussel">
|
||||
<div class="article-caroussel article-caroussel--<?php echo $displayType; ?>">
|
||||
|
||||
<?php if ($displayType === 'grid') : ?>
|
||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
||||
|
|
@ -118,23 +119,69 @@ $issue_related_articles = new WP_Query(array(
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
<button class="related-articles__show-all">
|
||||
Tout afficher
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
<?php else : ?>
|
||||
<div class="article-caroussel__slider">
|
||||
<p>sliiiiiiiidzer</p>
|
||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
||||
<div class="article-card">
|
||||
<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
|
||||
<?php if ($issue_related_articles->have_posts()) : ?>
|
||||
<div class="swiper dernieres-dynamiques-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php while ($issue_related_articles->have_posts()) : $issue_related_articles->the_post(); ?>
|
||||
<article class="article-card swiper-slide">
|
||||
<div class="content-meta">
|
||||
<span class="content-meta__type content-meta__type--article">Article</span>
|
||||
</div>
|
||||
<div class="article-card__content">
|
||||
<h4 class="article-card__title title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
|
||||
<?php
|
||||
$etiquettes = get_the_terms(get_the_ID(), 'etiquettes');
|
||||
if ($etiquettes): ?>
|
||||
<ul class="article-tags-list">
|
||||
|
||||
<?php foreach ($etiquettes as $etiquette): ?>
|
||||
<li class="article-card__tag article-tag"><?php echo esc_html($etiquette->name); ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php get_template_part('template-parts/components/cta--go', null, array(
|
||||
'url' => get_the_permalink(),
|
||||
'label' => 'Lire la revue',
|
||||
'target' => '_blank',
|
||||
)); ?>
|
||||
</div>
|
||||
|
||||
<div class="card-revue__issue-thumbnail-wrapper">
|
||||
<?php $post_thumbnail_id = get_the_post_thumbnail(get_the_ID(), 'full'); ?>
|
||||
<div class="card-revue__issue-thumbnail">
|
||||
<?php if ($post_thumbnail_id) : ?>
|
||||
<?php echo $post_thumbnail_id; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="card-background"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-controls">
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<button class="related-articles__show-all">
|
||||
Tout afficher
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -149,63 +196,3 @@ restore_current_blog();
|
|||
|
||||
?>
|
||||
<?php
|
||||
|
||||
$args = array(
|
||||
'post_type' => 'post',
|
||||
'posts_per_page' => 8,
|
||||
);
|
||||
$query = new WP_Query($args);
|
||||
|
||||
$query = new WP_Query(array(
|
||||
'post_type' => 'articles',
|
||||
'posts_per_page' => 3,
|
||||
'orderby' => 'date',
|
||||
'order' => 'DESC',
|
||||
'meta_query' => array(
|
||||
array(
|
||||
'key' => 'related_revue',
|
||||
'value' => $last_issue->ID,
|
||||
'compare' => '=',
|
||||
),
|
||||
),
|
||||
));
|
||||
|
||||
|
||||
// Enqueue Swiper CSS and JS
|
||||
// wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
|
||||
// wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);
|
||||
|
||||
?>
|
||||
<!-- <section <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<h2>lalala actualités</h2>
|
||||
<?php if ($query->have_posts()) : ?>
|
||||
<div class="swiper latest-news-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php while ($query->have_posts()) : $query->the_post(); ?>
|
||||
<div class="swiper-slide">
|
||||
<article class="news-card">
|
||||
<?php if (has_post_thumbnail()) : ?>
|
||||
<div class="news-image">
|
||||
<?php the_post_thumbnail('medium'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="news-content">
|
||||
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
|
||||
<div class="news-excerpt">
|
||||
<?php the_excerpt(); ?>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endif; ?>
|
||||
</section> -->
|
||||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => 'fc77f5e49db9a6ddefa2');
|
||||
<?php return array('dependencies' => array(), 'version' => '3220a399e5c8ef145c56');
|
||||
|
|
|
|||
|
|
@ -2,28 +2,20 @@
|
|||
/*!******************************************!*\
|
||||
!*** ./src/dernieres-dynamiques/view.js ***!
|
||||
\******************************************/
|
||||
// document.addEventListener("DOMContentLoaded", function () {
|
||||
// new Swiper(".latest-news-swiper", {
|
||||
// slidesPerView: 1,
|
||||
// spaceBetween: 30,
|
||||
// pagination: {
|
||||
// el: ".swiper-pagination",
|
||||
// clickable: true,
|
||||
// },
|
||||
// navigation: {
|
||||
// nextEl: ".swiper-button-next",
|
||||
// prevEl: ".swiper-button-prev",
|
||||
// },
|
||||
// breakpoints: {
|
||||
// 640: {
|
||||
// slidesPerView: 2,
|
||||
// },
|
||||
// 1024: {
|
||||
// slidesPerView: 2,
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new Swiper(".dernieres-dynamiques-swiper", {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev"
|
||||
}
|
||||
});
|
||||
});
|
||||
/******/ })()
|
||||
;
|
||||
//# sourceMappingURL=view.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"dernieres-dynamiques/view.js","mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,M","sources":["webpack://dernieres-dynamiques/./src/dernieres-dynamiques/view.js"],"sourcesContent":["// document.addEventListener(\"DOMContentLoaded\", function () {\n// \tnew Swiper(\".latest-news-swiper\", {\n// \t\tslidesPerView: 1,\n// \t\tspaceBetween: 30,\n// \t\tpagination: {\n// \t\t\tel: \".swiper-pagination\",\n// \t\t\tclickable: true,\n// \t\t},\n// \t\tnavigation: {\n// \t\t\tnextEl: \".swiper-button-next\",\n// \t\t\tprevEl: \".swiper-button-prev\",\n// \t\t},\n// \t\tbreakpoints: {\n// \t\t\t640: {\n// \t\t\t\tslidesPerView: 2,\n// \t\t\t},\n// \t\t\t1024: {\n// \t\t\t\tslidesPerView: 2,\n// \t\t\t},\n// \t\t},\n// \t});\n// });\n"],"names":[],"sourceRoot":""}
|
||||
{"version":3,"file":"dernieres-dynamiques/view.js","mappings":";;;;AAAAA,QAAQ,CAACC,gBAAgB,CAAC,kBAAkB,EAAE,YAAY;EACzD,IAAIC,MAAM,CAAC,8BAA8B,EAAE;IAC1CC,aAAa,EAAE,CAAC;IAChBC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE;MACXC,EAAE,EAAE,oBAAoB;MACxBC,SAAS,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACXC,MAAM,EAAE,qBAAqB;MAC7BC,MAAM,EAAE;IACT;EACD,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://dernieres-dynamiques/./src/dernieres-dynamiques/view.js"],"sourcesContent":["document.addEventListener(\"DOMContentLoaded\", function () {\n\tnew Swiper(\".dernieres-dynamiques-swiper\", {\n\t\tslidesPerView: 2,\n\t\tspaceBetween: 30,\n\t\tpagination: {\n\t\t\tel: \".swiper-pagination\",\n\t\t\tclickable: true,\n\t\t},\n\t\tnavigation: {\n\t\t\tnextEl: \".swiper-button-next\",\n\t\t\tprevEl: \".swiper-button-prev\",\n\t\t},\n\t});\n});\n"],"names":["document","addEventListener","Swiper","slidesPerView","spaceBetween","pagination","el","clickable","navigation","nextEl","prevEl"],"sourceRoot":""}
|
||||
|
|
@ -17,7 +17,7 @@ $last_issue = $dynamiques->posts[0];
|
|||
|
||||
$issue_related_articles = new WP_Query(array(
|
||||
'post_type' => 'articles',
|
||||
'posts_per_page' => 3,
|
||||
'posts_per_page' => -1,
|
||||
'orderby' => 'date',
|
||||
'order' => 'DESC',
|
||||
'meta_query' => array(
|
||||
|
|
@ -29,6 +29,7 @@ $issue_related_articles = new WP_Query(array(
|
|||
),
|
||||
));
|
||||
|
||||
|
||||
?>
|
||||
|
||||
<section class="block-dernieres-dynamiques content-section ">
|
||||
|
|
@ -79,7 +80,7 @@ $issue_related_articles = new WP_Query(array(
|
|||
</h3>
|
||||
|
||||
|
||||
<div class="article-caroussel">
|
||||
<div class="article-caroussel article-caroussel--<?php echo $displayType; ?>">
|
||||
|
||||
<?php if ($displayType === 'grid') : ?>
|
||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
||||
|
|
@ -118,23 +119,69 @@ $issue_related_articles = new WP_Query(array(
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
<button class="related-articles__show-all">
|
||||
Tout afficher
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
<?php else : ?>
|
||||
<div class="article-caroussel__slider">
|
||||
<p>sliiiiiiiidzer</p>
|
||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
||||
<div class="article-card">
|
||||
<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
|
||||
<?php if ($issue_related_articles->have_posts()) : ?>
|
||||
<div class="swiper dernieres-dynamiques-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php while ($issue_related_articles->have_posts()) : $issue_related_articles->the_post(); ?>
|
||||
<article class="article-card swiper-slide">
|
||||
<div class="content-meta">
|
||||
<span class="content-meta__type content-meta__type--article">Article</span>
|
||||
</div>
|
||||
<div class="article-card__content">
|
||||
<h4 class="article-card__title title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
|
||||
<?php
|
||||
$etiquettes = get_the_terms(get_the_ID(), 'etiquettes');
|
||||
if ($etiquettes): ?>
|
||||
<ul class="article-tags-list">
|
||||
|
||||
<?php foreach ($etiquettes as $etiquette): ?>
|
||||
<li class="article-card__tag article-tag"><?php echo esc_html($etiquette->name); ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php get_template_part('template-parts/components/cta--go', null, array(
|
||||
'url' => get_the_permalink(),
|
||||
'label' => 'Lire la revue',
|
||||
'target' => '_blank',
|
||||
)); ?>
|
||||
</div>
|
||||
|
||||
<div class="card-revue__issue-thumbnail-wrapper">
|
||||
<?php $post_thumbnail_id = get_the_post_thumbnail(get_the_ID(), 'full'); ?>
|
||||
<div class="card-revue__issue-thumbnail">
|
||||
<?php if ($post_thumbnail_id) : ?>
|
||||
<?php echo $post_thumbnail_id; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="card-background"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-controls">
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<button class="related-articles__show-all">
|
||||
Tout afficher
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -149,63 +196,3 @@ restore_current_blog();
|
|||
|
||||
?>
|
||||
<?php
|
||||
|
||||
$args = array(
|
||||
'post_type' => 'post',
|
||||
'posts_per_page' => 8,
|
||||
);
|
||||
$query = new WP_Query($args);
|
||||
|
||||
$query = new WP_Query(array(
|
||||
'post_type' => 'articles',
|
||||
'posts_per_page' => 3,
|
||||
'orderby' => 'date',
|
||||
'order' => 'DESC',
|
||||
'meta_query' => array(
|
||||
array(
|
||||
'key' => 'related_revue',
|
||||
'value' => $last_issue->ID,
|
||||
'compare' => '=',
|
||||
),
|
||||
),
|
||||
));
|
||||
|
||||
|
||||
// Enqueue Swiper CSS and JS
|
||||
// wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
|
||||
// wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);
|
||||
|
||||
?>
|
||||
<!-- <section <?php echo get_block_wrapper_attributes(); ?>>
|
||||
<h2>lalala actualités</h2>
|
||||
<?php if ($query->have_posts()) : ?>
|
||||
<div class="swiper latest-news-swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php while ($query->have_posts()) : $query->the_post(); ?>
|
||||
<div class="swiper-slide">
|
||||
<article class="news-card">
|
||||
<?php if (has_post_thumbnail()) : ?>
|
||||
<div class="news-image">
|
||||
<?php the_post_thumbnail('medium'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="news-content">
|
||||
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
|
||||
<div class="news-excerpt">
|
||||
<?php the_excerpt(); ?>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php endif; ?>
|
||||
</section> -->
|
||||
|
|
@ -1,22 +1,14 @@
|
|||
// document.addEventListener("DOMContentLoaded", function () {
|
||||
// new Swiper(".latest-news-swiper", {
|
||||
// slidesPerView: 1,
|
||||
// spaceBetween: 30,
|
||||
// pagination: {
|
||||
// el: ".swiper-pagination",
|
||||
// clickable: true,
|
||||
// },
|
||||
// navigation: {
|
||||
// nextEl: ".swiper-button-next",
|
||||
// prevEl: ".swiper-button-prev",
|
||||
// },
|
||||
// breakpoints: {
|
||||
// 640: {
|
||||
// slidesPerView: 2,
|
||||
// },
|
||||
// 1024: {
|
||||
// slidesPerView: 2,
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
new Swiper(".dernieres-dynamiques-swiper", {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 30,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user