Trying image loader.

chris-bryant · Apr 10, 2024 · 8c44cbf · 8c44cbf
1 parent 3337890
commit 8c44cbf
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 7 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
-import Image from 'next/image'
+import Image, { ImageLoaderProps } from 'next/image'
 import BigHeader from '@/components/BigHeader';
 import { styled } from '@mui/material/styles';
 
@@ -12,6 +12,10 @@ const StyledBigHeader = styled(BigHeader)(() => ({
   margin: '0 0 2rem',
 }));
 
+const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+  return `http://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
+}
+
 export default function About() {
   return (
     <>
@@ -29,12 +33,14 @@ export default function About() {
             width="500"
             height="333"
             alt="Elderbrew"
+            loader={imageLoader}
           />
           <Image
             src="/elderbrew-00608.jpg"
             width="500"
             height="333"
             alt="Elderbrew"
+            loader={imageLoader}
           />
         </Stack>
         <Stack spacing={4}>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,13 +9,17 @@ import Nav from "@/components/Nav";
 import { Container, Box, Stack, Typography } from "@mui/material";
 import Divider from '@mui/material/Divider';
 import { styled } from '@mui/material/styles';
-import Image from 'next/image'
+import Image, { ImageLoader, ImageLoaderProps } from 'next/image'
 import Link from "next/link";
 import FacebookIcon from '@mui/icons-material/Facebook';
 import InstagramIcon from '@mui/icons-material/Instagram';
 
 const robotoCondensed = Roboto_Condensed({ subsets: ["latin"] });
 
+const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+  return `http://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
+}
+
 const Footer = styled(Box)(() => ({
   backgroundColor: '#000',
   // boxShadow: '0 .2rem 25px rgba(255, 0, 0, 1)',
@@ -44,6 +48,7 @@ export default function RootLayout({
                       width="200"
                       height="127"
                       alt="Elderbrew"
+                      loader={imageLoader}
                     />
                   </Link>
                   <Nav />
@@ -120,6 +125,7 @@ export default function RootLayout({
                       width="500"
                       height="250"
                       alt="Elderbrew"
+                      loader={imageLoader}
                     />
                   </Box>
                   <Stack justifyContent="flex-end" alignItems={{ xs: 'center', sm: 'flex-end' }} spacing={2}>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,13 +2,17 @@
 import BigHeader from '@/components/BigHeader';
 import { Box } from '@mui/material';
 import Stack from '@mui/material/Stack';
-import Image from 'next/image';
+import Image, { ImageLoaderProps } from 'next/image';
 import { styled } from 'styled-components';
 
 const StyledBigHeader = styled(BigHeader)`
   letter-spacing: -.2rem;
 `;
 
+const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+  return `http://www.elderbrew.com/${src}?w=${width}&q=${quality || 75}`
+}
+
 export default function About() {
   return (
     <>
@@ -27,8 +31,24 @@ export default function About() {
           maxHeight: { xs: 'auto', md: '530px' },
         }
       }}>
-        <Image src="/outside.jpg" alt="Elderbrew" sizes="100vw" width="600" height="900" style={{ width: '100%', height: 'auto' }} />
-        <Image src="/gray-worry.jpg" alt="Elderbrew" sizes="100vw" width="900" height="600" style={{ width: '100%', height: 'auto' }} />
+        <Image
+          src="/outside.jpg"
+          alt="Elderbrew"
+          sizes="100vw"
+          width="600"
+          height="900"
+          style={{ width: '100%', height: 'auto' }}
+          loader={imageLoader}
+        />
+        <Image
+          src="/gray-worry.jpg"
+          alt="Elderbrew"
+          sizes="100vw"
+          width="900"
+          height="600"
+          style={{ width: '100%', height: 'auto' }}
+          loader={imageLoader}
+        />
       </Stack>
       <Stack direction={{ xs: 'column', md: 'row' }} justifyContent='center' sx={{
         '& img': {
@@ -37,8 +57,24 @@ export default function About() {
           maxHeight: { xs: 'auto', md: '530px' },
         }
       }}>
-        <Image src="/merch.jpg" alt="Elderbrew" sizes="100vw" width="900" height="600" style={{ width: '100%', height: 'auto' }} />
-        <Image src="/game.jpg" alt="Elderbrew" sizes="100vw" width="600" height="900" style={{ width: '100%', height: 'auto' }} />
+        <Image
+          src="/merch.jpg"
+          alt="Elderbrew"
+          sizes="100vw"
+          width="900"
+          height="600"
+          style={{ width: '100%', height: 'auto' }}
+          loader={imageLoader}
+        />
+        <Image
+          src="/game.jpg"
+          alt="Elderbrew"
+          sizes="100vw"
+          width="600"
+          height="900"
+          style={{ width: '100%', height: 'auto' }}
+          loader={imageLoader}
+        />
       </Stack>
     </>
   );