I'm working on a project using cookiecutter django template: https://github.com/pydanny/cookiecutter-django
The project is run in docker containers that come with the cookiecutter-django template on ubuntu 16.04LTS.
When trying to get the site to production, it returns the following error on some pages:
the file 'events\css\themes\fontawesome-stars.css' could not be found with <whitenoise.storage.CompressedManifestStaticFilesStorage object at 0x7f830be38ac8>.
folder structure is:
./project/events/static/
└── events
├── css
├── details.css
├── list.css
└── themes
├── fontawesome-stars.css
└── fontawesome-stars-o.css
No errors are reported during docker build process and after that running collectstatic.
Permissions for the files on the server are set to 775.
static config in base.py config:
# STATIC FILE CONFIGURATION
# ------------------------------------------------------------------------------
# See: https://docs.djangoproject.com/en/dev/ref/settings/#static-root
STATIC_ROOT = str(ROOT_DIR('staticfiles'))
# See: https://docs.djangoproject.com/en/dev/ref/settings/#static-url
STATIC_URL = '/static/'
# See: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#std:setting-STATICFILES_DIRS
STATICFILES_DIRS = [
str(APPS_DIR.path('static')),
]
# See: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#staticfiles-finders
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
In template I'm including the file like this.:
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
{% endblock%}
{% block css %}
{{block.super}}
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'events\css\themes\fontawesome-stars.css' %}">
{% endblock %}
How are you including the static files on your templates? It looks you are specifying the path directly. Instead you should use:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'events/css/themes/fontawesome-stars.css' %}">
Because in production whitenoise and collectstatic command will add extra content to the file name for versioning, caching and other purposes.
Related
I save uploaded files in a media root called /img/:
MEDIA_ROOT = os.path.join(BASE_DIR, 'img')
MEDIA_URL = '/img/'
And use this template to display every image in that folder:
{% load staticfiles %}
<ul>
{% for post in latest_post %}
<li>{{ post.id }} : {{ post.post_body }} : <img src="{% static "/img/" %}{{ post.post_image }}" alt="{{ post.post_image }}" /> </li>
{% endfor %}
</ul>
And I get the right url:
http://127.0.0.1:8000/img/birthday.jpg
But I get "page not found" error when I open the image. Why is that?
Edit: I just ran manage.py collectstatic but it didn't fix the issue. I still get 404 error.
Create a folder in your base directory by the name static and store all your css, img, js etc files in it in their respective folders, like this:
.
├── css
├── fonts
├── icons
├── img
└── js
Run python manage.py collectstatic, this collects all your static files and saves them in a staticroot folder.
After that change your settings.py to the following:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static')),
STATIC_ROOT = 'staticroot/static'
In Django settings.py file we have
STATIC_URL = '/static/'
And in each app directory I have static folder for css, js files.
For example:
├── myapp
│ ├── migrations
│ ├── __pycache__
│ ├── static
│ └── templates
When I use {% static "......." %} in *.html file
For example
<link rel="stylesheet" href="{% static "style/fesahat.css" %}" />
<link rel="stylesheet" href="{% static "style/loginStyle.css" %}" />
In output render django creates URL like this:
mysite.com/static/style/fesahat.css
mysite.com/static/style/loginStyle.css
I want to create the URL like this:
mysite.com/myapp/templates/static/style/fesahat.css
mysite.com/myapp/templates/static/style/loginStyle.css
No you don't. Static files are not templates; don't put them there.
#Daniel Roseman is right. Always use meaning full names.
STATIC_URL = '/static/' #This is URL prefix so use any prefix
Always use name-spacing in each app level static directory.
app1
app1/static/app1/files
app2
app2/static/app2/files
static file namespacing
Now we might be able to get away with putting our static files directly in my_app/static/ (rather than creating another my_app subdirectory), but it would actually be a bad idea. Django will use the first static file it finds whose name matches, and if you had a static file with the same name in a different application, Django would be unable to distinguish between them. We need to be able to point Django at the right one, and the best way to ensure this is by namespacing them. That is, by putting those static files inside another directory named for the application itself.
You can namespace static assets in STATICFILES_DIRS by specifying prefixes.
The way you use declare the static file is not right,
in your example:
<link rel="stylesheet" href="{% static "style/fesahat.css" %}" />
You are closing the double quotes when declaring the path to your css files,
You should combine double and single quotes like this:
<link rel="stylesheet" href="{% static 'style/fesahat.css' %}" />
My 404.html page does not reference my finale.css file.
My directory structure
musicworld/
musicworld/
__pycache__
__int__.py
settings.py
urls.py
wsgi.py
feature/
__pycache__
migrations
static/
feature/
finale.css
templates/
feature/
about.html
detail.html
404.html
500.html
index.html
template.html
__init__.py
admin.py
models.py
tests
This is where in index.html I'm referencing the css
<link rel="stylesheet" type="text/css" href="{% static 'feature/finale.css' %}" />
But 404.html that extends index.htmlis not referencing the css
{% extends "index.html" %}
{% load staticfiles %}
{% block 404page %}
<div class="box">
<p class="box-message" data-dead-message="AAAAAHHHHHH!">Oh No! Something went wrong.Punish the developer by clicking here.</p>
</div>
<div class="robot">
<img src="" alt="Robot" />
</div>
{% endblock %}
static reference in settings.py
STATIC_URL = '/static/'
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
ALLOWED_HOSTS = ['*']
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
Both the index.htmland template.html are placed in the same folder and are properly referencing the css.Plus all the html pages in feature that are extending index.html are also referencing the css.But both 404.html and 500.htmlare not.
My settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
In my html page is href to my files using
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/default.css">
<img src="{{ STATIC_URL }}images/pythonlogo.jpeg">
I also tried:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/default.css' %}">
<img src="{% static 'images/pythonlogo.jpeg' %}">
The error I am getting in developer tools is
GET http://127.0.0.1:8000/static/css/default.css 404 (NOT FOUND)
GET http://127.0.0.1:8000/static/images/pythonlogo.jpeg 404 (NOT FOUND)
I tried to print the path on to the web page by simply placing {{STATIC_URL}} on the page and /static/ appears.
My project directory path is:
django_test/
admin/
article/ <-- app
templates/
django_test/
templates/
static/
css/
images/
STATIC_ROOT is directory where all your static files will be copied by collectstatic command.
You should specify your path to STATICFILES_DIRS tuple to use it with built in webserver.
I am using django 1.5.2 and I am having a hard time understanding the purpose of the media directory vs. the static directory and how to include stylesheets in my django project.
This is my directory structure:
django_books
beer
__init__.py
admin.py
models.py
views.py
random_book
(same as beer above)
django_books (the actual django project; beer and random_book above are my apps)
templates
base.html
beersall.html
__init__.py
settings.py
urls.py
views.py
wsgi.py
static
css
beers.css
media
css
beers.css
static
css
beers.css
manage.py
My beersall.html template (the beer output is correct, so just linking the stylesheet is wrong):
{% extends 'base.html' %}
{% block content %}
<div id="beer_list">
{% for beer in beers %}
{{ beer }},
{% endfor %}
</div>
{% endblock %}
My base.html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/css/beers.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/beers.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/beers.css" />
<link rel="stylesheet" type="text/css" href="/static/css/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/media/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/static/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/django_books/static/beers.css" />
{% block extrahead %}{% endblock %}
</head>
<body>
<div id="page_container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
My settings.py file:
MEDIA_ROOT = '/Users/username/Projects/django_books/media/'
MEDIA_URL = '/Users/username/Projects/django_books/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
I should note that I am using the django development server, not apache.
The error in my browser (developer console) says beers.css is 404.
The url is localhost:8000/beers/ and my urls.py file correctly points to this and the views.py correctly serves the beersall.html template. How can I properly link my media?
EDIT
When I change the css link href value to /Users/username/Projects/django_books/media/ it still doesn't work.
EDIT 2
I've updated the href values to show things I've tried. Still not working...
User-uploaded files (by admins or site users) go to media directory.
Static files are files provided by developers (or from third-party apps).
Set something like this:
# Local disk paths
MEDIA_ROOT = '/Users/username/Projects/django_books/media/'
STATIC_ROOT = '/Users/username/Projects/django_books/static/'
# URLs visible in the browser's address bar
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
And in Your template use the STATIC_URL variable:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/beers.css" />
And move your styles to the django_books/static/ directory.
in my project:django_learn, in template: check_uncheck_all.html, part pf the code:
{% load staticfiles %}
<html>
<head>
<script type=text/javascript src="{% static 'js/jquery-1.9.1.js' %}"></script>
</head>
you can also have a look at my settings.py
The static files were being found, but the permissions were not set up correctly. (i.e. a 403 not a 404 server error)
<VirtualHost *:80>
WSGIScriptAlias / /Users/username/Projects/django_books/django_books/django.wsgi
#the directory tag before was /Users/username/Projects/django_books/django_books/>
#this was one directory too deep
#from my structure above, you can see I needed to change my directory tag to this:
<Directory /Users/username/Projects/django_books/>
Order Allow,Deny
Allow from All
</Directory>
<Directory /Users/username/.virtualenvs/django_books/lib/python2.7/site-packages/django/contrib/admin/static/admin/>
Order Allow,Deny
Allow from All
</Directory>
Alias /static/admin/ /Users/username/.virtualenvs/django_books/lib/python2.7/site-packages/d$
Alias /static/ /Users/username/Projects/django_books/static/
</VirtualHost>