I'm really struggling to understand how Gatsby images, in particular the fluid images work. I love the fact that they hold their positions and load...
For further actions, you may consider blocking this person and/or reporting abuse
I’m not sure exactly where you’re having issues, but I did a write up on my experiences (and errors) when using Gatsby image. Feel free to look through and see if some of the sample code/explanations match your use case.
Rewriting A Static Website Using Gatsby and GraphQL - Part 3
Laurie ・ Mar 5 '19
My biggest question is why the fluid images disappear when I try to float them?
So Gatsby image has a wrapper tag that you can see in the inspector. Depending on the defaults set for those classes that may be the issue. I’d take a look there first.
I can't point you to anything specific, but I do know that you shouldn't ALWAYS be using the gatsby-image plugin, especially if you're using pagination. I think it's one of those where you have to grind through it for a while before you're really comfortable with it. I'm most of the way through Jason Lengsdorf's Gatsby workshop on Frontend Masters and there's a pretty lengthy section on images, so I'll report back if there's anything key that I find out from there.
I ended up using flexbox instead of floats, and it worked fine.
That'll do it; you don't want to use floats in this day and age unless you absolutely, positively have to.
Floats are nice for wrapping text around images though.
As said from others, probably your issue is understanding how gatsby-image is composed, to make it fit in a float involved section. A good starting point is forgetting about floating, and try flexbox grid.
Another good point is: you don't always need gatsby image component, if you need a bg image, you can obtain only the src from the query. Or use gatsby-image without the resizing parameters, and it should adapt to any width of the container you put it in.
I ended up using flexbox instead of floats, and it worked fine.
Hi Brian,
Do you have a Github repo with your code on it? might be able to get around the floats with flexbox/grid.
I ended up using flexbox instead of floats, and it worked fine. I just wasn't able to have the text wrap around it nicely. Not sure how to do that in flexbox just yet.
Great, I found this useful learning flexbox - flexbox.io/
Gatsby Images is a horrible piece of software, indeed.