Remote images in gatsby-image #35

dtbaker · 2019-01-21T12:41:39Z

Hello,

Does anybody have a working example of pulling in remote image URLs from Airtable and making them available within gatsby-image (i.e. for lazy loading / optimization etc..)

Thanks!

jbolda · 2019-01-21T12:57:18Z

👋

There is an example in the ./examples/recipes-with-photos directory.

waywardm · 2019-01-21T12:59:38Z

import React from 'react' import Layout from '../components/layout.js' import { Seo } from '../components/Seo' import { graphql } from 'gatsby' import Img from 'gatsby-image' import Pagetitle from '../components/Pagetitle' import styled from 'styled-components' const Article = styled.article`` const Eventdate = styled.h4`` const Content = styled.div`` const Image = styled.div` max-width: 600px; ` const EventListing = ({ data }) => { const events = data.airtable.data const seotitle = events.title + ' | In Sowerby Bridge The Town and Business Guide For Residents and Visitors' return ( <Layout> <Article> <Seo title={seotitle} /> <Pagetitle title={events.title} /> <Eventdate>{events.displaydate}</Eventdate> <Content dangerouslySetInnerHTML={{ __html: events.content.childMarkdownRemark.html, }} /> <Image>{events.eventimage && <Img alt={events.title} fluid={events.eventimage.localFiles[0].childImageSharp.fluid} />}</Image> </Article> </Layout> ) } export const aireventgraph = graphql` query aireventquery($slug: String!) { airtable(table: { eq: "Events" }, data: { slug: { eq: $slug } }) { id data { title displaydate content { id childMarkdownRemark { html } } eventimage { localFiles { id childImageSharp { fluid(maxWidth: 500) { ...GatsbyImageSharpFluid } } } } } } } ` export default EventListing gatsby config : { baseId: `appEsfKlCG88mTbFU`, tableName: `Events`, tableView: `Published`, queryName: `Published Events`, // optional mapping: { content: 'text/markdown', eventimage: `fileNode` }, // can leave off queryName, mapping or tableLinks if not needed }, { baseId: `appEsfKlCG88mTbFU`, tableName: `Events`, tableView: `Archived`, queryName: `Archived Events`, // optional mapping: { content: 'text/markdown', eventimage: `fileNode` }, // can leave off queryName, mapping or tableLinks if not needed }, Regards Paul Kidd Thunderfix

…

________________________________ From: dtbaker <notifications@github.com> Sent: Monday, January 21, 2019 12:41 pm To: jbolda/gatsby-source-airtable Cc: Subscribed Subject: [jbolda/gatsby-source-airtable] Remote images in gatsby-image (#35) Hello, Does anybody have a working example of pulling in remote image URLs from Airtable and making them available within gatsby-image (i.e. for lazy loading / optimization etc..) Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#35>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AL62etep09LZjpou40xwrum09CyYE_viks5vFbWEgaJpZM4aKv1Y>.

dtbaker · 2019-01-21T13:38:48Z

Thanks @jbolda - I can only see recipes-with-photos in https://github.com/jbolda/gatsby-source-airtable/tree/master/examples - is ./examples/examples-with-photos elsewhere? In the recipie one I failed to see how it obtained a local image for gatsby-image to interact with.

Thank you @waywardm - how does localFiles get calculated from eventimage ?

dtbaker · 2019-01-21T13:42:00Z

I have made progress with this. A custom ./plugins/gatsby-airtable-images/gatsby-node.js entry:

const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
const get = require('lodash/get')

exports.onCreateNode = async (
  { node, actions, store, cache, createNodeId },
  options
) => {
  const { createNode } = actions
  const {
    imagePath = 'data.thumb_720p',
    name = 'localThumb',
    auth = {},
    ext = null,
  } = options

  let fileNode
  if (node.internal.type === 'Airtable') {
    try {
      fileNode = await createRemoteFileNode({
        url: ext ? `${get(node, imagePath)}${ext}` : get(node, imagePath),
        store,
        cache,
        createNode,
        createNodeId,
        auth,
        ext,
      })
    } catch (e) {
      console.error('gatsby-airtable-images ERROR:', e)
    }
  }
  // Adds a field `localImage` or custom name to the node
  // ___NODE appendix tells Gatsby that this field will link to another node
  if (fileNode) {
    node[`${name}___NODE`] = fileNode.id
  }
}

and then query the local file like so:

allMyVideos: allAirtable(filter: { table: { eq: "Clips" }, data: { Published: { eq: true } } }) {
      edges {
        node {
          id
          localThumb {
            childImageSharp {
              fluid(maxWidth: 400, maxHeight: 250) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          data {
            vid_id
            thumb_360p

and then attempting to load the image on the page:

<Img fixed={localThumb.childImageSharp.fixed} />

jbolda · 2019-01-21T14:22:06Z

We would happily take a pull request clarifying the docs / examples once you figure this out so it does not trip up others in the future. 👍

In the config, you need to note which column in Airtable takes attachments, as shown here. Then you query much like your plugin above does, as shown here, and use it with gatsby-image much like you normally would.

Hopefully that helps clarify.

CharlyMartin · 2019-02-06T04:29:43Z

Hi @dtbaker,

Thanks for sharing your little workaround to add images to the gatsby-source-filesystem 😃Here's what I got on my end to make it work.

In a table called home_page, I've got a column called pictures where are several images grouped in the same table cell. This imports them successfully in the local source system of Gatsby.

gatsby-config.js:

          {
            baseId: contentBaseId,
            tableName: 'home_page',
            tableView: viewAll,
            mapping: { 'pictures': `fileNode` },
          },

Then this query returns to me the images, with all the cool juice from the sharp-plugin 👌 The __PROGRAMMATIC__ flag is the way I found to differentiate images coming from a remote database, as opposed to the ones I have locally (available under images). I hope this helps!

query homePageQuery {
  images: allFile(filter: {sourceInstanceName: {eq: "__PROGRAMMATIC__"}}) {
    edges {
      node {
        childImageSharp {
          fluid {
            srcSet
          }
        }
      }
    }
  }
}

@jbolda One information I'm struggling to get is: Which Airtable spreadsheet is the parent of the image? Right now I get all of the images back as one blob of undifferentiated data, as followed.

I'm pulling images from different tables and I would need a way to filter them in my page queries so that they can be displayed on the right page.

Any insight on that?

Thanks buddy 🙂

{
  "data": {
    "images": {
      "edges": [
        {
          "node": {
            "childImageSharp": {
              "fluid": {
                "src": "/static/8de4ea3157dda7e060bac02dc268aef9/8484e/5mMxI1uiTVCZV4TZoHRb_Hubsy_1920x1080-17212.jpg",
                "originalName": "5mMxI1uiTVCZV4TZoHRb_Hubsy_1920x1080-17212.jpg"
              }
            }
          }
        },
        {
          "node": {
            "childImageSharp": {
              "fluid": {
                "src": "/static/1f769f9e55232441b0cf5e0e5489ead8/8484e/r37O8G3TPOg8TVy38lxt_Hubsy_1920x1080-8.jpg",
                "originalName": "r37O8G3TPOg8TVy38lxt_Hubsy_1920x1080-8.jpg"
              }
            }
          }
        },
...

jbolda · 2019-02-06T05:03:18Z

It's available directly attached to each record. See https://github.com/jbolda/gatsby-source-airtable/blob/master/examples/recipes-with-photos/src/templates/recipeTemplate.js#L154 and the related config https://github.com/jbolda/gatsby-source-airtable/blob/master/examples/recipes-with-photos/gatsby-config.js#L28

jbolda · 2019-02-06T13:20:25Z

@dtbaker were you able to figure out how to use this Airtable source to query directly instead of making your own nodes?

CharlyMartin · 2019-02-06T13:51:13Z

Thanks for your answer @jbolda, my question was more about the table name, not the column name. What you call tableName in gatsby.config.js.

I'm pulling images from two different tables, for two different pages on my website. Both of these tables have a pictures column with a bunch of images inside.

gatsby.config.js

          {
            baseId: contentBaseId,
            tableName: 'home_page',
            tableView: viewAll,
            mapping: { 'pictures': `fileNode` },
          },
          {
            baseId: contentBaseId,
            tableName: 'about_page',
            tableView: viewAll,
            mapping: { 'pictures': `fileNode` },
          },

All the images get successfully imported in the node data layer during build, but I can't find a way to tell which image comes from which table once imported. Any idea ?

I hope this is clearer 😄

jbolda · 2019-02-07T13:43:19Z

Are you specifically looking to query through allFile? I don't know that it will put anything identifiable there. You may add a queryName option though (as we don't use the tableName other than to pull from Airtable). Then you could query something like this:

  allAirtable {
    edges {
      node {
        queryName
        data {
          pictures {
            localFiles {
              childImageSharp {...}
            }
          }
        }
      }
    }
  }

CharlyMartin · 2019-02-08T03:43:26Z

Thanks for that @jbolda 🙂

I wanted to use allFile because I want the images as nodes ( and not URLs), so that I can use gatsby-image with them. As you said, once the images are downloaded and part of the data layer of gatsby, it's not possible to know from which table they came from.

Also, I tried to run your query but it doesn't work on my end (after clearing the cache restarting the server). Once the images are downloaded through your plugin, they become "query-able" through allFile and don't show up in allAirtable anymore.

Here's my setup:

gatsby-config

          {
            baseId: contentBaseId,
            tableName: 'home_page',
            tableView: viewAll,
            queryName: `homeQuery`,
            mapping: { 'pictures': `fileNode` },
          },

The query runs in gatsby-node.js and returns null for images.
It's not part of a <StaticQuery> or a page query, it's only run during build.

{
  allAirtable(filter: {table: {eq: "home_page"}}) {
    edges {
      node {
        queryName
        data {
          pictures {
            url
            localFiles {
              childImageSharp {
                src
              }
            }
          }
        }
      }
    }
  }
}

Add the localFiles part also breaks the query (with the following message). It's a bit strange because pictures_3 is not a field of this table.

{
  "errors": [
    {
      "message": "Cannot query field \"localFiles\" on type \"pictures_3\".",
      "locations": [
        {
          "line": 9,
          "column": 13
        }
      ]
    }
  ]
}

So this is why I wanted to use allFile, but I'm happy to change my logic if you have a better idea in mind 😄

Thanks again for your help, I really appreciate!

jbolda · 2019-02-08T18:18:04Z

Hmm, it should work through the Airtable query. It sounds like you may be hitting the upstream bug in this issue? What version of gatsby-source-filesystem are you on?

Could that be what tripped @dtbaker up as well?

CharlyMartin · 2019-02-09T10:31:59Z

There you go @jbolda 🙂

  "dependencies": {
    "gatsby": "^2.0.19",
    "gatsby-source-airtable": "^2.0.2",
    "gatsby-source-filesystem": "^2.0.4",
  },

Is this why I got an issue?

jbolda · 2019-02-12T14:42:06Z

@CharlyMartin this will, every time you install give you the latest 2.0.X unless you have a lockfile. You may have to look into your lockfile or run an upgrade command (command varies if you are using npm or yarn). Essentially with only this information, we can't know for sure the exact version that you are on.

CharlyMartin · 2019-02-13T14:02:37Z

Here's some of my yarn.lock file:

gatsby-source-airtable@^2.0.2:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/gatsby-source-airtable/-/gatsby-source-airtable-2.0.3.tgz#e9b47c30eed16fd99e8539d32f0a95760f2b7dad"
  integrity sha512-Yu7Z8FBQv9bBH2HeEmsVWSIb3uckvAAi4JMUUrq7wpI2X8SItCKw0Ar6fQGpsHeyNXxBa/p5o0jFI6DcNETewg==
  dependencies:
    airtable "^0.5.6"

gatsby-source-filesystem@^2.0.4:
  version "2.0.18"
  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-2.0.18.tgz#938b08cb9c78c5b48a37581dd5df27cef4b68843"
  integrity sha512-oON3qZDb5P0xo6BwueZ1z59SrdIexGxmQnDtGlC0DgKT/timrsagMiroQowuVlPOyhVm4FkxoCnkOPszVBmvcw==
  dependencies:
    "@babel/runtime" "^7.0.0"
    better-queue "^3.8.7"
    bluebird "^3.5.0"
    chokidar "^1.7.0"
    file-type "^10.2.0"
    fs-extra "^5.0.0"
    got "^7.1.0"
    md5-file "^3.1.1"
    mime "^2.2.0"
    pretty-bytes "^4.0.2"
    progress "^1.1.8"
    read-chunk "^3.0.0"
    slash "^1.0.0"
    valid-url "^1.0.9"
    xstate "^3.1.0"

Is this more helpful @jbolda?

jbolda · 2019-02-14T23:03:47Z

It does! Hmm, it looks like 2.0.12 might have been where I noticed an issue. Ref the changelog: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-filesystem/CHANGELOG.md

You aren't on the latest, but I think it should be fixed on that version. Any way you can upload a reproduction of the issue? The examples appear to be working. I do need to update my personal site though where I noticed the issue.

CharlyMartin · 2019-02-15T05:49:12Z

Alright thanks @jbolda! The links in the changelog return a 404 on my side. So updating to 2.20 should solve this problem?

Not sure what you mean by "upload a reproduction of the issue"?

github-actions · 2019-09-11T00:06:18Z

This issue has been automatically marked as stale because it has not had any recent activity for 30 days. It will be closed if no further activity occurs within 7 days. Remove stale label, comment, and/or apply "ongoing issue" label to prevent this from being closed. Thank you for your contributions.

Lokinorse · 2020-11-12T12:45:38Z

👋

There is an example in the ./examples/recipes-with-photos directory.

Cant't see remote images there.

github-actions bot added the stale Issue is stale. Closes automatically without activity. Apply "ongoing issue" label to prevent close. label Sep 11, 2019

github-actions bot closed this as completed Sep 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remote images in gatsby-image #35

Remote images in gatsby-image #35

dtbaker commented Jan 21, 2019

jbolda commented Jan 21, 2019 •

edited

Loading

waywardm commented Jan 21, 2019 via email

dtbaker commented Jan 21, 2019

dtbaker commented Jan 21, 2019

jbolda commented Jan 21, 2019

CharlyMartin commented Feb 6, 2019 •

edited

Loading

jbolda commented Feb 6, 2019

jbolda commented Feb 6, 2019

CharlyMartin commented Feb 6, 2019

jbolda commented Feb 7, 2019

CharlyMartin commented Feb 8, 2019

jbolda commented Feb 8, 2019

CharlyMartin commented Feb 9, 2019

jbolda commented Feb 12, 2019

CharlyMartin commented Feb 13, 2019

jbolda commented Feb 14, 2019

CharlyMartin commented Feb 15, 2019

github-actions bot commented Sep 11, 2019

Lokinorse commented Nov 12, 2020

Remote images in gatsby-image #35

Remote images in gatsby-image #35

Comments

dtbaker commented Jan 21, 2019

jbolda commented Jan 21, 2019 • edited Loading

waywardm commented Jan 21, 2019 via email

dtbaker commented Jan 21, 2019

dtbaker commented Jan 21, 2019

jbolda commented Jan 21, 2019

CharlyMartin commented Feb 6, 2019 • edited Loading

jbolda commented Feb 6, 2019

jbolda commented Feb 6, 2019

CharlyMartin commented Feb 6, 2019

jbolda commented Feb 7, 2019

CharlyMartin commented Feb 8, 2019

jbolda commented Feb 8, 2019

CharlyMartin commented Feb 9, 2019

jbolda commented Feb 12, 2019

CharlyMartin commented Feb 13, 2019

jbolda commented Feb 14, 2019

CharlyMartin commented Feb 15, 2019

github-actions bot commented Sep 11, 2019

Lokinorse commented Nov 12, 2020

jbolda commented Jan 21, 2019 •

edited

Loading

CharlyMartin commented Feb 6, 2019 •

edited

Loading