138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
<template>
|
|
<div v-if="hasImages" class="album-view">
|
|
<!-- Album Display -->
|
|
<div class="image-grid">
|
|
<div v-for="(url, index) in displayedImages"
|
|
:key="index"
|
|
class="image-wrapper"
|
|
@click="$emit('photo-click', index)">
|
|
<img :src="url"
|
|
:alt="t('creator.sections.album.image')"
|
|
class="image"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Add 'photo-click' to emits
|
|
const emit = defineEmits(['photo-click']);
|
|
|
|
import { computed, ref, onMounted, onUnmounted } from "vue";
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
|
|
// Add a reactive window width
|
|
const windowWidth = ref(window.innerWidth);
|
|
|
|
// Update window width on resize
|
|
const handleResize = () => {
|
|
windowWidth.value = window.innerWidth;
|
|
};
|
|
|
|
// Add and remove event listener
|
|
onMounted(() => {
|
|
window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
});
|
|
|
|
const hasImages = computed(() => {
|
|
return props.images.some(url => url);
|
|
});
|
|
|
|
const nonEmptyImages = computed(() => {
|
|
return props.images.filter(url => url);
|
|
});
|
|
|
|
// Show different number of images based on reactive window width
|
|
const displayedImages = computed(() => {
|
|
const images = nonEmptyImages.value;
|
|
if (windowWidth.value >= 1024) {
|
|
return images.slice(0, 5); // 5 images on large screens
|
|
} else if (windowWidth.value >= 768) {
|
|
return images.slice(0, 4); // 4 images on medium screens
|
|
}
|
|
return images.slice(0, 3); // 3 images on smaller screens
|
|
});
|
|
|
|
// Add computed property for grid columns based on number of images
|
|
const gridColumns = computed(() => {
|
|
const count = displayedImages.value.length;
|
|
if (count === 1) return '1fr';
|
|
if (count === 2) return 'repeat(2, 1fr)';
|
|
if (count === 3) return 'repeat(3, 1fr)';
|
|
if (count === 4) return 'repeat(4, 1fr)';
|
|
return 'repeat(5, 1fr)';
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.album-view {
|
|
@apply w-full;
|
|
}
|
|
|
|
.image-grid {
|
|
@apply w-full grid;
|
|
grid-template-columns: v-bind(gridColumns);
|
|
}
|
|
|
|
.image-wrapper {
|
|
@apply relative w-full aspect-square;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
|
|
</style>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"creator": {
|
|
"sections": {
|
|
"album": {
|
|
"title": "Photo Album",
|
|
"image": "Album image"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"fr": {
|
|
"creator": {
|
|
"sections": {
|
|
"album": {
|
|
"title": "Album photo",
|
|
"image": "Image de l'album"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"es": {
|
|
"creator": {
|
|
"sections": {
|
|
"album": {
|
|
"title": "Álbum de fotos",
|
|
"image": "Imagen del álbum"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</i18n> |