Homepage Hero & Images

[00:00:00]
>> What I wanna do next is actually turn this homepage into a homepage. We don't have any of the components that would be present on a standard homepage. So I'm gonna start with what I think every website ends up with eventually, which is a hero section, and that's gonna be an image and a call to action and a big headline, right?

[00:00:18]
So let's grab out of the workshop-assets, there are some images, and I'm gonna grab this sandwich-hero, and I'm going to move that into a new folder called images. And so this is going to be our hero image, this will be the top banner of the website. Next up, we're going to actually style this thing.

[00:00:46]
So let's get into our homepage, and I'm gonna remove this thing, and we're going to add out a section and give it a class of block and hero. These are things that we put into the style sheet of the global style sheet already, or some of them are.

[00:01:05]
The hero is gonna be scoped to the homepage itself, we'll get to that in a little bit, but the block is a global style, so that we have a way of sharing this concept of a block on a page. Inside of that, we're gonna set up a div, give it a class of cta.

[00:01:22]
And you may notice that we're not having to use class name, we're able to just use class, which is a small thing, but I like it. It makes me feel closer to the language I'm writing. Okay, so we've got our hero section, we get a headline. I'm gonna set up a lede here, and lede, if you've never seen that word, it's something that I picked up from journalists.

[00:01:50]
And I don't know why they spell it wrong on purpose, but it makes me feel like I know things about other industries when I use those types of words. Okay, can I spell connoisseurs right on the first try? I think I did. Okay, so we've got a heading, and then the other piece that we want here is we need to have that call to action.

[00:02:18]
So what we want people to do on this site is, the premise of this site is it is a build your own sandwich kit sale, like a kind of a blue apron style thing. And so we're gonna sell people sandwich kits and we want them to go check out our shop.

[00:02:39]
So we're gonna make that our call to action, let's go check out sandwich kits. All right, then the last thing we need to do is we need to put in the image here. So the image, we have to import. So there are a lot of ways that you can handle images in Astro.

[00:02:57]
Astro does have a built-in image component. They've got an experimental assets directory that will give you extra image optimization and stuff. My personal preference has become to rely on something like Cloudinary or Imgix because they do the optimization for you, they work on every framework, every platform. And it offloads a lot of your bandwidth to the Cloudinary CDN or the Imgix CDN, which is very good at optimizing for images, and has a generous free tier.

[00:03:27]
So I run, for example, Learn with Jason off of Cloudinary's free tier, and I very rarely get close, and I get a lot of traffic on the Learn with Jason website. So that's my preference, you have other options as well, but I'm not gonna get deep into it.

[00:03:46]
Big thing is, if you put something into the source directory, you can just import it. So what I'm gonna say is give me that heroImg, and I want it from images and sandwich-hero. Then once we've got that, we can go with a src={heroImg}, give it an alt of A sandwich on a plate.

[00:04:17]
And then give it a class of hero-image so that we can find it. And this one, because it's at the top of the page, I want the loading to be eager, I don't want it to get turned into a lazy loaded image or anything. I think that's the default, but it's helpful for me to signify that to myself.

[00:04:40]
And then the decoding can be async. We don't necessarily need to block the rest of the page, but we do want that image to start loading as fast as possible. So now that we've got this, this is our hero section. And if I collapse this down a little bit, we can see now that we've got, it's here, but this is a bit of a mess, this is kinda all over the place.

[00:05:01]
So the next thing we're gonna need to do is actually style it. So to style it, we have the exact same approach as we did in the default, or in the template, where we add a style tag, and then I've got the styles up in the pages-index section of the workshop-assets.

[00:05:21]
So under the styles and pages-index, you can just copy, paste that right out, drop it in here, and this is now a hero image, right? So we've got this thing set up, it looks nice. We've got the call to action, we're telling people what we need. The marketing team is gonna be thrilled, right?

[00:05:40]
And the product team is gonna be thrilled because this drives directly to an action that is good for the business. So all right, we're accomplishing business goals, we're making a website, and we've done it all pretty fast. We're not spending a lot of time on foundational stuff or boilerplate, we're just getting right into building value, question?

[00:05:56]
>> Assuming you're gonna get into this, but image optimization and the story there, is there any-
>> So-
>> Way you can talk about that?
>> By default, this image, I optimized before I saved it. So I just got it to the size I wanted it to be and I put it in like that.

[00:06:14]
The way that I would optimize these images is I would put them into Cloudinary and use their automatic optimization. Astro does have a, let me get into their docs here and look at the Assets directory. Now, I'm not using this because it's experimental, and I have been bitten before by teaching something like this right before the API changes.

[00:06:37]
So I don't wanna get into it in the workshop, but it's a built-in image component, they will do the optimization for you. And it's kind of integrated into the content collection so that it just works. This is pretty cool stuff and will give you a lot of power.

[00:06:57]
It brings in the images that it does import with the source, which you're gonna need, as well as the width and height so you can get your aspect ratios right in a format if you wanna do any kinda detection there. And it'll let you bring in just about any image format, and I mean, that's the whole thing, right?

[00:07:19]
If you wanna get into the original image asset, I don't think does any image optimization, so you would be either optimizing on your own or using a CDN of some sort. Again, because we tend, in real jobs, to end up using multiple frameworks, I lean toward having a solution that works regardless of the framework.

[00:07:43]
Because then I don't have to remember what's the difference between an Astro image and a Next image. I also find whenever, like next image is a good example, every time I try to use it, I find myself fighting against it because you have to explicitly allow each domain that you wanna use.

[00:08:00]
You have to remember what their exact syntax is, and you have to know the width and height, which isn't always something that you know, and sometimes you're okay with not knowing, right? But it doesn't matter because they'll fail, the build will fail if you haven't met those explicit requirements.

[00:08:16]
So in my case, I prefer to lean on something like Cloudinary or Imgix because it's going to give me the control, and it also gives me a uniform layer. And there's tools, like Matt Kane has made a thing called Unpic Image. And this is a cross-framework setup, so you can use this in pretty much every popular framework, and if you don't wanna use it in a framework, there's also just plain old, just use it.

[00:08:50]
And this is also, it's integrated with your favorite image CDN so that you don't have to trust Unpic to do this, but it will do other pieces as well, like it'll optimize for you and all that. My preference would be don't rely on your framework for image optimization because that's not its primary job, and they typically don't do it as well as something that has the primary job of optimizing assets.