Media url

team294 · Sep 17, 2024 · 25d43c7 · 25d43c7
1 parent 8f0be76
commit 25d43c7
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 47 deletions.
diff --git a/src/app/MediaUrl.ts b/src/app/MediaUrl.ts
@@ -0,0 +1,8 @@
+export default function mediaUrl(url: string) {
+  if (url !== "/media/blank.png" && !url.includes("/media")) {
+    const parts = url.split("/");
+    const dynamicBasePath = parts.slice(3, 4).join("/");
+    const mediaPath = `${dynamicBasePath}/public/media/`;
+    return url.replace(`${dynamicBasePath}/`, mediaPath);
+  } else return url;
+}
diff --git a/src/app/about/First.tsx b/src/app/about/First.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import mediaUrl from "../MediaUrl";
 
 export const First = ({ content }: any) => {
   return (
@@ -8,11 +9,12 @@ export const First = ({ content }: any) => {
     >
       <div className="w-full flex flex-col md:flex-row items-center gap-12">
         <Image
-          src={content.image}
+          src={mediaUrl(content.image)}
           alt="FIRST"
           width="1000"
           height="1000"
           className="object-contain w-60 md:w-1/3 h-auto"
+          priority
         />
         <p className="body text-center md:text-left md:w-2/3">{content.body}</p>
       </div>

diff --git a/src/app/about/Mentors.tsx b/src/app/about/Mentors.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import mediaUrl from "../MediaUrl";
 
 export const Mentors = ({ content }: any) => {
   return (
@@ -12,7 +13,7 @@ export const Mentors = ({ content }: any) => {
           <div key={mentor.name}>
             <div className="flex flex-col items-center gap-2">
               <Image
-                src={mentor.image}
+                src={mediaUrl(mentor.image)}
                 alt={mentor.name}
                 width="100"
                 height="100"

diff --git a/src/app/about/Subteams.tsx b/src/app/about/Subteams.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { useState } from "react";
+import mediaUrl from "../MediaUrl";
 
 const Subteams = ({ content }: any) => {
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -31,11 +32,11 @@ const Subteams = ({ content }: any) => {
               key={index}
               className="w-full flex-shrink-0 px-16 pb-10 grid grid-cols-6 gap-10"
             >
-              <div className="col-span-6 md:col-span-4">
+              <div className="col-span-6 xl:col-span-4">
                 <div className="inline-flex gap-6 mb-2">
                   {subteam.icon && (
                     <Image
-                      src={subteam.icon}
+                      src={mediaUrl(subteam.icon)}
                       alt={subteam.title}
                       height="100"
                       width="100"
@@ -50,14 +51,16 @@ const Subteams = ({ content }: any) => {
                   <p className="body text-white">{subteam.body}</p>
                 )}
               </div>
-              <Image
-                src={subteam.image}
-                alt={subteam.title}
-                priority
-                height="1000"
-                width="1000"
-                className="hidden lg:block col-span-2 object-cover aspect-square rounded-3xl border-white border-8 bg-white"
-              />
+              <div className="hidden xl:flex col-span-2 m-auto">
+                <Image
+                  src={mediaUrl(subteam.image)}
+                  alt={subteam.title}
+                  priority
+                  height="1000"
+                  width="1000"
+                  className="object-cover aspect-square rounded-3xl border-white border-8 bg-white"
+                />
+              </div>
             </div>
           ))}
         </div>

diff --git a/src/app/home/Intro.tsx b/src/app/home/Intro.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import mediaUrl from "../MediaUrl";
 
 export const Intro = ({ content }: any) => {
   return (
@@ -15,7 +16,7 @@ export const Intro = ({ content }: any) => {
         </p>
       </div>
       <Image
-        src={content.image}
+        src={mediaUrl(content.image)}
         alt="Squid"
         width="100"
         height="100"

diff --git a/src/app/home/WhoWeAre.tsx b/src/app/home/WhoWeAre.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import mediaUrl from "../MediaUrl";
 
 export const WhoWeAre = ({ content }: any) => {
   return (
@@ -12,47 +13,43 @@ export const WhoWeAre = ({ content }: any) => {
       </div>
       <div className="flex flex-col items-center gap-8 w-full">
         <div className="flex flex-row gap-8">
-          {content.buttons?.map((button: any) => (
-            <>
-              {button.image ? (
-                <a
-                  key={button.title}
-                  href={button.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="button-image button-secondary"
-                >
-                  <Image
-                    src={button.image}
-                    alt={button.title}
-                    width="100"
-                    height="100"
-                    className="h-full w-auto"
-                  />
-                </a>
-              ) : (
-                ""
-              )}
-            </>
-          ))}
-        </div>
-        {content.buttons?.map((button: any) => (
-          <>
-            {button.image ? (
-              ""
-            ) : (
+          {content.buttons?.map((button: any) =>
+            button.image ? (
               <a
                 key={button.title}
                 href={button.link}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="button-text button-secondary"
+                className="button-image button-secondary"
               >
-                {button.title}
+                <Image
+                  src={mediaUrl(button.image)}
+                  alt={button.title}
+                  width="100"
+                  height="100"
+                  className="h-full w-auto"
+                />
               </a>
-            )}
-          </>
-        ))}
+            ) : (
+              ""
+            )
+          )}
+        </div>
+        {content.buttons?.map((button: any) =>
+          button.image ? (
+            ""
+          ) : (
+            <a
+              key={button.title}
+              href={button.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="button-text button-secondary"
+            >
+              {button.title}
+            </a>
+          )
+        )}
       </div>
     </section>
   );