Comments (14)
yeah but your styled-component is not using it! it is using styled.img
should be styled(Img)
from gatsby-source-instagram.
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.
from gatsby-source-instagram.
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
from gatsby-source-instagram.
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!
from gatsby-source-instagram.
no worries! happy to help!
from gatsby-source-instagram.
Just tried it with fluid images and works flawlessly, thanks!
from gatsby-source-instagram.
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?
from gatsby-source-instagram.
hey there,
In your query you are asking for fluid but then on the gatsby image you seem to be passing fixed.
from gatsby-source-instagram.
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:
from gatsby-source-instagram.
maybe you have a repo i can look? not sure what InstaImage is for example.
from gatsby-source-instagram.
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 :-(
from gatsby-source-instagram.
So you are not using gatsby image, just plain image tag!
have you looked at the gatsby image documentation?
from gatsby-source-instagram.
I'm importing:
import Img from 'gatsby-image'
I think this is correct, but let me double check it really quick.
from gatsby-source-instagram.
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!
from gatsby-source-instagram.
Related Issues (20)
- Cannot read property 'next' of undefined
- sourced image URL expires after a few days HOT 1
- Cannot read property 'edge_owner_to_timeline_media' HOT 2
- I can use version 0.6.1, but not 0.9.0 (Cannot query field "allInstaNode" on type "Query") [Gatsby 2.27.0] HOT 3
- Use maxPosts for scraping method HOT 1
- Hashtag Graph API function doesn't work HOT 5
- Cannnot get last 3 posts HOT 1
- Does using the Graph API remove the 50 posts limit? HOT 1
- New gatsby version issue HOT 7
- Error status Error: Request failed with status code 500 HOT 2
- Could not fetch instagram posts. Error status TypeError: Cannot read property 'user' of undefined HOT 13
- Unable to queryCarousel Images when scraping public posts HOT 1
- Migrating to safer typescript implementation HOT 3
- Dependency Dashboard
- Build works fine locally, but fails on Gatsby Cloud HOT 5
- Extend the Facebook/Instagram access token time HOT 2
- Error while running the sourceNodes lifecycle HOT 2
- Maintenance HOT 3
- NPM peer dependencies update HOT 1
- url signature expired
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-source-instagram.