Note: The issue causing this problem is related to skelJS, not Django. Please refer to the answer for more information.
Although I've gone through the Django documentation, searched on Google, and read various StackOverflow posts, I'm still struggling with getting static files to work properly in my project.
When the template is rendered, the static paths are correctly inserted (e.g. {{ STATIC_URL }}css/style.css becomes static/css/style.css). I can access
http://127.0.0.1:8000/static/css/style.cssWhile the CSS partially works, the images referenced in the CSS file are not showing up. Interestingly, if I navigate directly to
http://127.0.0.1:8000/static/css/images/bg02.jpghttp://127.0.0.1:8000/static/css/style.cssI would greatly appreciate any assistance or guidance you could provide on resolving this issue.
Parent Template base_home.html
{% load staticfiles %}
...
<script src="{{ STATIC_URL }}js/jquery.min.js"></script>
<script src="{{ STATIC_URL }}js/config.js"></script>
<script src="{{ STATIC_URL }}js/skel.min.js"></script>
<script src="{{ STATIC_URL }}js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="{{ STATIC_URL }}css/skel-noscript.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/style-desktop.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="{{ STATIC_URL }}css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><script src="{{ STATIC_URL }}js/html5shiv.js"></script><![endif]-->
...
Child Template home.html (called by view, extends base_home.html)
#This is pretty plain, but I wanted to add/learn the functionality early
{% extends "base_home.html" %}
{% block headline %}Insert catchy headline here.{% endblock %}
Rendered HTML
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/config.js"></script>
<script src="/static/js/skel.min.js"></script>
<script src="/static/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="/static/css/skel-noscript.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/style-desktop.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><script src="/static/js/html5shiv.js"></script><![endif]-->
settings.py
...
STATIC_ROOT = 'E:/Projects/sandbox/website/static'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
'E:/Projects/sandbox/website/resources',
# This dir contains css/ images/ and js/
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
TEMPLATE_CONTEXT_PROCESSORS = (
"django.core.context_processors.request",
"django.contrib.auth.context_processors.auth",
'django.core.context_processors.static',
)
...
views.py
from django.shortcuts import render_to_response
from django.template import RequestContext
from sandbox.context_processors import sitevars
def home(request):
return render_to_response("home.html", context_instance=RequestContext(request, processors=[sitevars]))
context_processors.py
def sitevars(request):
return {
'meta_d': 'Meta description here',
'meta_k': 'Meta keywords here',
'title': 'HTML page title here',
'logo': 'Text that needs to be inserted on pages',
'copyright': r'HTML/text that needs to be inserted on pages'
}
style.css
body
{
background: #D4D9DD url('images/bg02.jpg');
}
...
.check-list li
{
...
background: url('images/icon-checkmark.png') 0px 1.05em no-repeat;
}
...
.bordered-feature-image
{
...
background: #fff url('images/bg04.png');
}
...
.custom-feature-image
{
...
background: #fff url('images/bg05.png');
}
...
.item header
{
...
background: #2b3336 url('images/bg01.jpg');
}