Hero Component

[00:00:00]
>> So back in our page.svelte file, we're gonna add a hero component. Let's create that component. Just do it right here where it's being used. And hero is gonna take a movie prop. At the lang equals ts, and the prop is gonna be of type MovieDetails. Just let VS code auto import that for us.

[00:00:34]
Okay, so the first thing we're gonna do is create an a link for the movie with an A element. I'm going to pass in the movie.id. Then inside there, we're going to add the backdrop image for the movie. Now the source of the images when we're dealing with the movie database needs to come from their own image server.

[00:01:19]
And so we're gonna put that information in our API helper module as well. And we're gonna add a helper for generating those URLs. So, first, we'll create export const media base equals, and the base URL for these images is https//image.tmdb.org/t/p. Then we can construct the URLs themselves by taking in a file path, which is gonna be a string, and a width, which is gonna be a number and returning media_base/w and then we'll take that width and we'll add the file path.

[00:02:18]
Right and we can now use that helper inside our page. All right, just import that like so. We need to get a reference to the backdrop image. So first, we'll get all of the images that belong to the movie. And that has backdrops, logos, and a poster image it's the backdrops and the logo that we want for our hero.

[00:02:56]
We have a whole bunch of backdrops that we can pick from. They have different properties. Ideally, we wanna get the backdrop that doesn't have any language on it. And if you pour over the movie database documentation, you will eventually figure out that the way to do that is to find an image that doesn't have a language associated with it.

[00:03:19]
So the way we do that is by finding an image where image.iso_639_1 is undefined. And if that doesn't exist, then we'll just grab the first one. At this point, it would probably be good to say that this code is available on GitHub. So if you're falling behind on the typing, then you can clone the repo from GitHub and follow along that way.

[00:03:54]
Okay, so now we have a backdrop object. We'll get the backdrop file path. Pass in a width of 1280. And hopefully, we'll be able to see that inside our page once we've added some CSS. First, of course, we need to add the hero component to the page. All right, so we can now see the Shazam backdrop.

[00:04:53]
It's a little large, so we're gonna need to shrink that down. Add some CSS in the hero component. Give it a class of backdrop so that we can target it. And lastly, we're gonna set an aspect ratio on this image so that we don't have layout shift when this page loads.

[00:05:35]
If we don't have the aspect ratio specified, then initially the image will take zero height and all of the content below it will pop down once the image loads. And that's not something that we want. So we're gonna add an inline style of aspect-ratio, and that information is helpfully on the object that we got from the API.

[00:06:04]
Just gonna copy all of this and add another image for the logo. We'll copy that line, backdrop equals sorry logo equals images logos find and again, we're gonna use the language, but this time, we're gonna try and find an English language one because right now, we're only concerned with the English language.

[00:06:26]
Ultimately, we'd like to add some internationalization to this as well, but for now, we're gonna default to English. All right, it's rendering that down there. We wanna put it inside the anchor element on top of the backdrop. So we're gonna use position absolute, put it all the way to the left, all the way to the top, give it a height of 100% and a width of let's say, 30%.

[00:07:19]
And an object fit of contain. Before this will layout correctly, we need to add some styles to the anchor element as well. Just gonna give that a display of flex. Right, and now the image is appearing correctly. Move that over a little bit so that it's not butting up against the edge of the wall.

[00:07:41]
And we're gonna have a drop shadow as well, just in case the text clashes with the background. Something like that will make the text stand out against whatever background it finds itself on. Okay, so our page is starting to take shape. We wanna add a class to this h1 so that it's not butting up right against the edge of the page there.

[00:08:17]
And you'll recall that in our global stylesheet, we have this column CSS property. I'm gonna add a class down here that we can use anytime we have something that we want to have that with, I'm just gonna call it column. It's gonna have a width of column, and then it's gonna have a margin left of auto and a margin right of auto.

[00:08:47]
And we're gonna use this side property as padding so that it gets moved away from the side of the screen. Now that we've got that class, we can add it to the h1. Right, and we'll see that the h1 there is now neatly lined up with the logo in the navigation bar.