I have two templates index.html and search_results.html in the same directory.
Both have the following code snippet
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" media="screen" />
The css file loads on the index template:
"GET /static/bootstrap/css/bootstrap.min.css HTTP/1.1" 304 0
However, does not for the search_results template:
"GET /search/static/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 2133
Since it includes the /search.
I'm wondering how to omit the /search/ portion in trying to load the css file in my second template, since that template all have urls starting with /search/.
my urls.py:
urlpatterns = patterns('',
url(r'^$', 'home.views.index'),
url(r'^search/$', 'home.views.film_chart_view')
)
Clearly, you are missing the slash / at the beginning of the static URL.
The dirty fix:
Change the line in your template to
<link rel="stylesheet" type="text/css" href="/{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" media="screen" />
The clean fix:
Add a slash at the beginning of the STATIC_URL variable in your settings file. It must probably look like this:
STATIC_URL = '/static/'
Related
I tried to ling CSS file in Django framework by using " "
It shows error
but, it is showing error ""GET /static/css/stylesheet.css HTTP/1.1" 404 1813file Oder"
define STATIC_URL in settings.py like that:
STATIC_URL = 'static/'
and template file must be like that
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'app/css/style.css' %}">
Did you use following command after adding static files?
python manage.py collectstatic
settings.py
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static_in_env')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'
django.contrib.staticfiles' included in installed_apps. {% load static from staticfiles %} used in base.html.
still getting these errors:
[22/Dec/2019 13:45:31] "GET / HTTP/1.1" 200 10735
[22/Dec/2019 13:45:32] "GET /static/js/jquery-3.4.1.min.js HTTP/1.1" 404
1791
[22/Dec/2019 13:45:43] "GET /static/css/bootstrap.min.css HTTP/1.1" 404
1788
[22/Dec/2019 13:45:43] "GET /static/css/mdb.min.css HTTP/1.1" 404 1770
......
script.html
{% load static from staticfiles %}
<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js'
%}">
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{% static 'js/popper.min.js' %}">
</script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}">
</script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{% static 'js/mdb.min.js' %}">
</script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();
</script>
staticfiles dir includes following files and folders
static_in_env
- css
-bootstrap.css
-bootstrap.min.css
-mdb.css
-mdb.min.css
-mdb.lite.css
-mdb.lite.min.css
-style.css
-style.min.css
- font
- img
- js
-bootstrap.js
-bootstrap.min.js
-mdb.js
-mdb.min.js
-popper.min.js
- scss
In your project_name/urls.py, try to add the following at the end:
urlpatterns = [
# your urls...
]
# ↓ add this ↓
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Also, just put {% load static %} in your script.html, not {% load static from staticfiles %}
In settings.py add
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
In base.html
{% load static %}
Hopefully it will work if it doesn't run this command
Python manage.py collectstatic
if you are using bootstap, either you download it or use cdn
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
or you can use the starter template provided by bootstrap, which will have all the basic html,css and js files. Link: https://getbootstrap.com/docs/4.4/getting-started/introduction/
custom css links can be linked to the file as follows
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>
I have followed too many answers to this but I need some more explanation on this topic as I want to know the root cause for it.
I am trying to create pdf using wkhtmltopdf.
This is my setting files look like :
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And the URL to reference static file is :
<link rel="stylesheet" href="{% static '/css/template_pdf.css' %}" type="text/css" />
Or
<link rel="stylesheet" href="/static/css/template_pdf.css" type="text/css" />
or
<link rel="stylesheet" href="file:///static/css/template_pdf.css" type="text/css" />
or
I used this too:
https://gist.github.com/renyi/f02b4322590e9288ac679545df4748d3
and provided url as :
<link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}static/css/template_pdf.css' />
But the issue I understood is, all of the above except last one works perfectly while rendering view :
def view_pdf(request):
"""View function for home page of site."""
context= {'title': 'Hello World!'}
# Render the HTML template index.html with the data in the context variable
return render(request, 'pdf/quotation.html', context=context)
But for creating pdf using wkhtmltopdf it specifically needs the url to be specified like :
<link rel="stylesheet" href="http:localhost:8000/static/css/template_pdf.css" type="text/css" />
I know I am missing something in the static file. But I want to know why it works with rendering template but not with Generating pdf using wkhtmltopdf.
I dont think it is good idea to put directly domain name inside the referencing url.
A detailed solution for this would be helpful as I am very new to django.
I tried follow this answer too but nothing worked : Django wkhtmltopdf don't reading static files
in your settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
WKHTMLTOPDF_CMD = '/usr/local/bin/wkhtmltopdf'
to render static files in your template django provide static tag. You can use this as
<link rel="stylesheet" href="{% static '/css/template_pdf.css' %}" type="text/css" />
Also make sure you have this included in your urls.py
from django.conf import settings
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Don't forget to run collectstatic command in the end
I added http://localhost:8000 explicitly in my template when running in debug mode:
In the template:
<link rel="stylesheet" href="{% if debug %}http://localhost:8000{% endif %}{% static '/css/template_pdf.css' %}" type="text/css" />
And I added the debug to the context:
from django.conf import settings
def view_pdf(request):
"""View function for home page of site."""
context= {
'debug': settings.DEBUG,
'title': 'Hello World!'
}
# Render the HTML template index.html with the data in the context variable
return render(request, 'pdf/quotation.html', context=context)
I am new to Django and really confused about this.
Here are relevant parts in settings.py:
import os
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
STATIC_URL = 'http://http://127.0.0.1:8000/static/'
STATICFILES_DIRS = (
PROJECT_ROOT+'/static/')
TEMPLATE_DIRS = (
PROJECT_ROOT + '/templates/')
My project file structure is like this:
MyProj
manage.py
MyProj
settings.py
urls.py
templates
base.html
static
css
js
In base.html starts with:
{% load staticfiles %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="shortcut icon" href="http://twitter.github.com/bootstrap/assets/ico/favicon.ico">
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
but django does not get none of the static files:
[15/Oct/2013 05:36:06] "GET /accounts/login/ HTTP/1.1" 200 3402
[15/Oct/2013 05:36:06] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 2089
[15/Oct/2013 05:36:06] "GET /static/css/bootstrap-responsive.min.css HTTP/1.1" 404 2122
[15/Oct/2013 05:36:06] "GET /static/js/jquery.min.js HTTP/1.1" 404 2074
[15/Oct/2013 05:36:06] "GET /static/js/prettify.js HTTP/1.1" 404 2068
[15/Oct/2013 05:36:06] "GET /static/js/bootstrap.min.js HTTP/1.1" 404 2083
[15/Oct/2013 05:36:06] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 2089
[15/Oct/2013 05:36:06] "GET /accounts/login/ HTTP/1.1" 200 3402
[15/Oct/2013 05:36:06] "GET /static/css/bootstrap-responsive.min.css HTTP/1.1" 404 2122
[15/Oct/2013 05:36:19] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 2089
[15/Oct/2013 05:36:20] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 2089
I'v read the Django docs and tried several alternative settings but none did help to resolve the problem. So appreciate your hints.
url.spy
from django.conf.urls import patterns, include, url
# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
# Examples:
#url(r'^$', 'myproj.views.home', name='home'),
# url(r'^myproj/', include('myproj.foo.urls')),
# Uncomment the admin/doc line below to enable admin documentation:
# url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
# Uncomment the next line to enable the admin:
url(r'^admin/', include(admin.site.urls)),
url (r'^accounts/', include('registration.backends.default.urls')),
)
Staticfiles in Django seems to always confuse people who are just starting out, and imo, the documentation could be improved.
Here's a quick breakdown of what's what:
MEDIA_ROOT: The base directory where files you upload as part of a form or model form go. The upload_to property of a File/ImageField is appended to this path.
MEDIA_URL: The URL pattern that files located in MEDIA_ROOT are accessible via.
STATIC_ROOT: The directory that holds static files to be served in production.
STATIC_URL: The URL pattern that files located in STATIC_ROOT are accessible via.
STATICFILES_DIRS: The director(y/ies) that hold static files to be served in development.
When you have the staticfiles app in your INSTALLED_APPS, it will only serve static files located in STATICFILES_DIRS when DEBUG = True.
When you run $ python manage.py collectstatic, it will gather any static directories for your application, and any 3rd party applications and copy them to STATIC_ROOT.
So, to fix your paths to static files in production, make sure your settings are correct and that you've run collectstatic either before you deploy or as part of your deployment process.
There is also a new template tag for static files:
{% load i18n %}
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
...
<link href="{% static 'css/bootstrap.min.css' %}"
rel="stylesheet">
<link href="{% static 'css/bootstrap-responsive.min.css' %}"
rel="stylesheet">
</head>
<body>
...
In your project structure, re-name "/static" to "/static-assets" and set that directory in STATICFILES_DIRS.
Change your STATIC_ROOT to point to "/static", and don't put any directories or files there yourself. Let the collectstatic management command do that.
Here's how I typically structure a project:
/my_app/
/my_app/
__init__.py
settings.py
urls.py
manage.py
/another_app_module/
__init__.py
models.py
...
/static/
/static-assets/
/css
/js
/images
/templates
Given this file structure, and assuming my project sits at: /home/btaylor/django-projects/my_app/ my settings would be:
STATIC_ROOT = '/home/btaylor/django-projects/my_app/static'
STATIC_URL = '/static/'
MEDIA_ROOT = '/home/btaylor/django-projects/my_app/static/uploads'
MEDIA_URL = '/static/uploads/'
STATICFILES_DIRS = ('/home/btaylor/django_projects/my_app/static-assets',)
when i try to include js files in my template, as opposed to css files - django can't point the browser to the static folder...
this is the relevant part in my settings.py -
STATIC_ROOT = '/var/www/html/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(os.path.dirname(__file__), 'static').replace('\\','/'),
)
from within my template, when i'm calling css files as in the following example -
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}" />
they get loaded just fine -
"GET /static/bootstrap/css/bootstrap.css HTTP/1.1" 200 127343
yet, when i try to load js files like so -
<script type="text/javascript" src="{% static '/bootstrap/js/jquery.js' %}"></script>
the request gets broken, and in the runserver terminal window i get errors like -
"GET /bootstrap/js/jquery.js HTTP/1.1" 404 2848
showing that the 'static' part of the url gets dropped out...
anyone has an idea as for why this is happening? thanks a lot everyone!
I usually use:
<a href="{{ STATIC_URL }}path/to/file">
So:
<script type="text/javascript" src="{{ STATIC_URL }}bootstrap/js/jquery.js"></script>
and this works for js files fine. So maybe try this as opposed to the {% static %} tag to see if it works.