Django Tutorial #12 - Static Files & Images

Поділитися
Вставка
  • Опубліковано 26 лис 2017
  • Hey ninjas, in this django tutorial I'll explain how we can set up our django project to use static files such as images, css and JavaScript files.
    DONATE :) - www.paypal.me/thenetninja
    ----- COURSE LINKS:
    + Python tutorials - goo.gl/xD2AvX
    + Course files - github.com/iamshaunjp/django-...
    + Django docs - docs.djangoproject.com/en/1.11/
    + Atom editor - atom.io/a
    + CMDER - cmder.net/
    ======== Other Tutorials =========
    ----- NODE.JS TUTORIALS
    • Node JS Tutorial for B...
    ----- MONGODB TUTORIALS
    • MongoDB Tutorial for B...
    ----- SUBSCRIBE TO CHANNEL - / @netninja
    ======== Social Links ==========
    Twitter - @TheNetNinja - / thenetninjauk
    Patreon - / thenetninja

КОМЕНТАРІ • 206

  • @ProSimples
    @ProSimples 4 роки тому +199

    If you're running Django 3 and were on an older version before, you need to replace:
    {% load static from staticfiles %} or {% load staticfiles %}
    with just:
    {% load static %}

  • @user-gs2zp3dm1v
    @user-gs2zp3dm1v 2 роки тому +8

    in DJANGO 3 , in settings.py use the following STATICFILES_DIRS = [
    BASE_DIR / "assets",
    ]

  • @ignamikel
    @ignamikel 7 місяців тому +3

    bro just wanted to say that 6 years later, your django tutorials are still the best around! 🤗

    • @NetNinja
      @NetNinja  7 місяців тому

      I appreciate that! :) thank you

  • @devkrishanrpurohit5181
    @devkrishanrpurohit5181 3 роки тому +14

    if the file doesn't show up, please make sure you added the finishing coma in the tuple
    STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'assets'),
    )
    this is in the settings.py

    • @VS257
      @VS257 3 роки тому +1

      Django seem to not recognize the "os" part. It has a yellow sqiggly line underneath... it says "os" is not defined ???? help?

    • @preetsingh2133
      @preetsingh2133 3 роки тому +6

      @@VS257 Import os in settings.py file

    • @user-gs2zp3dm1v
      @user-gs2zp3dm1v 2 роки тому

      @@VS257 STATICFILES_DIRS = [
      BASE_DIR / "assets",
      ]

  • @maxiequa567
    @maxiequa567 6 років тому +94

    AWS/Django for production mini-series +1

  • @adarshpunj
    @adarshpunj 4 роки тому +18

    Okay, this is indeed the BEST DJANGO tutorial in the universe. Thanks a lot for creating series.

    • @NetNinja
      @NetNinja  4 роки тому +1

      Thanks so much! :)

  • @atitallahmariem2522
    @atitallahmariem2522 4 роки тому +2

    u are awesome :) i was so confused and scared about django but the more i advance the more it getting clear and simple thank u , keep creating such perfect series plz :)

  • @mel8080
    @mel8080 4 роки тому +1

    I really like your tutorial videos. Each video/Topic is short, and gets straight to the point. I know this version may be a little outdated, but I prefer to go by your videos!

  • @rossideas
    @rossideas 3 роки тому +1

    Your communication skills are the best!! Short, sweet and to the point. Thank you.

  • @stebterp
    @stebterp 5 років тому +14

    Thank you very much for this series!
    I'd like to add that I'd be very interested in a Django for production + AWS series.

  • @austinmurphy9074
    @austinmurphy9074 4 роки тому +42

    FIX: in templates {% load static %} in link href="{% static "styles.css" %}"

    • @Yousifalzoubi
      @Yousifalzoubi 4 роки тому

      Thanks man! ;)

    • @JJnnaatt
      @JJnnaatt 4 роки тому +1

      Thank you. Use
      href="{% static 'styles.css' %}"
      to avoid escaping the double quotes though

    • @raiyan22
      @raiyan22 3 роки тому

      @@JJnnaatt thanks a lot, does the job neatly :)

  • @garynelson1039
    @garynelson1039 6 років тому

    I'm still going, but this series is exceptional. I have been using Django for about 2 years by mostly modifying the starter app that comes in Visual Studio (haters gonna hate) but I never understood it. This has filled in all the blanks. Can't thank you enough.

  • @user-vt7co6nn6q
    @user-vt7co6nn6q 4 роки тому +1

    Thank you!! I searched many information, so I find this! I thougt about give up, but with your help I may continue my hobby!

  • @yasyfawiwaha4088
    @yasyfawiwaha4088 3 роки тому

    Thanks for the tutorials!
    I got some question, how do I access another static file in another directory from my css file? the curly braces seems to cause trouble when I used {% load static %}

  • @GustavoMachadoAlvaresdeLima
    @GustavoMachadoAlvaresdeLima 5 років тому

    would be possible to symlink any folder in my system to the myapp/static folder?

  • @jdevcast6527
    @jdevcast6527 6 років тому +1

    Is the font 'Ubuntu' standard or do you have to install it?

  • @amrino
    @amrino 3 роки тому

    What a great tutorial, thank you. Succinct, clear and quick!
    I had three issues that others may have had.
    1. You need to "import os" at the top of the settings.py file
    2. When trying to access my admin site after these changes I had an 'incorrect padding' error. I found a solution on stack overflow - you need to download a more recent version of Django (pip install django==3.1.1)
    3. {% load static from staticfiles %} did not work. I found a quick fix on stackoverflow. Just change it to {% load static %} and it works really well.

  • @cacheflex8033
    @cacheflex8033 4 роки тому +1

    Beautiful tutorials!!!!! I just got one issue, everything seems to work but, I didn't get the same font style. Mine is sort of like Times New Roman. Please help! :(

  • @johnwinchester8537
    @johnwinchester8537 4 роки тому +1

    And what if it's not in the BASE_DIR ?? Like I have it in a separate folder called polls

  • @asadhameed6610
    @asadhameed6610 4 роки тому

    But how would you display a picture on the app (instead of it being a background)?

  • @anukulchand868
    @anukulchand868 5 років тому +2

    Excellent tutorials ! loved it !!

  • @TheFunkoDunko
    @TheFunkoDunko 5 років тому

    Does this work after the Django app has already been deployed?

  • @christianjaydango7567
    @christianjaydango7567 6 років тому

    what's up dude? I have a question.
    How do we use static files (css file for example) that is intended only for a specific app? Where do we put these static files?

  • @faisalahmad2322
    @faisalahmad2322 5 років тому +2

    sir please can you tell how to use images in static css file for background in django?

  • @AcademiaPython
    @AcademiaPython 4 роки тому +1

    best tutorial I've ever seen, I'm loving it.

  • @chaitanyashimpi2880
    @chaitanyashimpi2880 4 роки тому

    I am not able to download the course code files of python Django. Can you please help?

  • @stahelpeter
    @stahelpeter 5 років тому

    Excellent video and well explained. Thank you!

  • @debabratatah4887
    @debabratatah4887 5 років тому

    sir this{% for %}----{% endfor %} type is not working for mine. how to solve it? pls help. I tried a lot but failed

  • @caesargamer6368
    @caesargamer6368 6 років тому

    Hello ninja, first of all, great job with the tutorials, they are amazing!
    I only have one question, Are you planning in the near future to show us how to serve static files for production?
    i would really appreaciate. xD

  • @kibi4979
    @kibi4979 4 роки тому

    Really cool explanations! Thank you.

  • @sagarkafle9259
    @sagarkafle9259 2 роки тому

    I'm confused
    without STATICFILES_DIRS set
    how could /static/style.css open on the project
    Does django already know about the file ?

  • @pseudomonous
    @pseudomonous 2 роки тому

    Thanks for the tutorials, I've learnt a lot from you

  • @upcom1ng116
    @upcom1ng116 3 роки тому

    Can someone please explain what is "Serve up images" at 0:47?
    I am not sure what he meant

  • @alexissuarezalvarez5622
    @alexissuarezalvarez5622 3 роки тому

    hi, i didn't quite understand why i used a folder that contains all our static files

  • @chukwunta
    @chukwunta 4 роки тому

    awesome tutorial bro. You really know your stuff.

  • @Anom21
    @Anom21 3 роки тому

    Thanks man for making it seem so easy

  • @jaywandery9269
    @jaywandery9269 Рік тому +1

    the styles.css styles wont load on my articles.html

  • @fooboobear
    @fooboobear 6 років тому +1

    Nice to see you again

  • @peroquecoincidencia9991
    @peroquecoincidencia9991 3 роки тому

    you know what you video helped me a lot, wonderful

  • @enesyurtsever3785
    @enesyurtsever3785 4 роки тому

    I want to use {% load static%} with this;
    how i use idk

  • @spiritcxz
    @spiritcxz 5 років тому

    you can share github link on this project?

  • @puteri8
    @puteri8 5 років тому +1

    Hi there. Your videos are really helpful! However, i am having problem with my static files. the CSS file does not seem to be working. How can i make it work?

    • @puteri8
      @puteri8 4 роки тому

      found my mistake. Its not ref but rel

  • @Lbmaniak
    @Lbmaniak 5 років тому

    thx
    I hope, someday I will watch playlist for Django in production :-)

  • @meghaaggarwal8508
    @meghaaggarwal8508 3 роки тому

    I wish you could make Django/AWS for production a mini series or a simple tutorial Shaun! Not many people guide for industrial production level basis..

  • @kalaiwaniapratnakumarstude6868
    @kalaiwaniapratnakumarstude6868 2 роки тому

    Thank you very much for this video

  • @swapnaliarawandekar414
    @swapnaliarawandekar414 4 роки тому

    I just loved this tutorial...

  • @diegoporro1276
    @diegoporro1276 6 років тому

    Hey! I have a problem with my browser loading the css file, I do exactly what you do but it cant load the css file

    • @garynelson1039
      @garynelson1039 6 років тому +1

      you've probably solved it, but in my case it was because I missed the comma at the end of the staticfiles tuple

  • @mdahossain1665
    @mdahossain1665 4 роки тому

    why its not rendering transparent png images?

  • @faisalhossain2002
    @faisalhossain2002 4 роки тому

    in my case it did't work with
    {%load static from staticfiles%}
    it worked with
    {%load static %}
    but in your case it work with staticfiles .
    why its happend

  • @alirezatajadod8437
    @alirezatajadod8437 6 років тому

    Hello,
    I can' get past the "Directory indexes are not allowed here" on the Get static call to the server. It seems to me i've done everything right. I've gone as far as copying netninja's code from github into my own script and reviewing the django documentation they have on the web.
    github.com/ATajadod94/django-practice-project/tree/master/practice/practice
    my folder is uploaded on github which contains both the setting and url python files. If anyone can help that would be great.It seems to read the static page so i'm doing at least something right , but obviously not enough. Also, when I try to import static into my tempelate, it doesnt read it, I assume for the same reasons.

  • @narendraverma825
    @narendraverma825 4 роки тому

    How to use with img tag?

  • @K4MR4N1UK123
    @K4MR4N1UK123 4 роки тому +1

    Can I ask you something? What’s the benefit of Django jargon when we can do things in a lot easier fashion using the same old html,php,Css JavaScript etc? I don’t see any point of this Django other than causing confusions and making simplest of things a lot harder to do. Same as mvc I never saw any point in that too. There is absolutely no way any one can remeber so many things to do in different files and folders at the place of work.

  • @ShivamSingh-wh9jj
    @ShivamSingh-wh9jj 5 років тому

    thanks bro you save my life

  • @Kennerdoll
    @Kennerdoll 2 роки тому

    I struggled to find a solution that will work but this has made my work easy, thanks bro a subscribe 4 you and a like on top

    • @NetNinja
      @NetNinja  2 роки тому +1

      No problem Kenny :) thanks for the support!

  • @hahahihi6253
    @hahahihi6253 3 роки тому

    Thank you very much 😊👍

  • @adambernard1404
    @adambernard1404 4 роки тому +2

    THANK YOU. I can't believe how bad the official django documentation is for this simple task.

  • @RedElectrik
    @RedElectrik 4 роки тому

    no idea what im doing wrong. I cant go to a url and work

  • @clinck3439
    @clinck3439 3 роки тому

    If your changes in css is not reflecting on web page then it might be because of your browser is caching css file in the browers,
    Try refreshing web page by holding ctrl or shift, this should work.

  • @williamquanpreuss13
    @williamquanpreuss13 6 років тому +2

    Pls do aws! I would definitely appreciate that! :)

  • @010101dddm
    @010101dddm 4 роки тому

    I can not get static files in the browser

  • @alexarcasm
    @alexarcasm 4 роки тому +1

    To get the Ubuntu font you need to add :

    to the html file

  • @Sainiajits
    @Sainiajits 2 роки тому

    Thank you very much :)

  • @tauheedissa3293
    @tauheedissa3293 5 років тому +2

    I have tried everything but this static not working for me. I need your assistance sir.

  • @aritora778
    @aritora778 5 років тому

    thanks a lot.. it helps a lot..

  • @witoldszrama6344
    @witoldszrama6344 5 років тому

    Hi, I have really strange problem with static files. In my css file i can't affect body at all. My css file is connected for sure because i can change other things like f.e. h1 but body won't work no matter what I am doing.

    • @puteri8
      @puteri8 5 років тому +1

      did u manage to solve it? i am facing the same prob as u

    • @aznsuperher0
      @aznsuperher0 4 роки тому

      @@puteri8 same

  • @GabrielOliveira-hm6gi
    @GabrielOliveira-hm6gi 6 років тому +4

    If you are having trouble with the static filers thing, try to check the folder level, it has to be on the same level of apps.

    • @VadimBesedin
      @VadimBesedin 5 років тому

      Thanks Gabriel, that was the case with my code :)

    • @v.m.5850
      @v.m.5850 5 років тому

      Thanks bro, I couldn't figure out the issue for like an hour

    • @imammahadi352
      @imammahadi352 5 років тому +1

      At first i did it.But it still didn't work. But when i put the static folder inside the article app,then it works . I am still trying to find where the problem was?

  • @pranavireddy3653
    @pranavireddy3653 6 років тому

    Thankyou so much it works and it uses me alot.

  • @hazemsobhy6493
    @hazemsobhy6493 4 роки тому +1

    i was rolling to make it work but it work for me after change this line of code its not a tuble
    its a list ( ) => [ ]
    STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'assets'),
    ]

    • @8o8inSquares
      @8o8inSquares 4 роки тому +1

      You can still make it a tuple, all you needed is a comma at the end of 'assets'),
      that's all

  • @ghazalakhan2964
    @ghazalakhan2964 6 років тому +2

    Hi, thank you for the tutorial. I am facing issue while loading my static/styles.css file on browser. It says Not Found
    The requested URL /static/styles.css was not found on this server.
    I have followed same procedure line by line. I have not missed "," after staticfiles_DIRS tuple.
    Please help

    • @caesargamer6368
      @caesargamer6368 6 років тому

      did you find the answer to your problem? i have the same issue here ):

    • @OvaisDIYGarage
      @OvaisDIYGarage 6 років тому

      CaesarGamer did you find the solution i am having the same problem

    • @caesargamer6368
      @caesargamer6368 6 років тому +1

      What worked for me was to use a list, and not a tuple, like this:
      STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'staticfiles'),
      ]
      You see, he says you can use a list or a tuple, and maybe it works in older django versions, but for some reason i had to use a list, tuples don't work for me in this, also i named my folder different (saticfiles), but that has nothing to do with the error.
      I hope this help you.

    • @caesargamer6368
      @caesargamer6368 6 років тому +1

      All of this of course in the settings.py files, i didnt mention it in the reply, sorry xD

    • @bestplanet6175
      @bestplanet6175 5 років тому +1

      thank you, it saved my day :)

  • @gabrielpena5829
    @gabrielpena5829 2 роки тому

    Thank you very much

  • @AnMaDeBi
    @AnMaDeBi 2 роки тому

    Thank you!

  • @fasterfasterr6056
    @fasterfasterr6056 3 роки тому

    where is advanced , i am waiting for it .you are the best teacher . i need tips to make my website secure .

  • @elliotgarcia8745
    @elliotgarcia8745 5 років тому

    i like your video very well explained

  • @iliatalebzade8751
    @iliatalebzade8751 3 роки тому

    you're a LEGEND !!!

  • @TheFixers
    @TheFixers 2 роки тому +1

    guys, if you have problem with staticfiles, just replace this line to {% load static %}

  • @suryaadhikari3959
    @suryaadhikari3959 5 років тому

    ValueError: not enough values to unpack (expected 2, got 1)

  • @KacperMarciniak_
    @KacperMarciniak_ 3 роки тому

    Thanks a lot

  • @birdster42
    @birdster42 2 роки тому

    If you are still having trouble loading the /static/styles.css page - try restarting. I tried every fix on here and nothing was working. Restarted and it worked *face palm*

  • @gcloud8397
    @gcloud8397 6 років тому

    Thank you, sir

  • @samdavepollard
    @samdavepollard 5 років тому

    I've just set a new personal best for hitting a subscribe button.

  • @DanielLeachTen
    @DanielLeachTen 2 роки тому +1

    I had to take the preceding forward slash out of STATIC_URL: STATIC_URL = 'static/' for it to work... in case anyone else is stuck!

  • @palashgangamwar3999
    @palashgangamwar3999 5 років тому

    os.path.join.(BASE_DIR,'assets'),
    ^
    SyntaxError: invalid syntax

    • @victor7ultimate
      @victor7ultimate 5 років тому +2

      os.path.join(BASE_DIR, 'assets'),
      spot the difference now?
      remove the . after join

  • @lanceloot
    @lanceloot 4 роки тому

    year?

  • @lawesosah9214
    @lawesosah9214 4 роки тому

    I had a problem loading my styles.css . For some reason they don't apply to the webpage

    • @asiful_alam
      @asiful_alam 4 роки тому +1

      same here! got any solution??

    • @lawesosah9214
      @lawesosah9214 4 роки тому

      @@asiful_alam yeah actually. It turns out I just forgot to remove the DOCTYPE HTML thing at the beginning of the template. It worked after that. You should try it. So funny how I literally spent hours trying to fix such a tiny problem

  • @9keen
    @9keen 4 роки тому +1

    for some who got stucked with the STATICFILES_DIR and File Not Found problem, I hope you didnt repeat the same silly mistake i did, which is the 'assets' folder i put it wrongly in the sub 'Djangonautic' folder, in which it supposed to be in the base 'Djangonautic' folder.

  • @cyberlab551
    @cyberlab551 2 роки тому +1

    updated:>>> {% load static %} not use whatever shown on video.

  • @boubacardiallo7287
    @boubacardiallo7287 5 років тому

    loved it

  • @srwaan
    @srwaan 4 роки тому

    Everything is working fine but the font. I downloaded the entire Ubuntu family yet still displays a Times New Roman font. Not every font works tho (Arial works but not comic sans?)

    • @marcin150893
      @marcin150893 3 роки тому

      You need to get Ubuntu font from google fonts

  • @dipeshmandanka
    @dipeshmandanka 2 роки тому

    Life saver !!

  • @dec23
    @dec23 6 років тому +1

    God Bless You!!!!

  • @MegaJagveer
    @MegaJagveer 3 роки тому

    Python might make you add a trailing comma in the Touple

  • @ShaffleOne
    @ShaffleOne 4 роки тому

    Still waiting for Django for production series!!!

  • @Viralvlogvideos
    @Viralvlogvideos 3 роки тому

    2:16 my friend i didn't get this one can u please simply in few words it will be very much helpful for me to learn django :)

  • @jakubsamanek9715
    @jakubsamanek9715 4 роки тому

    Thanks

  • @prasadkadu9737
    @prasadkadu9737 3 роки тому

    please make new videos with other example and updated django version

  • @beosoftlabs
    @beosoftlabs 5 років тому

    AWS series please...

  • @naimazad2138
    @naimazad2138 6 років тому

    i cant find the css file

  • @dutch9238
    @dutch9238 4 роки тому +1

    I can't even access 127.0.0.1/8000/static without getting a 404 no matter what I do

    • @ninjatribble7961
      @ninjatribble7961 4 роки тому

      Same here

    • @dutch9238
      @dutch9238 4 роки тому

      @@ninjatribble7961 cant remember what I did to solve this issue, but I then ran into another issue with user media and this vid helped me out ua-cam.com/video/QC2cLkHoXLk/v-deo.html

    • @dutch9238
      @dutch9238 4 роки тому

      @@ninjatribble7961 let me know if you have questions, I might remember what I did to fix it

  • @fireberrywocky
    @fireberrywocky 5 років тому +1

    I have tried honestly every single thing in the comments for serving up the static files, and still nothing! I'm am ready to cry!

    • @fireberrywocky
      @fireberrywocky 5 років тому +2

      Oh my f!!! FINALLY!!! At 2AM guys!! 2 fucking AM I figured out the problem.
      Should be:
      STATICFILES_DIRS = (
      os.path.join(BASE_DIR, "assets/styles.css")
      )
      Django wants to know the path and not the location of the folder. Now I'm wondering what will happen if there is more than one file in there. This is frustrating me!

    • @devkrishanrpurohit5181
      @devkrishanrpurohit5181 3 роки тому

      @Volk Raider THE fuCKIGN COMA

    • @paulbrugger9610
      @paulbrugger9610 2 роки тому

      yes, add a comma at the end of the second line like NN did.

  • @VadimBesedin
    @VadimBesedin 5 років тому

    It looks that it's getting trickier and trickier...
    How do you know what to IMPORT and FROM to import it?
    And i think you need to know 2 things:
    1 - That there is no such functionality in Django by default;
    2 - That there is SOMETHING that you can import to get that needed functionality.

    • @richardc9325
      @richardc9325 5 років тому

      well in python from import means to import everything compared to just import. I guess just use from import