Improve handling of image types not supported by gatsby-transformer-sharp

gatsby-config.js

@@ -7,6 +7,12 @@ module.exports = {
   plugins: [
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        path: `${__dirname}/gatsby-config.js`,
+      },
+    },
     {
       resolve: 'gatsby-source-wordpress',
       options: {

src/components/EventList.js

@@ -25,38 +25,48 @@ const eventOrganizersQuery = graphql`
 `
 const EventList = props => {
   const renderEvent = event => {
+    const featuredMedia = event.featured_media
+    const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
     /* TODO: Make API return proper UTC datetimes */
-    const startTimeNaive = event.start_time.replace("+00:00", "")
-    const utcOffset = 2;
+    const startTimeNaive = event.start_time.replace('+00:00', '')
+    const utcOffset = 2
     const start = moment.utc(startTimeNaive).utcOffset(utcOffset)
     return (
       <Link to={event.path} className="event" key={event.id}>
-        <div className="event-image">
-          {event.featured_media && event.featured_media.localFile && (
-            <Img fluid={event.featured_media.localFile.childImageSharp.fluid} />
-          )}
-        </div>
+        {hasFeaturedMedia && (
+          <>
+            <div className="event-image">
+              {event.featured_media && event.featured_media.localFile && (
+                <Img
+                  fluid={event.featured_media.localFile.childImageSharp.fluid}
+                />
+              )}
+
+              {hasFeaturedMedia && featuredMedia.childImageSharp ? (
+                <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+              ) : (
+                <img
+                  src={featuredMedia.localFile.publicURL}
+                  alt={featuredMedia.caption || ''}
+                />
+              )}
+            </div>
+          </>
+        )}
         <header className="event-header">
           <span className="event-date">
-            <span className="event-date-weekday">
-              {start.format('dddd')}{' '}
-            </span>
+            <span className="event-date-weekday">{start.format('dddd')} </span>
             <span className="event-date-day-month">
-              {start.format('D.')}{' '}
-              {start.format('MMMM')}{' '}
+              {start.format('D.')} {start.format('MMMM')}{' '}
             </span>
             {/* Only specify year if different. */}
             {!start.isSame(new Date(), 'year') && (
-              <span className="event-date-year">
-                {start.format('YYYY')}{' '}
-              </span>
+              <span className="event-date-year">{start.format('YYYY')} </span>
             )}
           </span>
           <h2 className="event-title">{event.title}</h2>
           <div className="event-meta">
-            <span className="event-start">
-              kl. {start.format('HH:mm')}
-            </span>
+            <span className="event-start">kl. {start.format('HH:mm')}</span>
             {event.event_types && event.event_types.length && (
               <div className="event-types">
                 <ul>
@@ -260,6 +270,7 @@ export const pageQuery = graphql`
     end_time
     featured_media {
       localFile {
+        publicURL
         ...FluidImage
       }
     }

src/components/PostList.js

@@ -31,7 +31,7 @@ export default class PostList extends React.Component {
                     />
                   ) : (
                     <img
-                      src={post.featured_media.localFile.url}
+                      src={post.featured_media.localFile.publicUrl}
                       alt={post.featured_media.caption || ''}
                     />
                   )}
@@ -95,6 +95,7 @@ export const pageQuery = graphql`
     date(formatString: "MMMM DD, YYYY")
     featured_media {
       localFile {
+        publicURL
         ...PostListImage
       }
     }

src/templates/event.js

@@ -138,7 +138,7 @@ export const EventTemplate = ({
                   <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
                 ) : (
                     <img
-                      src={featuredMedia.localFile.url}
+                      src={featuredMedia.localFile.publicURL}
                       alt={featuredMedia.caption || ''}
                     />
                   )}
@@ -263,7 +263,7 @@ export const eventQuery = graphql`
     featured_media {
       caption
       localFile {
-        url
+        publicURL
         ...FluidImage
       }
     }