Unable to display static images and load CSS in Django - python

Using pycharm 2019.2.5,
python 3.7,
Django 2.2.5,
I am creating a website by importing a template and creating apps for it through django, but I can't get any of the static files to work. When I run the dev server, none of the fonts/css/js/images display. Also I can't import google fonts from my HTML file. I've read all the answers and I'm posting the pertinent data i'm aware of. This seems to be a fairly common question, and I've tried all their solutions. Let me know if you need more data.
YSMR *edited to add. #This is my top-level project created in pycharm.
YSMR
\blog
\contact
\schedule
\sendemail
\static
\css # I plan on adding namespacing for this later
\fonts
\js
images....
\templates
\index.html
additional templates...
__init__.py
settings.py
urls.py
views.py
wsgi.py
index.html below. I can view the file, but again, the embedded static files and font do not execute. The first several lines I've loaded below.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>YSMR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/open-iconic-bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "css/animate.css" %}">
Settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
ENV_PATH = os.path.abspath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(ENV_PATH, '/static/') #I've tried to change 'static' to something else, but I get an 'unresolved reference' error when I do.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "YSMR/static"), #I get an 'unresolved reference "static"' when I remove the YSMR
]
When I remove the YSMR from the STATICFILES_DIRS path, I get an "unresolved reference 'static'" warning
also, django.contrib.staticfiles is included in INSTALLED_APPS
Thanks in advance.

Change your settings as follows and try:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
Also make sure that you added these lines to your main url file.
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Change your settings as follows and try:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "app_name/static_root"),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "app_name/static")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")
Also make sure that you added these lines to your main url file.
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Related

Django not able to load a simple static page with static files

It is a simple static html file with only one image as a static file in the html. I have followed all the steps provided in the Django documentation, and the collectstatic command runs without any error.
The project folder structure is as follows;
settings.py file;
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
DEBUG = True
home.html - File where the image is not loading;
{%load static%}
<!DOCTYPE html>
<html >
<head>
<title>home.html</title>
<h1>This is a test file</h1>
</head>
<body>
<img src="{% static 'images/test.png' %}">
</body>
</html>
Output:
I have tried the following;
Restart server,
rerun the collectstatic command
Nothing worked out, What could be the issue? Please help me to resolve this issue.
replace STATICFILES_DIR with STATICFILES_DIRS in settings.py
You have STATIC_ROOT = os.path.join(BASE_DIR, 'assets') whereas it looks like you've already collected your files to os.path.join(BASE_DIR, 'static'), which is a more typical location. You should change STATIC_ROOT to point back to the static folder so that Django knows where to serve those files from:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
You can see this in the static files deployment guide
try this in your settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
def get_success_url(self, request, user):
return (get_success_url)
and add this from your urls.py
urlpatterns = [
......
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns +=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
STATICFILES_DIR is the main error here.
Replace it with STATICFILES_DIRS
This should solve it.

css and other static files not working in django

The current project I've started working on, uses django 2.2 and most of the links are hardcoded.
All static content is in folder named media and used in base.html as follows
in base.html
{% load staticfiles %} ---- using this as first line of base.html
.......
.......
<head>
<link href="/media/css/backoffice/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
in settings.py
STATIC_URL = '/media/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'media'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'media/')
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
I've also added following to the main urls.py file:
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Yet I'm not able to render the static file listed in the head section of base.html
I've also experimented with commenting out static root and staticfiles_dir but it does not work
You need to put all files in project root's static folder and run this command:
python manage.py collectstatic
For loading static files in the template you need to write this:
{% load static %}
And in all the static files like css, js and images you can do like this:
{% static "<absolute path of file>" %}
And you can refer from documentation.
I hope this will help you!

Serving Static File on Django

I have been trying to serve my static files at my Django project, however it cannot find or load it. I have tried different approaches, but none seems to fix the issue.
The static folder is in the same directory as the manage.py.
Also, I have installed the WitheNoise but it also did not solve the problem.
In addition: I am using docker, I have done the collect static and checked the container. All the files are correctly there.
Django version = 2.0.1
Development environment
Code Structure:
Project
- assets
- config
- docs
- project-root
- - static
- - manage.py
- - templates
- - apps
- - project-root
- - - settings.py
- - - urls.py
...
...
setting.py
INSTALLED_APPS = [
'pages.apps.PagesConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
html file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap -->
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/jquery.bxslider.css" %}">
<!-- Custom -->
<link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static "css/animate.css" %}">
</head>
Let me know if there is anything else that I need to add to the post that will help you.
Thank you,
The version of Django is not mentioned in the question, also the environment - (production/development)
-In recent versions of python {% load static %} is recommended instead of {% load staticfiles %}
-If Debug is True and if django.contrib.staticfiles is not present in INSTALLED_APP -
-either add django.contrib.staticfiles to INSTALLED_APP
or
append static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) to urlpatterns to serve the static files.
Also for static files not in app folders the directory needs to be listed in STATICFILES_DIRS-
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'any_other_locations',
]
Edit your settings.py file and add WhiteNoise to the MIDDLEWARE list. The WhiteNoise middleware should be placed directly after the Django SecurityMiddleware (if you are using it) and before all other middleware.
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
#(Rest of the Middleware here)
]
Routes for the whitenoise cache and static files:
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And run the collectstatic
django-admin collectstatic
or
python3 manage.py collecstatic
If you want to run in inside the docker container, here is more info
https://docs.docker.com/engine/reference/commandline/exec/
More info about Whitenoise:
http://whitenoise.evans.io/en/stable/django.html#

static files not found error in django

I know that this problem has already been asked several times here. I have searched and read a number of answers but no help. I guess, I am missing something very basic.
In my settings.py, I have:
STATIC_URL = '/static/'
STATIC_ROOT = join(APPS_DIR, "static/")
# STATICFILES_DIRS = [join(APPS_DIR, 'static')]
MEDIA_ROOT = join(APPS_DIR, 'media')
MEDIA_URL = "/media/"
In my config/urls.py, I have:
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I have a file located at /static/core/js/jquery_countdown/jquery.countdown.min.js which I am trying to load in template as below:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="{% static 'core/js/jquery_countdown/jquery.countdown.min.js' %}"> </script>
The top of the same template looks like
{% extends "contest/base.html" %}
{% load static %}
This results in following server error:
[23/Mar/2018 10:12:08] "GET /static/core/js/jquery_countdown/jquery.countdown.min.js HTTP/1.1" 404 1858
What am I missing?
Create folder static_files in your app directory. And place all your static files inside it. Then use the following settings
STATIC_URL = '/static/'
STATIC_ROOT = join(APPS_DIR, "static/")
STATICFILES_DIRS = [join(APPS_DIR, 'static_files')]
If it does not solve your issue, then run the command python manage.py collectstatic. It will copy all the static files (Not only from your app but also from django admin, third party apps etc) to the STATIC_ROOT folder.
Details
For local serving, django server will look in to the STATICFILES_DIRS. So you dont need to run the python manage.py collectstatic command. All the external apps may have STATICFILES_DIRS where they place their static files. For production server you need to collect all these static files scattered around all your apps in to a single place. Thats what python manage.py collectstatic command will do. It will copy all the static files in to STATIC_ROOT directory
You are searching for static files in app directories only but have your file in global static files. You should use the commented STATICFILES_DIRS setting to specify all places to search for static files.
I found that this worked for me. (Development)
(I chose to name it "zStatic" to keep it at the bottom of the root (project folder), so that it isnt amidst all my apps. Easier to locate.)
Settings.py
STATIC_URL = 'zStatic/'
STATICFILES_DIRS = (
BASE_DIR/'zStatic',
)
INSTALLED_APPS =
[
...
'django.contrib.staticfiles',
...
]
base.html (base template)
<head>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/mycss.css' %}">
</head>

static dir not found django

I'm a beginner in using django and tryin to make my first app, but I keep on getting "Not found" every time I add a javascript file on my view
This is my setting.py
STATIC_URL = '/home/me/PycharmProjects/GLife/static/'
MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = 'static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR, 'static'),
)
urls.py
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^register', include('register.urls')),
url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="/static/djangular/js/django-angular.min.js" type="text/javascript"></script>-->
<script src="{% static '/js/_register/register.js' %}" type="text/javascript"></script>
<title></title>
</head>
<body>
I've already search about it but the suggestions failed, hope anyone could help
here's my project structure
myproject
--main
--register
---migrations
---templates
--static
---js
----_register
I'm just trying to make an alert display as a testing using js
This is happening because you switched the values of STATIC_ROOT and STATIC_URL. It must be like this:
STATIC_URL = '/static/'
STATIC_ROOT = '/home/me/PycharmProjects/GLife/static/'
STATIC_URL is the URL to use when referring to static files located in STATIC_ROOT.
STATIC_ROOT is the absolute path to the directory where collectstatic will collect static files for deployment.
Also, your static and STATIC_ROOT paths must be different.
When using the development server you don't need to configure STATIC_ROOT or use collectstatic management command because it will automatically serve the static files from static folder if DEBUG is true.

Categories

Resources