From f3f00f472ff4e306fe7980df3afcf28582bb077e Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 25 Apr 2024 15:26:11 +0200
Subject: [PATCH] Add source set for different sizes to uploadcare images

---
 .../components/content-blocks/ImageUrlBlock.vue   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/src/components/content-blocks/ImageUrlBlock.vue b/client/src/components/content-blocks/ImageUrlBlock.vue
index 9263188a..c53afdd8 100644
--- a/client/src/components/content-blocks/ImageUrlBlock.vue
+++ b/client/src/components/content-blocks/ImageUrlBlock.vue
@@ -1,7 +1,7 @@
 <template>
   <img
     :src="value.url"
-    alt=""
+    :srcset="srcset"
     class="image-block"
     @click="openFullscreen"
   />
@@ -10,6 +10,19 @@
 <script>
 export default {
   props: ['value'],
+  computed: {
+    srcset() {
+      if (this.value.url.includes('ucarecdn')) {
+        return (
+          this.value.url +
+          '-/resize/300/ 300w,' +
+          this.value.url +
+          '-/resize/800/ 800w,'
+        );
+      }
+      return '';
+    },
+  },
   methods: {
     openFullscreen() {
       this.$store.dispatch('showFullscreenImage', this.value.url);