From b74ae67264c28f57560d8f1947bd7bc31a0edcfb Mon Sep 17 00:00:00 2001
From: Jonathan Grim <jonjongrim@gmail.com>
Date: Thu, 2 Nov 2023 11:51:59 +0100
Subject: [PATCH] add image transform

---
 src/api/storage.ts                     | 14 ++++++++++++--
 src/components/Forms/FormFileInput.vue |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/api/storage.ts b/src/api/storage.ts
index c8ea9fc..59ac4f2 100644
--- a/src/api/storage.ts
+++ b/src/api/storage.ts
@@ -47,7 +47,12 @@ export async function uploadToCoverImageStorage({
 export const getCoverImageUrl = async (path: string) => {
   const { data } = await supabase.storage
     .from("cover-images")
-    .getPublicUrl(path);
+    .getPublicUrl(path, {
+      transform: {
+        height: 600,
+        width: 1066,
+      },
+    });
   return data.publicUrl ?? "";
 };
 
@@ -71,6 +76,11 @@ export async function uploadToAvatarStorage(file: File) {
 
 export const getAvatarImageUrl = async (path?: string) => {
   if (!path) return "";
-  const { data } = await supabase.storage.from("avatars").getPublicUrl(path);
+  const { data } = await supabase.storage.from("avatars").getPublicUrl(path, {
+    transform: {
+      height: 100,
+      width: 100,
+    },
+  });
   return data.publicUrl ?? "";
 };
diff --git a/src/components/Forms/FormFileInput.vue b/src/components/Forms/FormFileInput.vue
index 5e7b796..04551a2 100644
--- a/src/components/Forms/FormFileInput.vue
+++ b/src/components/Forms/FormFileInput.vue
@@ -30,6 +30,7 @@
               class="w-full h-full rounded-lg bg-gradient-to-tl from-blue-100 to-blue-200"
             />
           </div>
+          <p class="text-xs mt-2">Playabl shows images in 16:9 format</p>
         </div>
         <div class="flex flex-col items-center justify-center mt-4 sm:mt-0">
           <button