Integration with gatsby-image

[m4rcelofs]

While having the thumbnail urls is great, I'd love to use the full image as source for gatsby-image (specially because of lazy-load and avoiding company firewalls blocking instagram urls on visitors).

Apparently gatsby-source-contentful and gatsby-source-datocms already do something similar.

I'm new at gatsby and its plugins, but it seems conceivable. Would a PR for this be welcome? Any pointers on how I should get started?

[oorestisime]

Hello,

I ve already started working on this, i hope to have it ready soon. I am also new to gatsby :) so i wouldn't know how to give you any pointers.

[oorestisime]

So, i think i have working the gatsby-image part. I basically create the srcsets etc based on the available thumbnails and the original img (so no resizing etc) so that the lazy loading works.
I still need to download locally the images and cache them so that at the build the images are not fetched from instagram

[oorestisime]

Hey so i ve refactored everything from this morning. you should be able to now use gatsby image and download locally everything. Please have a look at the readme for details and let me know if things work for you as expected!

[m4rcelofs]

Just tried it with fluid images and works flawlessly, thanks!

[rchrdnsh]

I can't seem to get this to work. This is what I'm doing:

allInstaNode(sort: { fields: [timestamp], order: DESC }) {
      edges {
        node {
          id
          likes
          comments
          mediaType
          preview
          original
          timestamp
          caption
          localFile {
            childImageSharp {
              fluid(maxWidth: 256) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          thumbnails {
            src
            config_width
            config_height
          }
          dimensions {
            height
            width
          }
        }
      }
    }

then in my component:

<InstaGrid>
        {data.allInstaNode.edges.map(({ node }) => (
          <InstaPost key={node.id}>
            <InstaSpacer>
              <InstaLikes>❤️ {node.likes}</InstaLikes>
              <InstaComments>💬 {node.comments}</InstaComments>
              <InstaScrim />
              {/* <InstaImage src={node.original} /> */}
              <InstaImage src={node.localFile.childImageSharp.fixed} />
            </InstaSpacer>
          </InstaPost>
        ))}
      </InstaGrid>

If i just get the original or thumbnail it works, but if I switch over to localFile etc...the images don't work anymore...anything i should be doing differently?

[oorestisime]

hey there,
In your query you are asking for fluid but then on the gatsby image you seem to be passing fixed.

[rchrdnsh]

apologies, yes, i tired both but copied from the wrong one. Neither fixed nor fluid seem to be working for me, but original does...but alas, without image optimization :-(

app screenshot with either fixed or fluid queries:

[oorestisime]

maybe you have a repo i can look? not sure what InstaImage is for example.

[rchrdnsh]

sure:

https://github.com/arrowgtp/alma

also, <InstaImage> is a styled component for the image itself, which looks like this:

const InstaImage = styled.img`
  grid-row: 1 / 9;
  grid-column: 1 / 9;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
`

is is a child of a grid item, but otherwise everything about it's css is pretty normal.

Also, just to re-iterate, if I load up this instead:

<InstaImage src={node.original} />

instead of:

<InstaImage src={node.localFile.childImageSharp.fluid} />

the images load just fine...just no dope gatsby image processing...and lighthouse yelled at me for it :-(

[oorestisime]

So you are not using gatsby image, just plain image tag!
have you looked at the gatsby image documentation?

[rchrdnsh]

I'm importing:

import Img from 'gatsby-image'

I think this is correct, but let me double check it really quick.

[oorestisime]

yeah but your styled-component is not using it! it is using styled.img should be styled(Img)

[rchrdnsh]

welp, looks like i'm not so smart! 😬

k, that fixed it, along with changing src to fluid, which i totally do elsewhere, but completely kerplunkt that one!

Thank you very much for your expedient help!

[oorestisime]

no worries! happy to help!