ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor for images that are square

This commit is contained in:
Lorenz Padberg 2024-04-30 19:20:11 +02:00
parent d2944f90db
commit ffa8e44997
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/ui/WagtailImage.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<div class="wagtail-image" :style="backgroundStyle"> <div
:class="['wagtail-image', { loaded: loaded }]"
:style="backgroundStyle"
>
<img <img
:src="props.src" :src="props.src"
:srcset="props.srcset" :srcset="props.srcset"
:alt="alt" :alt="alt"
:class="['wagtail-image__image', { loaded: loaded }]" class="wagtail-image__image"
:sizes="computedSizes" :sizes="computedSizes"
loading="eager" loading="eager"
v-show="loaded" v-show="loaded"
ref="imgElement" ref="imgElement"
@load="handleLoad" @load="handleLoad"
/> />
</div> </div>
</template> </template>
<script setup> <script setup>
@ -32,9 +34,9 @@ const loaded = ref(false);
const updateDimensions = () => { const updateDimensions = () => {
if (imgElement.value && imgElement.value.parentElement) { if (imgElement.value && imgElement.value.parentElement) {
const { parentWidth, parentHeight } = imgElement.value.parentElement; const { clientWidth, clientHeight } = imgElement.value.parentElement;
width.value = parentWidth; width.value = clientWidth;
height.value = parentHeight; height.value = clientHeight;
} }
}; };
@ -44,16 +46,16 @@ const handleLoad = () => {
const computedSizes = computed(() => { const computedSizes = computed(() => {
// the default set of image sizes is [160px, 320px, 800px, 1600px] // the default set of image sizes is [160px, 320px, 800px, 1600px]
let size; let size = '100vw';
if (width.value <= 300) { if (width.value <= 300) {
size = '160px'; size = '160px';
} else if (300 < width.value && width.value <= 600) { }
if (300 < width.value && width.value <= 600) {
size = '320px'; size = '320px';
} else if (600 < width.value && width.value <= 1200) { }
if (600 < width.value && width.value <= 1200) {
size = '800px'; size = '800px';
} else {
size = '100vw';
} }
console.log(size, width.value); console.log(size, width.value);
return size; return size;
@ -80,7 +82,6 @@ const backgroundStyle = computed(() => {
}); });
onMounted(() => { onMounted(() => {
console.log('src set', props.srcset);
updateDimensions(); updateDimensions();
window.addEventListener('resize', updateDimensions); window.addEventListener('resize', updateDimensions);
}); });
@ -95,6 +96,7 @@ onBeforeUnmount(() => {
.wagtail-image { .wagtail-image {
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%; height: 100%;
background-color: $color-silver-light; background-color: $color-silver-light;
@ -105,4 +107,7 @@ onBeforeUnmount(() => {
object-position: center; object-position: center;
} }
} }
.wagtail-image.loaded {
background-color: white;
}
</style> </style>

4
server/books/schema/nodes/wagtail_image.py
View File

@ -11,8 +11,8 @@ def get_srcset(image: Image) -> str:
return ( return (
f"{generate_image_url(image, 'width-160')} 160w, " f"{generate_image_url(image, 'width-160')} 160w, "
f"{generate_image_url(image, 'width-320')} 320w, " f"{generate_image_url(image, 'width-320')} 320w, "
f"{generate_image_url(image, 'width-800')} 1280w, " f"{generate_image_url(image, 'width-800')} 800w, "
f"{generate_image_url(image, 'width-1600')} 2560w" f"{generate_image_url(image, 'width-1600')} 1600w"
) )