DEV Community

Struggling with Gatsby Images

Brian Barbour on May 12, 2019

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...
Collapse
 
laurieontech profile image
Laurie

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.

Collapse
 
bbarbour profile image
Brian Barbour • Edited

My biggest question is why the fluid images disappear when I try to float them?

Collapse
 
laurieontech profile image
Laurie

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.

Collapse
 
dylanesque profile image
Michael Caveney

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.

Collapse
 
bbarbour profile image
Brian Barbour

I ended up using flexbox instead of floats, and it worked fine.

Collapse
 
dylanesque profile image
Michael Caveney

That'll do it; you don't want to use floats in this day and age unless you absolutely, positively have to.

Thread Thread
 
bbarbour profile image
Brian Barbour

Floats are nice for wrapping text around images though.

Collapse
 
mattbag00 profile image
Matt Bagni

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.

Collapse
 
bbarbour profile image
Brian Barbour

I ended up using flexbox instead of floats, and it worked fine.

Collapse
 
imshuffling_31 profile image
David Riches

Hi Brian,

Do you have a Github repo with your code on it? might be able to get around the floats with flexbox/grid.

Collapse
 
bbarbour profile image
Brian Barbour • Edited

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.

Collapse
 
imshuffling_31 profile image
David Riches

Great, I found this useful learning flexbox - flexbox.io/

Collapse
 
5456qwe profile image
1214586

Gatsby Images is a horrible piece of software, indeed.