This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Styling the Instagram Component" Lesson
[00:00:00]
>> Jason Lengstorf: I'm gonna do a little bit of styling. I don't know if you've noticed but I really like writing CSS. [LAUGH] Set it up to do some box shadow stuff, we're gonna make this display block. We also want to set a little bit of a margin so that it's not crammed into anything.
[00:00:18] We're going to set a max width of, let's see 33% minus 1 REM, so that way it'll take up roughly a third accounting for the margin. We then want to make sure that it doesn't get any wider than 120 pixels cuz that's where we capped it and that would cause problems.
[00:00:38] And then I want to make sure that when we hover over these that you get a little bit of a box shadow thing, so we're gonna transition on that. And the way this will work is we're gonna just set up the focus, so if you tab to it or hover, we will set up a box shadow to be,
[00:01:02]
>> Jason Lengstorf: It's kind of a big squishy shadow. So something that gives us some height. We're gonna use triple 2s and then about there is a good capacity for it. And then, we wanna make sure that it's on top in case it sits on top of another photo. So then, having done that, we need to actually show the photo.
[00:01:24] We've just got the the link so far. So, come on, all right, I can type.
>> Jason Lengstorf: So we're gonna set the image and I need to put a key on this link so we'll just do the photo ID again for that since we're mapping over elements. And then the image is going to get the fluid which is going to be the photo.fluid because remember we spread in use-insta.
[00:02:01] We spread the child image sharp which is what has fluid inside of it. So fluid is going to be available at the top. Then we have an alt tag and the alt tag is gonna be the photo caption because Instagram doesn't give us an actual alt tag. And we'll add a little bit of CSS in here.
[00:02:32] And this is going to be pretty straightforward. We're going to make it 100% wide. And we'll make sure that anything inside of it doesn't have any margin top so that it stays kinda where we want it to be. So there's our image, and we should see, okay, we're getting closer.
[00:02:51] Like now we've got images and if I click on this it's gonna open up Instagram like, perfect where we were getting real close here. So the next thing that we wanna do is, we wanna make sure that we've got some styles on the actual wrapper. And those will give us the rest of the story.
[00:03:15]
>> Jason Lengstorf: So we'll set this to be display flex. We'll have it wrap. So, flex-wrap is gonna be wrap. We want to justify the content with space-between. Every time I see this CSS property, I start thinking of the Dave Matthews' Band song. And it gets stuck in my head for the rest of the day and you're all welcome because now it's going to happen to you for the rest of time.
[00:03:39] We'll do a margin of one REM and then I'm going to set a negative margin on it. So we're going to probably call this good, where we have Like Instagram images are now loading from a third party source. And we didn't have to install a third party library.
[00:04:03] We didn't have to make any API calls. We didn't have to get API keys. Now I will say, Instagram is an easy one because it's public data. You do usually have to configure your sources with an API key of some sort. We didn't do that today because I didn't want to force everybody to go through a developer login system and getting API keys and all that.
[00:04:23] But for a lot of different API's and data sources, you're gonna be required to provide some kind of credential, which is a good thing because anybody who wants to shouldn't be able to load your data. That brings us to the end of loading third party data. There's just a whole universe of things that you can do with this.
[00:04:47] We only touched the surface. This is a pretty straightforward approach of how you would do this.