fixing aspect ratio on images

webdevcody · Feb 2, 2024 · 5e88f09 · 5e88f09
1 parent c73224a
commit 5e88f09
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 113 deletions.
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
@@ -115,12 +115,14 @@ export default function CreatePage() {
             return (
               <div key={imageUrl} className="flex flex-col">
                 <div>Image {idx + 1}</div>
-                <Image
-                  width="600"
-                  height="800"
-                  alt="image test a"
-                  src={getImageUrl(imageUrl)}
-                />
+                <div className="relative aspect-[1280/720]">
+                  <Image
+                    alt="image test image"
+                    className="object-cover"
+                    src={getImageUrl(imageUrl)}
+                    layout="fill"
+                  />
+                </div>
               </div>
             );
           })}

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -61,12 +61,14 @@ export default function DashboardPage() {
           return (
             <Card key={thumbnail._id}>
               <CardHeader>
-                <Image
-                  src={getImageUrl(thumbnail.images[0])}
-                  width="600"
-                  height="600"
-                  alt="thumbnail image"
-                />
+                <div className="relative aspect-[1280/720]">
+                  <Image
+                    alt="image test"
+                    className="object-cover"
+                    src={getImageUrl(thumbnail.images[0])}
+                    layout="fill"
+                  />
+                </div>
               </CardHeader>
               <CardContent>
                 <p>{thumbnail.title}</p>

diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx
@@ -99,12 +99,14 @@ export default function ExplorePage() {
                           <TrashIcon />
                         </Button>
                       )}
-                      <Image
-                        src={getImageUrl(thumbnail.images[0])}
-                        width="600"
-                        height="600"
-                        alt="thumbnail image"
-                      />
+                      <div className="relative aspect-[1280/720]">
+                        <Image
+                          alt="image test"
+                          className="object-cover"
+                          src={getImageUrl(thumbnail.images[0])}
+                          layout="fill"
+                        />
+                      </div>
                     </CardHeader>
                     <CardContent>
                       <div className="flex gap-4 items-center mb-2">

diff --git a/src/app/profile/[userId]/page.tsx b/src/app/profile/[userId]/page.tsx
@@ -59,12 +59,14 @@ function UserThumbnails() {
           return (
             <Card key={thumbnail._id}>
               <CardHeader>
-                <Image
-                  src={getImageUrl(thumbnail.images[0])}
-                  width="600"
-                  height="600"
-                  alt="thumbnail image"
-                />
+                <div className="relative aspect-[1280/720]">
+                  <Image
+                    alt="image test"
+                    className="object-cover"
+                    src={getImageUrl(thumbnail.images[0])}
+                    layout="fill"
+                  />
+                </div>
               </CardHeader>
               <CardContent>
                 <p>{thumbnail.title}</p>

diff --git a/src/app/thumbnails/[thumbnailId]/page.tsx b/src/app/thumbnails/[thumbnailId]/page.tsx
@@ -50,13 +50,14 @@ function ThumbnailTestImage({
 
   return (
     <div className="flex flex-col gap-4 border p-4 bg-white dark:bg-gray-950">
-      <Image
-        width="600"
-        height="600"
-        alt="image test a"
-        className="w-full"
-        src={getImageUrl(imageId)}
-      />
+      <div className="relative aspect-[1280/720]">
+        <Image
+          alt="image test"
+          className="object-cover"
+          src={getImageUrl(imageId)}
+          layout="fill"
+        />
+      </div>
 
       <div className="flex gap-4">
         <Link href={`/profile/${thumbnail.userId}`}>
@@ -163,101 +164,102 @@ export default function ThumbnailPage() {
         </Link>
       </div>
 
-      {!hasVoted && (
-        <>
-          <Tabs defaultValue="grid" className="">
-            <TabsList className="grid w-96 grid-cols-2 mx-auto mb-4">
-              <TabsTrigger
-                value="grid"
-                className="flex items-center justify-center gap-2"
-              >
-                <LayoutGrid /> Grid
-              </TabsTrigger>
-              <TabsTrigger
-                className="flex items-center justify-center gap-2"
-                value="gallery"
-              >
-                <GalleryHorizontal /> Gallery
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="grid">
-              <div className="mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                {thumbnail.images.map((imageId) => {
-                  return (
-                    <ThumbnailTestImage
-                      key={imageId}
-                      hasVoted={hasVoted}
-                      imageId={imageId}
-                      thumbnail={thumbnail}
-                    />
-                  );
-                })}
-              </div>
-            </TabsContent>
+      {/* {!hasVoted && ( */}
+      <>
+        <Tabs defaultValue="grid" className="">
+          <TabsList className="grid w-96 grid-cols-2 mx-auto mb-4">
+            <TabsTrigger
+              value="grid"
+              className="flex items-center justify-center gap-2"
+            >
+              <LayoutGrid /> Grid
+            </TabsTrigger>
+            <TabsTrigger
+              className="flex items-center justify-center gap-2"
+              value="gallery"
+            >
+              <GalleryHorizontal /> Gallery
+            </TabsTrigger>
+          </TabsList>
 
-            <TabsContent value="gallery">
-              <div className="max-w-2xl mx-auto flex flex-col gap-4">
-                <ThumbnailTestImage
-                  hasVoted={hasVoted}
-                  imageId={thumbnail.images[currentImageIndex]}
-                  thumbnail={thumbnail}
-                />
+          <TabsContent value="grid">
+            <div className="mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {thumbnail.images.map((imageId) => {
+                return (
+                  <ThumbnailTestImage
+                    key={imageId}
+                    hasVoted={hasVoted}
+                    imageId={imageId}
+                    thumbnail={thumbnail}
+                  />
+                );
+              })}
+            </div>
+          </TabsContent>
 
-                <div className="flex justify-between gap-4 items-center">
-                  <Button
-                    onClick={() => {
-                      const nextIndex = currentImageIndex - 1;
-                      if (nextIndex >= 0) {
-                        setCurrentImageIndex(nextIndex);
-                      } else {
-                        setCurrentImageIndex(thumbnail.images.length - 1);
-                      }
-                    }}
-                    className="w-fit self-center flex gap-2"
-                  >
-                    <ArrowLeftIcon size={"14"} /> Previous
-                  </Button>
+          <TabsContent value="gallery">
+            <div className="max-w-2xl mx-auto flex flex-col gap-4">
+              <ThumbnailTestImage
+                hasVoted={hasVoted}
+                imageId={thumbnail.images[currentImageIndex]}
+                thumbnail={thumbnail}
+              />
 
-                  <div>
-                    {currentImageIndex + 1} of {thumbnail.images.length}
-                  </div>
+              <div className="flex justify-between gap-4 items-center">
+                <Button
+                  onClick={() => {
+                    const nextIndex = currentImageIndex - 1;
+                    if (nextIndex >= 0) {
+                      setCurrentImageIndex(nextIndex);
+                    } else {
+                      setCurrentImageIndex(thumbnail.images.length - 1);
+                    }
+                  }}
+                  className="w-fit self-center flex gap-2"
+                >
+                  <ArrowLeftIcon size={"14"} /> Previous
+                </Button>
 
-                  <Button
-                    onClick={() => {
-                      const nextIndex = currentImageIndex + 1;
-                      if (nextIndex < thumbnail.images.length) {
-                        setCurrentImageIndex(nextIndex);
-                      } else {
-                        setCurrentImageIndex(0);
-                      }
-                    }}
-                    className="w-fit self-center flex gap-2"
-                  >
-                    Next <ArrowRightIcon size={"14"} />
-                  </Button>
+                <div>
+                  {currentImageIndex + 1} of {thumbnail.images.length}
                 </div>
+
+                <Button
+                  onClick={() => {
+                    const nextIndex = currentImageIndex + 1;
+                    if (nextIndex < thumbnail.images.length) {
+                      setCurrentImageIndex(nextIndex);
+                    } else {
+                      setCurrentImageIndex(0);
+                    }
+                  }}
+                  className="w-fit self-center flex gap-2"
+                >
+                  Next <ArrowRightIcon size={"14"} />
+                </Button>
               </div>
-            </TabsContent>
-          </Tabs>
-        </>
-      )}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </>
+      {/* )} */}
 
-      {hasVoted && (
+      {/* {hasVoted && (
         <div className="max-w-4xl mx-auto flex flex-col gap-4">
           {sortedImages.map((imageId) => (
             <div
               key={imageId}
               className="grid md:grid-cols-2 grid-cols-1 gap-8 items-center"
             >
               <div className="flex flex-col gap-4 border p-4 bg-white dark:bg-gray-950">
-                <Image
-                  width="600"
-                  height="600"
-                  alt="image test a"
-                  className="w-full"
-                  src={getImageUrl(imageId)}
-                />
+                <div className="relative aspect-[1280/720]">
+                  <Image
+                    alt="image test"
+                    className="object-cover"
+                    src={getImageUrl(imageId)}
+                    layout="fill"
+                  />
+                </div>
 
                 <div className="flex gap-4">
                   <Link href={`/profile/${thumbnail.userId}`}>
@@ -300,7 +302,7 @@ export default function ThumbnailPage() {
             </div>
           ))}
         </div>
-      )}
+      )} */}
 
       <Comments thumbnail={thumbnail} />
     </div>