I want to add a static file to my django project app.
My app is named "core"
Hence inside the app where I need the static file (called main.css) , I made a directory named static/core/main.css
So after that my directory looks like this
core
....
-static
|_core
|_main.css
.........
And in the settings.py file , I wrote this
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
And in the html file where I want the static css I wrote this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} Welcome | Ecommerce {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="{% static 'core/main.css' %}">
This HTML file is located in a global project level template folder where I dump the templates from all the apps in the project .
But my static file is not getting loaded for some reason
May be because you didn't specify the file?
I guess you should change it from
<link rel="stylesheet" href="{% static '' %}">
To
<link rel="stylesheet" href="{% static 'core/main.css' %}">
Try to add
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
into your Django settings
In Your settings.py file add this
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
after that open the terminal in your root directory and run the following command
python manage.py collectstatic
you can also refer to the django documentation where they have explained about staticfiles in django https://docs.djangoproject.com/en/3.2/ref/contrib/staticfiles/
Related
I was trying to load a static file i.e my CSS in django and i am doing evrything taught in tutorial but it isn't happening. i have my CSS inside static folder.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">
<title> Django </title>
</head>
<body>
<header>
<div>
<nav id="a1">
Home
About
Contact
Courses
</nav>
</div>
</header>
Here, is my settings.py file as i was following tutorial,
settings.py
STATIC_URL = 'static/'
STATICFILES_DIR=[
BASE_DIR,"static"
]
IN settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
IN urls.py
from django.conf.urls import url
from django.conf import settings
from django.views.static import serve
urlpatterns = [
url(r'^static/(?P<path>.*)$', serve, {"document_root":settings.STATIC_ROOT}),
]
If your DEBUG is False then you need to run python manage.py collectstatic
I'm trying to load in bootstrap into my html page but I get a 404 status code in the network tab in the developers tools saying that it could not find the file
the request url is
http://127.0.0.1:8000/static/css/bootstrap.css
this is my html page where I am trying to use to the file
<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dog Groomers</title>
<link rel="stylesheet" type="text/css" href="{% static '/css/bootstrap.css' %}"/>
</head>
</html>
Here is my file structure
in my settings.py file
STATIC_URL = 'static/'
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
#edit wasn't included before in question
DEBUG = TRUE
Do I need to have a static folder in every folder instead of just having it in the root?
Kindly update your settings.py
You are using this:
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
Try this one, it should work!
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
<script src="./home/static/js/2.d754fc32.chunk.js"></script>
Currently my html file points to this. What static variable django setting.py do I declare to make the HTML point to
<script src="./home/static/static/js/2.d754fc32.chunk.js"></script>
currently in setting.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../frontend/build')
]
STATIC_ROOT = '/var/www/web/home/static/'
STATIC_URL = 'home/static/'
My build folder contains a static file inside as well.
if STATICFILES_DIR is in the right place:
You just have to {% load 'static' %} on the top of your html (after extend), and to set the css file:
<link rel="stylesheet" type="text/css" href="{% static '/style.css' %}">
if you want a img from there would be:
<img src="{% static '<PathOfImage>/img.png' %}">
i am very new to django .
m adding static files but they are not being shown in m templates when i runserver.
if i add an static image the image does not load but only shows a img icon.
#settings.py
STATIC_DIR=os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS=[
STATIC_DIR,
]
#INDEX.HTML
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>hey eeyone</h1>
<img src="{% static "images/hotel.jpg" %}">
</body>
</html>
You have to add static root in settings.py as -
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
Then create a static folder in app.
In template load static as -
{% load static %}
Add stylesheets href as -
href="{% static 'blog/main.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)