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

optimisations images

This commit is contained in:
Valentin Le Moign 2025-01-24 02:00:11 +01:00
parent 2e26680eaf
commit 298bafce49
3 changed files with 123 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -148,6 +148,30 @@ export const useContentStore = defineStore('content', {
case 'titre_texte':
partieContent.titre = partie.attributes.field_titre;
partieContent.texte = partie.attributes.field_texte.value;
// get the resized images from the text
const imgRegex = /<img[^>]+>/g;
const uuidRegex = /data-entity-uuid="([^"]+)"/;
const imgTags = partieContent.texte.match(imgRegex);
if (imgTags) {
for (const imgTag of imgTags) {
const uuidMatch = imgTag.match(uuidRegex);
if (uuidMatch && uuidMatch[1]) {
const uuid = uuidMatch[1];
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
const imagesFetch = response.data.data;
const newImgTag = imgTag
.replace(/src="[^"]+"/,`src="${imagesFetch.attributes.image_style_uri.content_medium}"`)
.replace('>',' data-large-src="' + imagesFetch.attributes.image_style_uri.content_large + '">');
partieContent.texte = partieContent.texte.replace(imgTag, newImgTag);
}
}
}
break;
case 'chiffres_cles':
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);

48
web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
View File

@ -15,7 +15,7 @@
:loop="true"
:navigation="true"
:pagination="true"
:initialSlide="currentImgIndex"
:initialSlide="currentSlideIndex"
:injectStyles="[`
.swiper-button-next, .swiper-button-prev {
color: white;
@ -26,7 +26,6 @@
opacity: 0.8;
}
`]"
@swiperresize="(e) => setCaptions(e.target)"
>
<swiper-slide v-for="media in swiperContent">
<figure class="popup-figure">
@ -46,7 +45,7 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import { nextTick, ref, watch } from 'vue';
import { useWaitForImages } from '../composables/useWaitForImages';
const props = defineProps({
isOpen: Boolean,
@ -60,16 +59,22 @@ const props = defineProps({
}
});
const currentImgIndex = ref(0);
const currentSlideIndex = ref(0);
watch(
() => props.isOpen,
() => {
toggleElementsOver(props.isOpen);
if (props.isOpen && props.swiperContent?.length) {
if (props.isOpen) {
nextTick(() => {
const swiperContainer = document.querySelector('.image-viewer-wrapper');
setCaptions(swiperContainer);
})
if (props.swiperContent?.length) {
checkCurrentImage();
}
}
}
)
function toggleElementsOver(isOpen) {
@ -93,11 +98,9 @@ function toggleElementsOver(isOpen) {
}
function checkCurrentImage() {
// CHECK IF IMAGES ARE THE SAME WITH ALT
// IS NOT A GREAT SOLUTION
for (let i = 0; i < props.swiperContent.length; i++) {
if (props.swiperContent[i].alt === props.image.alt) {
currentImgIndex.value = i;
if (props.swiperContent[i].src.split('/').pop().split('?')[0] === props.image.src.split('/').pop().split('?')[0]) {
currentSlideIndex.value = i;
break;
}
}
@ -106,11 +109,17 @@ function checkCurrentImage() {
function setCaptions(container) {
useWaitForImages(container, () => {
const slides = container.querySelectorAll('swiper-slide');
if (slides.length) {
slides.forEach((slide) => {
const img = slide.querySelector('img');
const caption = slide.querySelector('figcaption');
caption.style.width = `${img.offsetWidth}px`;
});
} else {
const img = container.querySelector('img');
const caption = container.querySelector('figcaption');
caption.style.width = `${img.offsetWidth}px`;
}
});
}
@ -155,18 +164,33 @@ function checkOutsideClick(target) {
align-items: center;
}
> .simple-viewer {
> .img-wrapper {
max-width: 60%;
display: flex;
justify-content: center;
align-items: center;
> figure.img-wrapper {
margin-top: 3%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10vw;
box-sizing: border-box;
> img {
width: 100%;
max-height: 100%;
max-width: 100%;
width: auto !important;
height: auto !important;
margin-bottom: -5px;
object-fit: contain !important;
}
> figcaption {
margin: 0;
background-color: white;
font-size: 0.8rem; /* cf main.scss */
padding: 0.5rem 1.5rem;
box-sizing: border-box;
}
}
}

16
web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleTitreTexte.vue
View File

@ -12,6 +12,7 @@
ref="partieContent"
class="partie-content"
v-alt
v-setVerticalImgs
:style="{ '--couleur': couleur }"
@click="handleImageClick">
</div>
@ -48,6 +49,18 @@ const vAlt = {
}
};
const vSetVerticalImgs = {
mounted : (el) => {
const images = el.querySelectorAll('img');
images.forEach((img) => {
if (img.offsetHeight > img.offsetWidth) {
img.style.padding = '0 7vw';
img.nextElementSibling.style.padding = '0 7vw';
}
});
}
}
const partieContent = ref(null);
onMounted(() => {
@ -96,7 +109,7 @@ const {
const handleImageClick = (event) => {
const img = event.target;
if (img.tagName === 'IMG') {
openImageModale(img.src, img.alt);
openImageModale(img.dataset.largeSrc, img.alt);
}
};
</script>
@ -131,6 +144,7 @@ const handleImageClick = (event) => {
.partie-content {
img {
box-sizing: border-box;
margin-top: 2rem;
cursor: pointer;
transition: transform 0.3s ease-out;