valentin_le_moign
/
ateliers55
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

swiper images height

This commit is contained in:
Valentin 2024-04-21 18:29:43 +02:00
parent 4c537bf529
commit d89f8d2ae2
9 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
user/pages/02.articles/article-5/default.md
View File

@ -1,6 +1,6 @@
--- ---
title: 'Article 5' title: 'Article 5'
media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg' media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg,pexels-tizzy-19933656.jpg,pexels-thanh-luu-29104820-20344850.jpg,mahee.mp4'
date: '14-03-2024 11:38' date: '14-03-2024 11:38'
--- ---

BIN
user/pages/02.articles/article-5/mahee.mp4 Normal file
View File

Binary file not shown.

BIN
user/pages/02.articles/article-5/pexels-thanh-luu-29104820-20344850.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
user/pages/02.articles/article-5/pexels-tizzy-19933656.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

12
user/themes/ateliers-55/css/styles.css
View File

@ -44,6 +44,10 @@
list-style: none; list-style: none;
} }
body {
overflow-x: hidden;
}
header { header {
display: flex; display: flex;
width: 100vw; width: 100vw;
@ -299,7 +303,6 @@ article #article-wrapper .article-header .close-article div:last-of-type {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
article #article-wrapper .swiper { article #article-wrapper .swiper {
max-height: 40vh;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;
@ -308,11 +311,18 @@ article #article-wrapper .swiper .swiper-wrapper .swiper-slide {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 7vw; padding: 0 7vw;
display: flex;
height: auto;
align-items: center;
} }
article #article-wrapper .swiper .swiper-wrapper .swiper-slide img { article #article-wrapper .swiper .swiper-wrapper .swiper-slide img {
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
} }
article #article-wrapper .swiper .swiper-wrapper .swiper-slide video {
box-sizing: content-box;
width: 100%;
}
article #article-wrapper .swiper .swiper-button-prev, article #article-wrapper .swiper .swiper-button-next { article #article-wrapper .swiper .swiper-button-prev, article #article-wrapper .swiper .swiper-button-next {
color: #000; color: #000;
transform: scale(0.5); transform: scale(0.5);

2
user/themes/ateliers-55/css/styles.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OApCA;EAqCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBAtDA;EAuDA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBAxEU;EAyEV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAlFN;EAmFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAlGU;EAmGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBA/KN;;AAkLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OA5LE;;AA8LN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBA9NE;EA+NF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OAjPR;EAkPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;;AACA;EACI;EACA;;AAIZ;EACI,OAjSJ;EAkSI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OA7SM;EA8SN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"} {"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OAxCA;EAyCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBA1DA;EA2DA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBA5EU;EA6EV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAtFN;EAuFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAtGU;EAuGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBAnLN;;AAsLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OAhME;;AAkMN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBAlOE;EAmOF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OArPR;EAsPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,OA3SJ;EA4SI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OAvTM;EAwTN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}

29
user/themes/ateliers-55/js/script.js
View File

@ -19,9 +19,12 @@ $(document).ready(function() {
body.style.overflowY = "auto"; body.style.overflowY = "auto";
} }
let swiperEl = document.querySelector('.swiper'); let swiperEl = document.querySelector('.swiper');
if (swiperEl) {
setSwiperHeight(swiperEl);
swiperEl.style.opacity = 1;
resizeVerticalImages();
}
initSwiper(); initSwiper();
swiperEl.style.opacity = 1;
resizeVerticalImages();
barba.init({ barba.init({
transitions: [{ transitions: [{
name: 'opacity-transition', name: 'opacity-transition',
@ -38,19 +41,25 @@ $(document).ready(function() {
}] }]
}); });
barba.hooks.before((data) => { barba.hooks.before((data) => {
swiperEl.style.opacity = 0; if (swiperEl) {
swiperEl.style.opacity = 0;
}
}); });
barba.hooks.after((data) => { barba.hooks.after((data) => {
swiperEl = document.querySelector('.swiper'); swiperEl = document.querySelector('.swiper');
resizeVerticalImages(); if (swiperEl) {
if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) { setSwiperHeight(swiperEl);
initSwiper(); resizeVerticalImages();
body.style.overflowY = "hidden"; if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
initSwiper();
body.style.overflowY = "hidden";
}
swiperEl.style.opacity = 1;
} else { } else {
body.style.overflowY = "auto"; body.style.overflowY = "auto";
} }
swiperEl.style.opacity = 1;
}); });
}) })
function initSwiper() { function initSwiper() {
@ -72,4 +81,8 @@ function resizeVerticalImages() {
} }
} }
} }
}
function setSwiperHeight(swiperEl) {
console.log(swiperEl);
} }

12
user/themes/ateliers-55/sass/styles.scss
View File

@ -61,6 +61,10 @@ $bgColor: #fff;
} }
} }
body {
overflow-x: hidden;
}
header { header {
display: flex; display: flex;
width: 100vw; width: 100vw;
@ -319,7 +323,6 @@ article {
} }
} }
.swiper { .swiper {
max-height: 40vh;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out;
@ -328,10 +331,17 @@ article {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 7vw; padding: 0 7vw;
display: flex;
height: auto;
align-items: center;
img { img {
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
} }
video {
box-sizing: content-box;
width: 100%;
}
} }
} }
.swiper-button-prev, .swiper-button-next { .swiper-button-prev, .swiper-button-next {

5
user/themes/ateliers-55/templates/default.html.twig
View File

@ -31,6 +31,11 @@
<img src="{{ image.url }}" alt="{{ page.title }}"> <img src="{{ image.url }}" alt="{{ page.title }}">
</div> </div>
{% endfor %} {% endfor %}
{% for video in page.media.videos %}
<div class="swiper-slide">
<video controls src="{{ video.url }}">
</div>
{% endfor %}
</div> </div>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
</div> </div>