You don't have to write the height unless you want a fixed image (which I don't recommend). You don't event have to use GraphQL. Check out the docs for it, as your situation might be a little different than mine: www.gatsbyjs.com/plugins/gatsby-plugin-image/ Your code can be as simple as this: (note that the image location this way is different then in GraphQL). I'll bump my carousel / StaticImage tutorial up for you.
You are so welcome. I'm currently working on updating my Gatsby mini-course. Happy to give you complimentary access once I release it next week. Shoot me your email: adesignerwhocodes.com/contact/ and I'll give you comped access. Always happy to help!
Hi! I have a question. I need to create a multiple cards each containing a .svg file. How can I map all the svg images so that the cards are automatically created from a json / js file? Thank you!
i followed all steps, but the image still wont appear, the graphql shows that they read my image, and also update latest version of gatsby.. still not working.. sigh
@@ADesignerWhoCodes dynamic queries. I get that Gatsby is great for blogs etc. But I just tried to migrate an old iq test app to Gatsby and the ability to query dynamic images is hard. As In the inages served r dynamic. In my case when u press next page a random question comes up with appropriate image. Wish it was as simple as putting a parameter like graphql but it isn’t....
@@ADesignerWhoCodes and don’t get me wrong I see the power of gatsby. Our app currently went from a 54 page speed to currently 89. BUT this dynamic image querying is killing me
Gatsby is primarily used as a SSG, or a static site generator. They do have the ability to beyond that. It just takes some more work to do that, as it will be essentially server side rendered or SSR. Here's some info that may help you: www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/ Server side rendering is much more complex because there are if/then/else statements effectively. But you could ride a JavaScript file that loads images in remotely. I've brought in remote JS scripts before using React Helmet to somewhat make it dynamic. Nope. It is harder. I hear ya.
Cool :P Thank you SO much for the clear tutorial!!
Welcome!
It' s amazing! Im gonna use it. Tks Teacher
Welcome! More to come on this too.
u do awesome work dude!
Thank you! Cheers!
thank you man that was awesome
No problem!
Thank you for this!
You are welcome.
Thanks for the video. How would you do rounded corners on this? I have trouble adding a css class using the imgClassName tag
In JSX, it’s className. And I’d use the css property border-radius and round the parent.
@@bbhai7083 I’m all booked up unfortunately.
StaticImage doesn't depends on file source plugin
is there a way to have art direction with staticimage? I know its possible with dynamic images
You'd have to use GraphQL in conjunction with a CMS for art direction.
If i have to provide the height to the static image then? Should i simplay write height ={} and provide the number in curley brackets ?
You don't have to write the height unless you want a fixed image (which I don't recommend). You don't event have to use GraphQL. Check out the docs for it, as your situation might be a little different than mine:
www.gatsbyjs.com/plugins/gatsby-plugin-image/
Your code can be as simple as this:
(note that the image location this way is different then in GraphQL).
I'll bump my carousel / StaticImage tutorial up for you.
Thank you sir. It helped me alot
You are so welcome. I'm currently working on updating my Gatsby mini-course. Happy to give you complimentary access once I release it next week. Shoot me your email: adesignerwhocodes.com/contact/ and I'll give you comped access. Always happy to help!
Hi! I have a question.
I need to create a multiple cards each containing a .svg file. How can I map all the svg images so that the cards are automatically created from a json / js file?
Thank you!
You could use GraphQL and map your data from a json / js file. Static image won’t work with svg files so go old school and use img src.
i followed all steps, but the image still wont appear, the graphql shows that they read my image, and also update latest version of gatsby.. still not working.. sigh
It’s always tough the first time. Download my source code and compare. You’ll get it.
@@ADesignerWhoCodes got em thank you so much!
What is the theme in VSC?
I believe it’s the default theme. I’ve tried not to change it so it would look familiar when watching the videos. 😊
Is there a background image api in v3?
There sure is! ruclips.net/video/d5i00ZN2Tuw/видео.html (you'll need to still install Gatsby Background Image but this works as a bridge)
@@ADesignerWhoCodes thanks! Cuz I’ve left for nextjs for a while. I’d like to check the docs about the SVG as well. You’re awesome 👏
@@SeaRich I hear next is great. But for most sites, Gatsby just rocks. One of these days I’ll delve into Next. Thank you!
is there any way to query dynamic images? why does the src have to be hard coded? really irritating and sooo over the top complex lol
I actually love this. The proof is in Google’s PageSpeed Insights when pages get high 90s. What do you mean by dynamic images?
@@ADesignerWhoCodes dynamic queries. I get that Gatsby is great for blogs etc. But I just tried to migrate an old iq test app to Gatsby and the ability to query dynamic images is hard. As In the inages served r dynamic. In my case when u press next page a random question comes up with appropriate image. Wish it was as simple as putting a parameter like graphql but it isn’t....
@@ADesignerWhoCodes please help! Lol
@@ADesignerWhoCodes and don’t get me wrong I see the power of gatsby. Our app currently went from a 54 page speed to currently 89. BUT this dynamic image querying is killing me
Gatsby is primarily used as a SSG, or a static site generator. They do have the ability to beyond that. It just takes some more work to do that, as it will be essentially server side rendered or SSR. Here's some info that may help you:
www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/
Server side rendering is much more complex because there are if/then/else statements effectively. But you could ride a JavaScript file that loads images in remotely. I've brought in remote JS scripts before using React Helmet to somewhat make it dynamic.
Nope. It is harder. I hear ya.
👍👍👍👍👍
Thanks!