bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimisation des images

Browse Source
This commit is contained in:
Valentin Le Moign
2025-01-23 02:52:00 +01:00
parent c11b90f235
commit aca6c6b011
15 changed files with 153 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/caravane/assets/js/vuejs/components/EquipeContent.vue
View File

@@ -14,7 +14,7 @@
</div>
<div v-for="personne in equipe.personnes" class="personne">
<figure>
<img v-if="personne.photo_url" :src="personne.photo_url" :alt="personne.photo_alt">
<img v-if="personne.photo_url" :src="personne.photo_url.small" :alt="personne.photo_alt">
</figure>
<div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
<div class="description"><p v-html="personne.description" style="white-space: pre-wrap;"></p></div>

4
web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue
View File

@@ -17,7 +17,7 @@
<div class="date">Du {{ content.previous.dates.start.d }} {{ content.previous.dates.start.m }}<br>au {{ content.previous.dates.end.d }} {{ content.previous.dates.end.m }} {{ content.previous.dates.end.y }}</div>
</div>
<div class="vignette">
<img :src="content.previous.vignette.url" :alt="content.previous.vignette.alt">
<img :src="content.previous.vignette.url.small" :alt="content.previous.vignette.alt">
</div>
</div>
</div>
@@ -33,7 +33,7 @@
<div class="date">Du {{ content.next.dates.start.d }} {{ content.next.dates.start.m }}<br>au {{ content.next.dates.end.d }} {{ content.next.dates.end.m }} {{ content.next.dates.end.y }}</div>
</div>
<div class="vignette">
<img :src="content.next.vignette.url" :alt="content.next.vignette.alt">
<img :src="content.next.vignette.url.small" :alt="content.next.vignette.alt">
</div>
</div>
</div>

2
web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue
View File

@@ -1,7 +1,7 @@
<template>
<header :class="{ 'not-etape': contentType !== 'etape' }">
<div class="cover">
<img v-if="content.vignette" :src="content.vignette.url" :alt="content.vignette.alt">
<img v-if="content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
</div>
<div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }">
<p>Étape n°{{content.etape_number}}</p>

2
web/themes/custom/caravane/assets/js/vuejs/components/PartenairesContent.vue
View File

@@ -6,7 +6,7 @@
<div v-for="partenaire in [...content.partenaires].sort((a, b) => a.weight - b.weight)" class="partenaire">
<figure>
<a :href="partenaire.link_url" target="_blank">
<img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
<img :src="partenaire.logo_url.small" :alt="partenaire.logo_alt">
</a>
</figure>
<div class="title"><p v-html="partenaire.title"></p></div>

6
web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleCarteSensible.vue
View File

@@ -1,9 +1,9 @@
<template>
<figure class="sensible-map">
<vue-image-zoomer
:regular="partie.carteSensible.url"
:zoom="partie.carteSensible.url"
:zoom-amount="3.5"
:regular="partie.carteSensible.url.large"
:zoom="partie.carteSensible.url.xlarge"
:zoom-amount="2.5"
alt="Carte sensible du territoire"
hover-message="Survolez pour zoomer dans la carte"
/>

23
web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
View File

@@ -7,11 +7,12 @@
:navigation="true"
:pagination="true"
:injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
@swiperresize="(e) => resizeSwiper(e.target)"
>
<swiper-slide v-for="image in partie.diaporama" style="width: 100%">
<figure>
<img
:src="image.url"
:src="image.url.medium"
:alt="image.alt"
@click="handleImageClick">
<figcaption class="caption">{{ image.alt }}</figcaption>
@@ -56,15 +57,25 @@ const handleImageClick = (event) => {
if (isSwiper) {
const swiperEl = img.closest('swiper-container');
swiperEl.querySelectorAll('swiper-slide').forEach((slide) => {
const image = slide.querySelector('img');
const altText = slide.querySelector('figcaption')?.textContent || '';
swiperMedia.push({ src: image.getAttribute('src'), alt: altText });
const img = slide.querySelector('img');
const altText = slide.querySelector('figcaption')?.textContent || '';
Object.values(props.partie.diaporama).forEach((image) => {
if (image.url.medium === img.src) {
swiperMedia.push({ src: largeImgUrl, alt: altText });
}
});
});
}
openImageModale(img.src, img.alt, swiperMedia);
}
};
function resizeSwiper(swiper) {
swiper.style.height = 'auto';
swiper.style.height = `calc(${swiper.offsetHeight}px + 2rem)`;
}
onMounted(() => {
document.documentElement.style.setProperty('--etape-couleur', props.couleur);
});
@@ -87,10 +98,6 @@ swiper-slide figure:not(.popup-figure) {
padding-bottom: 3rem;
}
swiper-slide figure:not(.popup-figure) figcaption {
text-align: center;
}
swiper-slide img:not(.popup-img) { /* cf main.scss */
max-height: 35vh;
cursor: pointer;

2
web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue
View File

@@ -8,7 +8,7 @@
<div class="personnes">
<div v-for="personne in partie.entretien.personnes" class="personne">
<figure>
<img :src="personne.portrait" :alt="personne.alt">
<img :src="personne.portrait.small" :alt="personne.alt">
</figure>
<div class="description"><p v-html="personne.description"></p></div>
</div>