fixing storycards #36

Riverscapes · Jan 3, 2025 · c3a7108 · c3a7108
1 parent 86eccad
commit c3a7108
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/sites/devsite/content/page/About_Us/fair.mdx b/sites/devsite/content/page/About_Us/fair.mdx
@@ -29,4 +29,14 @@ Proident in ea officia aliquip sint cillum magna nostrud est est anim. In culpa
 
 Id irure ex sint nostrud. Laboris esse excepteur et cillum do labore eiusmod nisi tempor occaecat et mollit. Elit ullamco veniam Lorem adipisicing. Minim fugiat irure aliquip eiusmod proident occaecat ex sunt do. Ipsum minim cupidatat do occaecat officia nisi mollit anim. Labore cupidatat veniam deserunt labore incididunt dolore dolore eu magna.
 
-Pariatur enim enim ad non quis ut. Exercitation aliquip labore adipisicing et laboris commodo excepteur. Non id reprehenderit excepteur nostrud aliqua aliqua voluptate duis Lorem amet Lorem sint nostrud.
+<Grid container spacing={4} sx={{mt: 3}} padding={2}>
+      <StoryCard 
+        title="Joe Wheaton"
+        image={"/images/logo-nasa.png"}
+        description="Professor of Riverscapes; Fluvial Geomorphologist; Restoration Practitioner"
+        to="https://www.riverscapes.net/users/5826874" />
+
+</Grid>
+
+Pariatur enim enim ad non quis ut. Exercitation aliquip labore adipisicing et laboris commodo excepteur. Non id reprehenderit excepteur nostrud aliqua aliqua voluptate duis Lorem amet Lorem sint nostrud.
+
diff --git a/theme/src/components/StoryCard.tsx b/theme/src/components/StoryCard.tsx
@@ -1,5 +1,6 @@
 import { Box, Card, CardActionArea, CardContent, Grid, Typography } from '@mui/material'
 import React from 'react'
+import { withPrefix } from 'gatsby'
 import { GatsbyImage } from 'gatsby-plugin-image'
 import { ContentLink as Link } from './ContentLink'
 
@@ -13,13 +14,20 @@ interface StoryCardProps {
 
 export const StoryCard: React.FC<StoryCardProps> = ({ title, to, description, image, imageAlt }) => {
   const imgIsString = typeof image === 'string'
+  // If the image is a relative path, append the pathPrefix from gatsby-config.js
+  let newSrc: string = image
+  if (imgIsString) {
+    if (newSrc.startsWith('/')) {
+      newSrc = withPrefix(newSrc)
+    }
+  }
   return (
     <Grid item xs={12} md={6} lg={3}>
       <Card sx={{ height: '100%' }}>
         <CardActionArea component={Link} to={to}>
           {imgIsString ? (
             <Box>
-              <img src={image} alt={imageAlt} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              <img src={newSrc} alt={imageAlt} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
             </Box>
           ) : (
             <GatsbyImage image={image} alt={imageAlt} />