Welcome back, everyone, to this lecture where we're going to discuss static files with tags.
Now most projects are going to have some set of static files and these are things like images, JavaScript
or CIUSSS.
The reason they're static is because we're not actually going to have any changes occurring to these
files once our website is deployed.
That is the same.
It's not like the user can go ahead and change the JavaScript or CSC that's occurring on the website,
so it's not really dynamic in that sense.
So Jingo can serve these static files through the use of tags instead of having to refer to a full file
path.
This is very similar to the idea of the URL tag, where instead of having to write out the entire pathway
to wherever that URL or template is on your computer, you can just say Go ahead and use this URL tag.
We're going to be doing the same thing, but using a static tag.
Now for this lecture, you will need to download or create some sort of static file in order to follow
along, our example is going to be using a JPEG image, but the same logic will apply to any static
file.
This is really just a generic method to let your template know the location of any static file, like
a CSV file, a JavaScript file, a JPEG file, etc. You would just put this in for the source location
with the static tag instead of writing out the full file path.
Let's head to the code editor and get started.
I'll be using a JPEG file that I downloaded from the internet.
All right.
Here I am inside a visual studio code.
Notice I do have a Django that JPEG file here, which is just a picture of Django Reinhardt.
I will be moving this later on into a static folder, but just for right now, you can see where it's
located.
OK, so let's go ahead and go through the first steps.
The first one is to actually just double check that static files is in your installed apps.
So that's going to be under my site settings, not PI.
So open up settings, up Pi, scroll down.
And right now from the previous lecture, I have debug as equal to false and allowed hosts set.
I'm going to set debug equal to true again just to make sure that if I make any mistake, I can go ahead
and debug this, so we'll reset that to the default settings.
But we also want to make sure is underneath installed apps.
We want to make sure Django that contrib that static files is there.
This should be there by default, but just in case it isn't.
Make sure it's there, then.
What you also want to make sure is that the static URL is defined.
If we scroll down here, remember previously we were able to define directories for the templates and
you're going to do a very similar thing for the aesthetics.
That is your static files.
So we scroll down until you get to the static files section and there should be a variable here called
static underscore you URL, and by default, it's set up to static forward slash.
That's actually what we want to ask, so that's totally OK for us now.
Technically, you could change this if you're storing your static files in a different manner or underneath
a different folder.
Maybe you're calling it my static files, but this is pretty much how we want it.
It's very simple.
Similar to the idea that your template directory should be called templates.
Similarly, your static files should be in a directory called static.
So in the same way, we have my app templates, my app, we're going to have my app, static my app
and we want it to match this URL.
Go ahead and save those changes.
They're essentially just confirming the default settings.
Then what we're going to do is inside of our templates, we can then use a static template tag.
But first, let's make sure we're storing our static files in the correct folder.
So because I chose static here, I need to follow a structure that is going to look something like this
my app.
Static and then my app.
And then your static folder, again, for example, it would be Django JPEG for us.
OK, so we want to be able to set these up very similar to the way we set up something like templates
and then would have this be something like example that each HTML.
Except this time we're doing it for static files.
So very similar to your URL tags and template names.
This is essentially just for static files.
Go ahead and save those changes in your settings.
And let's create underneath my app.
Notice how I have the templates directory.
Here I will create a new folder underneath my app and this is going to be called static.
And then just like in templates, I have the my app subdirectory underneath static, I will create a
new folder.
And this is going to match the name of my app.
So why do my app yet again for the same reason we did it for templates, the way Django works is because
this is called the static URL.
It's going to start looking for underneath all the static folders in the same way it's looking underneath
all the template folders.
Then you want to make sure that you don't get any errors in case you have this JPEG across multiple
apps, but or at least the name is shared across multiple apps.
The picture is different.
So just to make sure you don't get any errors in the feature, we'll go ahead and say static my app.
You can technically get away without having to write my app here in the same way.
You could then that for templates as well.
Speaking of which, because now we have set up our static folder.
Let's move this JPEG image into my app.
And it says, are you sure you want to move it?
Yes, I am sure.
OK, so now I have this Django JPEG notice that's on there.
My site, my app, static, my app Django, that jpeg.
Now let's actually display this in one of our views.
So how do we do this?
Well, I just take a look at one of my views in my app.
I have this example view that is rendering my app example that each HTML.
And remember that one is just showing up on my app.
So I will go ahead and place it there.
So if I look again at my views, I have example that each HTML, let's use example the HTML to actually
link to this static file.
I open up example the HTML.
Remember, it's extending from base.
I have this block.
Let's actually display now that image.
So how does this actually work?
I need to call two things load static in order for Django to understand that you're loading up static
directories and then actually at the point to the exact static file I'm looking at.
So after you've extended from the base, we're going to do here is say.
Load.
Static, so it's essentially load up that static directory and then we end up doing is, for example,
to imagine I wanted to create an image tag here.
I would say image source is equal to and recall.
Typically I'd have to write in the full file path.
So I have to say something like C users, my username and then static etc.
That's all the way until I got to finally that JPEG file.
Clearly, we don't want to have to do that all the time.
So this is why I cannot use the tag for static.
So I set up my tag and it's going to be static.
And this is going to look really similar to the URL tags, I'm simply going to say my app.
And in the name of my image, which is Dingo, that JPEG.
Close off that string and then close off that tag.
And if you want, you can also have an alternative just to make sure in case it can't be loaded, so
you can say my image is the alternative there.
OK, so clearly, I can now basically use the static tag to insert any sort of static files, so this
is not just useful for things like images.
If I wanted to show the source of a CSV file, I would just changes to a CSV file source and I would
again just have to remember to load static, set up my static URL and then say static and then the location
of that CSIS.
So you can basically plot this in for any source that was going to be to a static file, whether it's
a JavaScript, a CSV file, JPEG file, etc. The best way to do that would be to load all these static
calls up inside your base html.
OK, so now that that's done, I'm going to save those changes.
And let's go ahead and make sure everything is correct.
I am going to open up my website and let's go to my app.
And if you go to that, you can actually see there's already a forum for error.
But if you go to that page, you should say something like this.
You would get the information, but notice it looks like that static image didn't actually link.
The reason I'm showing this error is because it's probably one of the hardest to debug, and that's
because technically there is no real error with our code.
We just actually need to restart the server in order to apply and load those changes to the static URLs
and have the template be able to load the static directory, which is one of the main reasons I wanted
to show you here.
This is one of those errors where you're scratching your head thinking, What did I do wrong?
But really, you just had a restart and run the server.
So let's do that.
In fact, I'm going to come here, let's say control C and let's call again.
Python managed top pie.
Run server hit enter.
And now I'm going to go to the exact same page and refresh.
And now I see that picture of Django Reinhardt.
OK, so all you had to do was restart the development server and keep in mind because it's so hard to
debug.
You should always be thinking in the back of your mind if you changed or edited anything in settings
that pie or you're doing something that has a lot to do with settings that pie just do yourself a favor
and then restart the development server, do head and control C and then restart Python, manage that
run server.
So that's going to help you debug this sort of error.
And the best advice I can give is keep in the back of your mind that I do something to setting up high.
If I did.
Let me just be extra careful and restart that server.
But other than that, that's how static files work.
Again, you load static and then you can now use this static call in order to work with static files
stored anywhere.
I should point out that if you went to settings that pie, it actually tells you this documentation
link on how to use static files.
This has it broken down step by step, as well as how to set up global static file directories in the
same way, you can set up a global template directory.
The way you do that is in the settings that pie file.
You can go ahead and set up a static directory structure as another variable here.
So I'll leave that up to you if you want to explore it, but it's a really good documentation link.
Essentially everything we showed here.
Now, step by step.
OK.
That's it for this lecture.
I'll see it the next one.