Specify collection image aspect ratio

Poly-Haven · Oct 8, 2024 · d570067 · d570067
1 parent f00e098
commit d570067
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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}>