Using Static Image Files

Quick reference

• 00:00 Okay, in the last video we learned how to use custom CSS in our webpage.
• 00:06 In this video, I want to show you how to use images.
• 00:09 So we've already done most of the hard work,
• 00:11 we already created this static folder.
• 00:14 We already added it to our settings.py file down here, so
• 00:18 we don't have to do this stuff ever again.
• 00:21 Once we've added it to the settings.py file once, it's already done.
• 00:24 So from now on, we can just use these things.
• 00:27 So we've got this directory for CSS,
• 00:29 now we want to create another directory just for images.
• 00:32 So go to our resume subdirectory of our static folder, and right-click,
• 00:36 and let's create a new folder, and down here, let's just call it images.
• 00:39 Now, inside of this images folder, we can add any images that we want.
• 00:44 So there's lots of ways that we can pull images into our static file.
• 00:48 If you're on a Windows computer, you can just open up a Windows Explorer window and
• 00:54 just drag and drop your stuff into it.
• 00:57 But I'm going to create a new file, and I'm going to go File > Save As,
• 01:02 and let's just call this test.html.
• 01:05 So we have this test.html file, now we can right-click on it and
• 01:09 click this Open Containing Folder.
• 01:12 And this brings up a Windows File Explorer that we can then drag and
• 01:16 drop any files we want into.
• 01:19 So this is just one way to do it, you can do it any number of ways.
• 01:21 So now I've dragged that aspen.png file in there.
• 01:25 Now I'm just going to delete this test.html file, we don't need that,
• 01:29 that was just a way to get this window open easily.
• 01:32 So we can close that, come back over to our code, and we should see aspen,png.
• 01:38 And we can actually look at it, and that's cool.
• 01:40 So you'll notice it's inside of our images directory, as we would expect, and so
• 01:45 that's cool.
• 01:46 So let's head over to our home.html, come down here below our h1 tag here, and
• 01:51 let's just create a regular image tag, img src.
• 01:54 And then usually this would be the path to the URL where the image is sitting, but
• 01:58 we're going to use the static folder.
• 02:00 So just like with the CSS, we create a tag and it's static, and
• 02:06 then it's going to be resume/images/aspen.png.
• 02:14 End quotes, and then this is a really big image, so
• 02:16 I'm going to change the width to 500 and make it a little smaller.
• 02:19 Okay, and let's save this.
• 02:23 So let's go over this again really quickly,
• 02:25 this resume references inside of our static directory, this resume directory.
• 02:30 And then images is this images directory, and then aspen.png is this aspen.png.
• 02:37 Now one more thing we have to do, just like with our base.html file,
• 02:41 let's pull this back up.
• 02:43 Notice we have load static at the top here?
• 02:46 We need to load static on our homepage as well,
• 02:48 since we're going to be pulling this inside the webpage here.
• 02:52 So I'm just going to paste this in, and
• 02:54 this goes directly below the extends base.html tag, that's important.
• 02:59 So okay, let's go ahead, and save this, and let's head back over to our page, and
• 03:04 our about page, boom, there is our picture.
• 03:06 So just that easy to add images to webpages using static directory, and
• 03:11 very cool.
• 03:12 So in the next video we'll look at adding JavaScript to our webpage.

Lesson notes are only available for subscribers.