From 50c7667e768cd17644c8ba5ee6a5744abf9b3666 Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <km@roko.li>
Date: Sat, 23 Nov 2024 01:58:46 +0100
Subject: [PATCH] fix: use framespec as aspect ratio for image preview
---
src/components/images/ImagePicker.vue | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/components/images/ImagePicker.vue b/src/components/images/ImagePicker.vue
index 4d4b94c..c2e0f5e 100644
--- a/src/components/images/ImagePicker.vue
+++ b/src/components/images/ImagePicker.vue
@@ -1,11 +1,12 @@
<template>
<ImagePreview
:url="image?.url ?? null"
- class="tw-inline-flex tw-h-64 tw-max-w-full tw-min-w-64 tw-bg-gray-700 tw-rounded tw-flex-1 dark:tw-bg-neutral-700"
+ class="tw-inline-flex tw-h-64 tw-max-w-full tw-min-w-64 tw-w-auto tw-bg-gray-700 tw-rounded tw-flex-1 dark:tw-bg-neutral-700"
:alt="image?.altText"
:width="image?.width ?? undefined"
:height="image?.height ?? undefined"
cover
+ :style="{ 'aspect-ratio': aspectRatio }"
v-bind="attrs"
>
<div
@@ -55,6 +56,10 @@ const showDialog = ref(false)
const localImageId = useCopy<number | null>(() => props.modelValue, {
save: (value) => emit('update:modelValue', value),
})
+const aspectRatio = computed(() => {
+ const [width, height] = props?.frameSpec?.aspectRatio ?? [0, 0]
+ return height === 0 ? undefined : width / height
+})
const image = useImage(computed(() => props.modelValue))
</script>
--
GitLab