DEV Community

loading...

Struggling with Gatsby Images

steelvoltage profile image Brian Barbour Updated on ・1 min read

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 in with a blur effect. But, I don't get the best way to display them or even how to at times...

I use the Img component in gatsby-image. But, sometimes I'm noticing it doesn't show anything. Especially if I try to do something like float the image or try to make it full size (100% height/width.)

I have read the docs quite a bit, but I feel like it's one of those things where something about it isn't clicking. Where I've struggled the most on my project with Gatsby is playing with these images, trying to get them to do what I want. Everything else is pretty clear cut and makes sense to me.

I've poured over the docs and sifted through Google a lot. There's not a whole lot other than the basics of how to use the Img component.

If anyone has experience or expertise with these, I'd love to pick your brain.

Thanks!

Discussion

pic
Editor guide
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
steelvoltage profile image
Brian Barbour Author

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
steelvoltage profile image
Brian Barbour Author

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
steelvoltage profile image
Brian Barbour Author

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
steelvoltage profile image
Brian Barbour Author

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
steelvoltage profile image
Brian Barbour Author

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/