feat: add list image placeholders closes #166

site/src/components/list.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import humanize from 'humanize-plus';
 import moment from 'moment';
 
-import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image";
 
 import { device } from './devices';
 import { pathDate } from '../lib/utils';
@@ -72,14 +72,69 @@ const PostDate = styled.p`
   font-size: 1.5rem !important;
 `;
 
+const ListItemPlaceholderImage = () => {
+  // return a placeholder image from the set randomly
+  const noPlaceholders = 12;
+
+  switch (Math.floor(Math.random() * noPlaceholders)) {
+    case 1:
+      return(<StaticImage src="../img/posts/listimages/li1.png"
+        placeholder="blurred" layout="fullWidth" alt="" />);
+    case 2:
+      return(<StaticImage src="../img/posts/listimages/li2.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 3:
+      return(<StaticImage src="../img/posts/listimages/li3.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 4:
+      return(<StaticImage src="../img/posts/listimages/li4.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 5:
+      return(<StaticImage src="../img/posts/listimages/li5.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 6:
+      return(<StaticImage src="../img/posts/listimages/li6.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 7:
+      return(<StaticImage src="../img/posts/listimages/li7.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 8:
+      return(<StaticImage src="../img/posts/listimages/li8.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 9:
+      return(<StaticImage src="../img/posts/listimages/li9.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 10:
+      return(<StaticImage src="../img/posts/listimages/li10.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 11:
+      return(<StaticImage src="../img/posts/listimages/li11.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    default:
+      // this conveniently handles a result of 0 as well.
+      return(<StaticImage src="../img/posts/listimages/li0.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+  }
+};
+
 export const PostListItem = ({title, image, position, excerpt, date,
   slug, readingtime, wordcount}) => {
 
     image = image || '';
 
     const url = `/${pathDate(date)}/${slug}/`;
 
-    const listimage = getImage(image);
+    let listimage;
+    if (image === '') {
+      listimage = ListItemPlaceholderImage();
+    } else {
+      const PostImage = (image, title) => {
+        const postimage = getImage(image);
+        return(<GatsbyImage image={postimage} alt={title} />);
+      };
+
+      listimage = PostImage(image, title);
+    }
 
     const rounded_time = Math.ceil(readingtime);
     const humanised_words = humanize.compactInteger(wordcount, 1);
@@ -88,13 +143,11 @@ export const PostListItem = ({title, image, position, excerpt, date,
 
     return (
       <Item>
-        {typeof(listimage) !== 'undefined' &&
-          <ImageLink $position={position}>
-            <Link to={url}>
-              <GatsbyImage image={listimage} alt={title} />
-            </Link>
-          </ImageLink>
-        }
+        <ImageLink $position={position}>
+          <Link to={url}>
+            {listimage}
+          </Link>
+        </ImageLink>
         <h2><Link to={url}>{title}</Link></h2>
         <PostDate>{moment(date).format("dddd, MMMM Do YYYY")}</PostDate>
         { excerpt.length > 0 &&