I'm trying to like Django and use it for custom high traffic projects. For this purpose, i'm doing tutorial tango with django. I've stuck with image display step. Here my code:
settings.py file:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "/static/images"),
STATIC_URL,
]
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Rango</title>
</head>
<body>
<h1>Rango says...</h1>
{% load staticfiles %}
<img src="{% static "images/lwd.jpg" %}" alt="Picture of Rango" /><br />
hello world! <strong>{{ boldmessage }}</strong><br />
About<br />
</body>
</html>
And here is screenshoot of the result:
not displayed image screenshoot
I don't know what i'm doing wrong, i even looked into documentation.
Please see the Django Docs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/var/www/static/', # this should be file path not URL
]
Related
I can't get django to use my css file. I've done a lot of sifting through various sites and tutorials but with no luck. Most of them say to change your STATICFILES_DIRS while some don't mention it at all. I've tried changing it to about every variant that could match my style.css location as well as copying and pasting the css file into a bunch of locations which might match '/static' but nothing works!
for STATICFILES_DIRS I have tried:
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'static/store'),
os.path.join(BASE_DIR, 'staticfiles'),
os.path.join(BASE_DIR, 'staticfiles/store'),
I also found the file manually and copied the location into a string like so:
'...Desktop/project/staticfiles/store',
I have also tried similarly playing around with the STATIC_URL and STATIC_ROOT to no avail.
My tree looks like this:
project
static
store
style.css
staticfiles
store
style.css
store
static
store
style.css
staticfiles
store
style.css
and my template:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<link rel='stylesheet' type='text/css' href='{% static "store/style.css" %}'>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I also tried changing static in the template to staticfiles
I already wasted hours on this problem and am tired and frustrated, please help!
You just need one folder called 'static' and in there you can create a folder 'store' and in there you paste your 'styles.css'.
in your settings.py
STATIC_URL = '/static/'
STATICFILES_URL = [
BASE_DIR / 'static',
]
and you reference it in your html as
{% load static %}
href="{% static 'store/styles.css' %} "
Thanks to Mcdonald Otoyo for posting the solution!
You just need one folder called 'static' and in there you can create a folder 'store' and in there you paste your 'styles.css'.
in your settings.py
STATIC_URL = '/static/' STATICFILES_URL = [
BASE_DIR / 'static', ]
and you reference it in your html as
{% load static %}
href="{% static 'store/styles.css' %} "
I am pretty new to Django and I am trying to link CSS file with my HTML document and I have tried using all possible ways posted on StackOverflow and I am unable to locate what is the issue here.
Here is the directory and file structure:
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '/')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
index.html
{% load static %}
<link rel="stylesheet" type="css/text" href="{% static 'css/style.css' % }">
Thanks in advance.
Ops. Silly mistake. It was all about indentation and minor type tag changes. Here is what worked out for me.
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
My templates do not seem to be able to access static css files. The project using all-auth for authentication. My file structure is as follow:
Project Folder
app 1
app 2
static
css
style.css
templates
account
login.html
signup.html
base.html
home.html
base.html is as follow:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shuffle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='{% static "css/style.css" %}' rel="stylesheet">
</head>
<body>
<div id="card">
{% block content %}
{% endblock %}
</div> <!--card -->
</body>
</html>
The rest of the templates extend from base.html. On inspecting the rendered page, all the html are correct but the styling is missing.
Edit:
Error is shown as:
GET /static/css/style.css HTTP/1.1" 404 1665
Static directory in setting is set as:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
It seems like you need to add the setting STATICFILES_DIRS.
You should have all 3 parts in your settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
It seems like your folder is called CSS all uppercase, but in your template code (<link href='{% static "css/style.css" %}' rel="stylesheet">) you have folder name css in lowercase.
I also see that the folder Static has the first letter capitalized, but the settings code STATIC_ROOT = os.path.join(BASE_DIR, "static") has the folder name as all lowercase.
Both of these have to match their counterparts, capitalization is important in this part.
recently when i use the { %load staticfiles % } in my django app.i just found that it shows like this picture as follows:
enter image description here
。the settings files are like this:
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [STATIC_DIR, ]
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
and the file's directory are like follows:
web1->web1->settings.py
we1->static->img->ocen.jpg
the base.html are like this:
<!DOCTYPE html>
{ % load staticfiles % }
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="{ % static "img/ocen.jpg" % }" alt="show picture">
</body>
</html>
the ngix configure file are like this:
location /static/ {
alias /home/yumo/web1;
}
To find the reason ,I try as follows:first , i konck :domainname/static/img/ocen.jpg in the browser. I can see my ocen.jpg in the browser. second: i just create the django app in my local virtual machine without using uwsgi and nginx. i can use the { % load staticfiles %} normally to achieve my aims. i just sincerely wan't someone give me some useful advise,thank you!
In django template tags look like this {% tag %} Please note that there is no space between { and %.
So instead of
{ % load staticfiles % }
<img src="{ % static "img/ocen.jpg" % }" alt="show picture">
you should do:
{% load staticfiles %}
<img src="{% static 'img/ocen.jpg' %}" alt="show picture">
I have static files placed in my_site/my_app/static/my_app/js and my_site/my_app/static/my_app/css. For some reason, the code below doesn't produce any output which means it can't find the static files:
#my_app/templates/my_app/base.html
{% load staticfiles %}
Here is setting.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'my_app', 'static', 'my_app',).replace('\\','/'),
)
STATIC_ROOT = ''
Why is that?
Add django.contrib.staticfiles to INSTALLED_APPS in your settings.py.
Remove STATICFILES_FINDERS, STATICFILES_DIRS, STATIC_ROOT from your settings.py.
change your base.html to something like this:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="fa">
<head>
<script type="text/javascript" src="{% static 'my_app/js/app.js' %}"></script>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I had faced the same issue which got solved after the following changes.
In HTML pages:
{% load static %} ## loads the static folder and images inside it.
<div id='button-holder'><img src="{% static "glass.png" %}" alt="Hi!" /></div> ## for images
src="{% static 'my_app/js/app.js' %} ## for scripts.
In urls.py
urlpatterns = patterns('',...
........
)+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
After this run command as #Daniel Roseman have mentioned python manage.py collectstatic. The findstatic command can help show you which files are found.
Example
python manage.py findstatic css/base.css admin/js/core.js
You can find help here regarding it.
You are supposed to run manage.py collectstatic to copy your app-level static files to the central static directory.