From d5700675d99852bb496d9c4557b41294d6f06876 Mon Sep 17 00:00:00 2001
From: Greg Zaal <gregzzmail@gmail.com>
Date: Tue, 8 Oct 2024 16:20:31 +0200
Subject: [PATCH] Specify collection image aspect ratio

---
 components/Library/CatBanner.tsx              | 2 +-
 components/Library/Collections/Collection.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/Library/CatBanner.tsx b/components/Library/CatBanner.tsx
index 553d328..c086b09 100644
--- a/components/Library/CatBanner.tsx
+++ b/components/Library/CatBanner.tsx
@@ -50,7 +50,7 @@ const CatBanner = ({ assetType, collections }) => {
         {assetType === 'all'
           ? Object.keys(collections).map((collectionID, i) => (
               <Link key={i} href={`/collections/${collectionID}`} className={`${styles.cat}`}>
-                <img src={`https://cdn.polyhaven.com/collections/${collectionID}.png?width=578`} />
+                <img src={`https://cdn.polyhaven.com/collections/${collectionID}.png?width=578&aspect_ratio=16:9`} />
                 <p>{collections[collectionID]}</p>
               </Link>
             ))
diff --git a/components/Library/Collections/Collection.tsx b/components/Library/Collections/Collection.tsx
index 9fb19bc..3c20b2d 100644
--- a/components/Library/Collections/Collection.tsx
+++ b/components/Library/Collections/Collection.tsx
@@ -23,7 +23,10 @@ const Collection = ({ collectionId, data }) => {
     <div className={styles.collection}>
       <div className={styles.collectionInner}>
         <Link href={collectionLink}>
-          <img src={`https://cdn.polyhaven.com/collections/${collectionId}.png?width=578`} alt={`${data.name}`} />
+          <img
+            src={`https://cdn.polyhaven.com/collections/${collectionId}.png?width=578&aspect_ratio=16:9`}
+            alt={`${data.name}`}
+          />
         </Link>
         {data.community && (
           <div className={styles.banner}>