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(
|
$issue_related_articles = new WP_Query(array(
|
||||||
'post_type' => 'articles',
|
'post_type' => 'articles',
|
||||||
'posts_per_page' => 3,
|
'posts_per_page' => -1,
|
||||||
'orderby' => 'date',
|
'orderby' => 'date',
|
||||||
'order' => 'DESC',
|
'order' => 'DESC',
|
||||||
'meta_query' => array(
|
'meta_query' => array(
|
||||||
|
|
@ -29,6 +29,7 @@ $issue_related_articles = new WP_Query(array(
|
||||||
),
|
),
|
||||||
));
|
));
|
||||||
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<section class="block-dernieres-dynamiques content-section ">
|
<section class="block-dernieres-dynamiques content-section ">
|
||||||
|
|
@ -79,7 +80,7 @@ $issue_related_articles = new WP_Query(array(
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
|
||||||
<div class="article-caroussel">
|
<div class="article-caroussel article-caroussel--<?php echo $displayType; ?>">
|
||||||
|
|
||||||
<?php if ($displayType === 'grid') : ?>
|
<?php if ($displayType === 'grid') : ?>
|
||||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
||||||
|
|
@ -118,23 +119,69 @@ $issue_related_articles = new WP_Query(array(
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<button class="related-articles__show-all">
|
||||||
|
Tout afficher
|
||||||
|
</button>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php else : ?>
|
<?php else : ?>
|
||||||
<div class="article-caroussel__slider">
|
<div class="article-caroussel__slider">
|
||||||
<p>sliiiiiiiidzer</p>
|
<?php if ($issue_related_articles->have_posts()) : ?>
|
||||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
<div class="swiper dernieres-dynamiques-swiper">
|
||||||
<div class="article-card">
|
<div class="swiper-wrapper">
|
||||||
<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
|
<?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>
|
</div>
|
||||||
<?php endforeach; ?>
|
|
||||||
|
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="related-articles__show-all">
|
|
||||||
Tout afficher
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -149,63 +196,3 @@ restore_current_blog();
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<?php
|
<?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 ***!
|
!*** ./src/dernieres-dynamiques/view.js ***!
|
||||||
\******************************************/
|
\******************************************/
|
||||||
// document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
// new Swiper(".latest-news-swiper", {
|
new Swiper(".dernieres-dynamiques-swiper", {
|
||||||
// slidesPerView: 1,
|
slidesPerView: 2,
|
||||||
// spaceBetween: 30,
|
spaceBetween: 30,
|
||||||
// pagination: {
|
pagination: {
|
||||||
// el: ".swiper-pagination",
|
el: ".swiper-pagination",
|
||||||
// clickable: true,
|
clickable: true
|
||||||
// },
|
},
|
||||||
// navigation: {
|
navigation: {
|
||||||
// nextEl: ".swiper-button-next",
|
nextEl: ".swiper-button-next",
|
||||||
// prevEl: ".swiper-button-prev",
|
prevEl: ".swiper-button-prev"
|
||||||
// },
|
}
|
||||||
// breakpoints: {
|
});
|
||||||
// 640: {
|
});
|
||||||
// slidesPerView: 2,
|
|
||||||
// },
|
|
||||||
// 1024: {
|
|
||||||
// slidesPerView: 2,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
/******/ })()
|
/******/ })()
|
||||||
;
|
;
|
||||||
//# sourceMappingURL=view.js.map
|
//# 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(
|
$issue_related_articles = new WP_Query(array(
|
||||||
'post_type' => 'articles',
|
'post_type' => 'articles',
|
||||||
'posts_per_page' => 3,
|
'posts_per_page' => -1,
|
||||||
'orderby' => 'date',
|
'orderby' => 'date',
|
||||||
'order' => 'DESC',
|
'order' => 'DESC',
|
||||||
'meta_query' => array(
|
'meta_query' => array(
|
||||||
|
|
@ -29,6 +29,7 @@ $issue_related_articles = new WP_Query(array(
|
||||||
),
|
),
|
||||||
));
|
));
|
||||||
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<section class="block-dernieres-dynamiques content-section ">
|
<section class="block-dernieres-dynamiques content-section ">
|
||||||
|
|
@ -79,7 +80,7 @@ $issue_related_articles = new WP_Query(array(
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
|
||||||
<div class="article-caroussel">
|
<div class="article-caroussel article-caroussel--<?php echo $displayType; ?>">
|
||||||
|
|
||||||
<?php if ($displayType === 'grid') : ?>
|
<?php if ($displayType === 'grid') : ?>
|
||||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
||||||
|
|
@ -118,23 +119,69 @@ $issue_related_articles = new WP_Query(array(
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<button class="related-articles__show-all">
|
||||||
|
Tout afficher
|
||||||
|
</button>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php else : ?>
|
<?php else : ?>
|
||||||
<div class="article-caroussel__slider">
|
<div class="article-caroussel__slider">
|
||||||
<p>sliiiiiiiidzer</p>
|
<?php if ($issue_related_articles->have_posts()) : ?>
|
||||||
<?php foreach ($issue_related_articles->posts as $article) : ?>
|
<div class="swiper dernieres-dynamiques-swiper">
|
||||||
<div class="article-card">
|
<div class="swiper-wrapper">
|
||||||
<?php echo get_the_post_thumbnail($article->ID, 'full'); ?>
|
<?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>
|
</div>
|
||||||
<?php endforeach; ?>
|
|
||||||
|
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="related-articles__show-all">
|
|
||||||
Tout afficher
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -149,63 +196,3 @@ restore_current_blog();
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<?php
|
<?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 () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
// new Swiper(".latest-news-swiper", {
|
new Swiper(".dernieres-dynamiques-swiper", {
|
||||||
// slidesPerView: 1,
|
slidesPerView: 2,
|
||||||
// spaceBetween: 30,
|
spaceBetween: 30,
|
||||||
// pagination: {
|
pagination: {
|
||||||
// el: ".swiper-pagination",
|
el: ".swiper-pagination",
|
||||||
// clickable: true,
|
clickable: true,
|
||||||
// },
|
},
|
||||||
// navigation: {
|
navigation: {
|
||||||
// nextEl: ".swiper-button-next",
|
nextEl: ".swiper-button-next",
|
||||||
// prevEl: ".swiper-button-prev",
|
prevEl: ".swiper-button-prev",
|
||||||
// },
|
},
|
||||||
// breakpoints: {
|
});
|
||||||
// 640: {
|
});
|
||||||
// slidesPerView: 2,
|
|
||||||
// },
|
|
||||||
// 1024: {
|
|
||||||
// slidesPerView: 2,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user