Locked lesson.
About this lesson
Another way to add style is to use images. In this lesson, we'll explain how to add static images to your project and your pages.
Exercise files
Download this lesson’s related exercise files.
Using Static Image Files.docx57.4 KB Using Static Image Files - Solution.docx
57.8 KB
Quick reference
Using Static Image Files
Adding images to your web site is fairly straightforward with Django.
When to use
Do this whenever you want to add images to your website.
Instructions
Inside your static/resume directory, create a new directory called images. Open a Windows file explorer to that images directory. Drag and drop any images you like into that directory.
To use an image on your website, make sure you have the load static tag on the webpage:
{% load static %}
And then use a static tag inside an HTML img src tag:
<img src="{% static 'resume/images/my_dog.png' %}">
Hints & tips
- Don't forget to {% load static %}
- <img src="{% static 'resume/images/my_dog.png' %}">
- 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.