Seven, eight, all of our jungle cities, so like in the previous two, I showed you how you can walk
with the front part of your application, how you can use Django template engine.
So this tool is going to is going to get interesting.
We are going to work with images on this route.
So I will tell you how you can work with images within Django.
So this is going to be interesting to do.
So let's get started with this.
So.
So first thing I need to do, you need to move to your settings or file side, move the settings file
and inside my settings or my file, what you need to do to define a static model, which is going to
be static and you need to define static file directly is Westernport don't join based directory with
a static folder.
So what I'm actually mentioning that I've made a static folder and here it is an inside my static folder.
I have two images, Django, Pink and White, and I would be using these two images and what I'm going
to show you what you need to do.
So this is the static folder, which I'm referring, which I also showed you into Gascony.
I'm showing here for a better experience for you for and inside my static folder, I have two images.
One is showing one another spider.
So I'm referring to this particular static folder.
And to refer this particular static folder, you need to move your move into a file and you need to
define this heading so this piece of code.
OK, so first I create a road, so I move to my profile and.
I am going to define but my image page, OK, and I'm going to define it, views dot my.
My image page.
And I'll give this a name is equal to my image page.
So this is going to be interesting.
OK, now my image page, I've defined my image page here, OK?
And I'll define a function inside my views, my image, and I've given a name.
Here it is in my image, but also.
So what I'm going to do, I'm going to define a view.
OK, I'll define a view.
Define.
My image page, which takes request as a barometer, good, and it will return and render an estimate
page request and that steam is going to damage page dot FDM.
But this is pretty fine.
OK, so there has been reloaded.
OK, so this looks to find now and segment in particular, I create a new template, I click a new file
image page dot FDM and look at this is fine now.
OK, now to create an image page or e-mail.
What I'm going to do, I'm going to take any of the pages here, OK, and I'll copy this quickly.
OK, now what do you need to do.
I'll define this as.
OK.
Sorry for this, I will define this as you can define any name image.
Page.
OK, so and what do you need to do?
I'll open this text file.
So this is the same text how you can load a static image.
So what you need to define, you need to define both include static inside your template.
So below this line, I'll define boesen load static.
Potent, loud, static, and I refer to this image, OK, I.
Remove this, OK, from here, what I'm going to tell you that this is a bootstrap and here's what you
need to do.
You will learn about images.
So images.
So this is the response class of bootstrap we are going to use, which will help us to make our image
responsive.
So this is going to get interesting.
So what you can do, you can define.
Div class is equal to container container fluid.
OK, and what do you what I'm going to do next, I'll define a rule.
Will we will be learning bootstrapping the upcoming lectures as well.
So I'll give a short idea how you can create a responsive page.
This is going to be interesting.
Class is a rule and inside the rule I have a container then inside of a container.
Then inside I have a column.
This class is going to call me six.
OK, now I'm going to quickly copy this so you can use this glass.
So so this glass image, fluid response to the deficit, the responses siestas, which has been altered
and written inside the bootstrap to make our image responsive on multiple devices and to define the
image, source and user calibrates that both inside the Nagaina, both inside and in segment, both
in time and space, gives static and undefined image name using single code.
So let me define Chango Dot PMG.
So this, this looks pretty fine here.
Jianguo Dot PMG and you can define, you can give any name here.
OK, so I'll just upload the server then restart my server, look at the rest of it and I have no issue
here so I'll go to my local who's running and I'll give my image page.
OK, so this is treatment error, which is current, but let me check my URL or I didn't save this book.
Yes, no, no talking.
Yeah, here you can see so you can see the image has been successfully loaded, so this looks pretty
good.
You can also use in your in your page what you can do.
You can also use bitin or PJI.
So this also works.
So this looks pretty fine.
And now what I'm going to show you, Chango not being.
So I'll move to January 20, and so I'll give you a briefing interview.
So now you're right, click on this and click inspect and when you click on inspect.
So this is a container fluid then, this is a room inside there is a column of white, medium thick
stack on the multiple on the devices, it will have a bit of sticks.
The butcher has a total of 12.
So we're going to learn that.
And this image source is this particular image so we can play with the inspector tools.
What we can do, we can use background is to great.
Let me do the story for this.
Like, this is our room.
So I type background.
Now you can see a rule which was also equal into the container fluid as a barrel.
And what we can do this is a column will align this image in the center and type margin zero or two.
OK.
Now you can see the image has been aligned to the center.
So let me check, OK?
There might be not exactly but might we should but we'll rectify this in the upcoming lecture on how
we can resolve this.
So the point is, when I move to a different devices, since I use image fluid as a class, I move to
Galaxy.
As you can see, that number collapses itself and the image is being responsive.
I can move on X image being responsive.
So this this is going to be very helpful in the responsive device design that iPhone five.
And I close this and the best part is when refresh this page, it's all going so because that was temporary
to make this permanent.
You need to define success in your estimate, which I define as margin zero or two.
OK, so when I go to Spain, refresh now, this is permanent.
So this this is pretty cool.
So in the next tutorial, I'm going to work with the images so they could that really help you?
So, guys, thank you guys.
Thank you so much.
So you can go to a repository.
Have a look at the source code and next door, we're also going to work with the images.
Then we will also cry in the next shooter, how we can work.
First, I will let you know about the bootstrap, how we can work with the bootstrap and using images.
Then we are going to use the if else logic, how we can render multiple images on a single page using
unflooded.
So that's going to be an interesting catch up in the next picture.
Thank you, guys.
Thank you so much.