Django - referencing static files in templates

Question

I'm having difficulty referencing static files in my templates. I am using Twitter Bootstrap and have the bootstrap files (css, img, js) sitting at mysite/static.

I have set the STATIC_URL, STATIC_ROOT and TEMPLATE_CONTEXT_PROCESSORS according to this tutorial. I have run ./manage.py collectstatic which copied 72 files over. I have also added the below template tag to my template (index.html) file but this hasn't worked.

{% load staticfiles %}
<link rel="stylesheet" href="{% static user_stylesheet %}" type="text/css" media="screen"/>

Any help on how to reference the files so that the bootstrap styling returns to the templates would be much appreciated!

Answer 1

Are you setting the user_stylesheet context variable in your view? You need to set that before you can pass it onto templates.

I usually just use the {{ static_url }} tag for doing this stuff, so my code for including bootstrap components would be like.

<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}bootstrap/js/jquery.js"></script>

Assuming that bootstrap folder is present inside static.

EDIT

For your case, to set user_stylesheet context variable, you'll need to do something like

dict["user_stylesheet"]= <path to your file>
#add other context variables you might have to
render_to_response(<your template name>, dict, context_instance=RequestContext(request))

Answer 2

It should be

{% load static from staticfiles %}

And then something like

<!-- path -->
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
<!--->

Update for Completeness

Folder Structure

• proj
  • app1
  • app2
  • myproj_public
  • static
    • css
      • bootstrap.css
    • js
      • xyz.js

Settings File

STATIC_ROOT = os.path.join(os.path.abspath(
    os.path.join(PROJECT_ROOT, 'myproj_public', 'static')), '')

STATIC_URL = '/static/'

Answer 3

When you set static_root, for example:

STATIC_ROOT = os.path.join(BASE_DIR, "static_root/")

, all files are copied there, instead of in project_root/static. It is a new mechanism introduced in Django 1.3, to easy the static file processing: it will collect all files in each STATICFILES_DIR and all static dir under each installed app, so you copy them once in all.

Refer the css/js files with static_root path.