Django - Static files serving javascript , css and image files - django

I need to server static files in my Django project.
I would like to place them in /static directory and be able to reference them in my templates.
I've been reading "Managing static files" in the documentation and I am confused. I've followed the instructions but am not able to get it to work.
1) I have put my static files in /static under each app in my project.
2) django.contrib.staticfiles is included under my INSTALLED_APPS.
I've set the following variables in settings:
STATIC_ROOT = '/static/'
STATIC_URL = '/static/'
In my template I have the following line:
<script type="text/javascript" src={{ STATIC_URL }}/a_ajax.js></script>
however when I bring up the page and look at source the line is:
<script type="text/javascript" src=/a_ajax.js></script>
It seems like nothing was passed to the template.
What am I doing wrong?

Considering that you are using Django 1.4 or higher, here is my explanation:
In Django 1.3 the static files were separated from the uploaded files (media) and now, they have their own home.
To serve static files (css, js, images, etc) in the development environment you need:
Put these files in their respective app's static subdirectory
Make sure you have django.contrib.staticfiles.finders.AppDirectoriesFinder in your settings.py (this is the default behavior)
The directory structure will be:
__| project_root/
____| your_app/
______| static/
________| test.css
________| some.js
So the request to http://localhost:8000/static/test.css will be routed to your_app/static/test.css.
Note that you don't need to change STATIC_ROOT setting, until you go to production environment that you will need to run ./manage.py collectstatic.
The collectstatic command will collect files from the app's static subdirectories and put them all in an unique place (the directory defined in STATIC_ROOT)
If you are going to deploy your project in production, see ./manage.py collectstatic documentation.

Include 'django.core.context_processors.static' is in your TEMPLATE_CONTEXT_PROCESSORS var in settings.py.
see documentation: Referring to static files in templates
Update:
And in the view, use the RequestContext object instead of the Context object.
def view1(request):
...
context = RequestContext(...
return render_to_response( ... , context )

In newer versions of Django, this is how I link to static files in a html template:
<script type="text/javascript" src="{% static 'admin/js/labeler.js' %}"> </script>
Django docs on STATIC are here:
https://docs.djangoproject.com/en/1.9/howto/static-files/

Related

Change Django static directory name

Django static directory name is set to static by default. Can it be changed to something else?. If i could change it to cssandjs could this bring any errors to my project? and does that also mean that in templates i would load static by {% load cssandjs %} instead of {% load static %}?
the statics files con also be loded from more than one directory, this can be defined by this setting, this is where django search your files inside your server
STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
'/some_folder/cssandjs',
]
thats why you put the files inside apps folder, to avoid overlapping
the url is defined by this setting, this is what you see on the web browser
STATIC_URL = '/static/'
in your template you always use {% load static %}, and django search in all your folders
https://docs.djangoproject.com/en/3.1/howto/static-files/

Static files not loaded into templates

I am new to Django and so far all I know about static files is that they are CSS, JS, and images and they should be in a directory called static within the app directory
but when I use one of these files in my template like that:
first I load the static files
{% load static %} <!-- in the 1st line of the template -->
then I link the CSS file like that
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
They don't load and the styles don't seem to appear
so I just want to know what I am missing here
this is the project tree enter image description here
static root and url from settings
STATIC_URL = '/static/'
STATIC_ROOT = 'E:/Work/SoftwareDevelopment/Web/Django/commerce/auctions/static'
Did you ran python manage.py collectstatic?
You also need to configurate your settings.py with STATIC_URL = '/static/'
Docs
Are your auctions's static folder separated in css, js, images folders? If so, you are missing specifying that in static:
'auctions/css/styles.css'
If that doesn't work, try running collectstatic manually and getting the path to the file from there to pass in the html.

Django - Load static files from another app

In app1 I am trying to load static files from app2. I set no STATICFILES_FINDERS in project settings.py, which means, Django will use default AppDirectoriesFinder when it finds static subdirectory inside app directory.
Problem:
In template files of app1, I can generate urls of static files for app1 very easily. But if I want app1 template files to generate urls for static files of app2, links are not working. How can I in app1 generate static files of app2?
App1 template file:
{% load static %}
<img src="{% static "app1/example.jpg" %}"> <!-- ok -->
<img src="{% static "app2/example.jpg" %}"> <!-- link broken -->
HTML Output:
<img src="http://localhost:8000/static/app1/example.jpg">
<img src="http://localhost:8000/static/app2/example.jpg">
I had the same problem. I handled it setting this var in settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'app1/static/'),
os.path.join(BASE_DIR, 'app2/static/'),
]
So, both dirs become avaliable in static template tag regardless from which app you're calling it.
I'm using django 2.1.
Obs:
1 - Maybe this come set by default when you use the startapp command. Idk.
2 - BASE_DIR is the abs path to settings.py.
I found a solution. Please be aware, that directory in your project folder, which is named exactly same as your project folder is not an app. At first thought it is the initial app, that is automatically created by Django, but it isnt.
If you have two apps, and you want to load static files between them, code examples above works.
Just add this to your settings.py (from the Django documentation)
STATICFILES_DIRS = [
BASE_DIR / "static",
'var/www/static/',
]

Django template does not render CSS and Javascript

I have the following folder structure for my project.
-App1
-App2
-App3
-App4
-static
-css
-bootstrap.css
-js
-bootstrap.js
-jquery.js
-tempaltes
-base.html
Now, in my base.html file i have
But, when i view the file the css and javascript does not seem to be loaded on the page.
In my, i have
settings.py
TEMPLATE_DIRS = "Absolute-path-to-base.html"
STATIC_URL = '/static'
STATICFILES_DIRS = 'Absolute-path-to-the above static folder'
As per all the docs and posts what i understood was, we need to keep all the staticfiles in one place, viz, static folder in my case...and all the templates (including base.html) in one place. After doing so, i open the base.html in my browser to view the page...and it does not display the CSS and the javascript. Instead when i place the file (base.html) in the static folder things work fine.
Can someone point me in the right direction?
You should replace
STATIC_URL = '/static'
by :
STATIC_URL = '/static/'
and in django templates, you should use
<script src="{% static "path" %}"></script>
also add {% load staticfiles %} at the top

Cannot get images to display in Django(1.3) project

I'm making a simple Django project but I cannot get any images to display in my pages.
Django documentation at https://docs.djangoproject.com/en/1.3/howto/static-files/#basic-usage states
Basic usage Put your static files somewhere that staticfiles will find
them.
By default, this means within static/ subdirectories of apps in your
INSTALLED_APPS.
Your project will probably also have static assets that aren’t tied to
a particular app. The STATICFILES_DIRS setting is a tuple of
filesystem directories to check when loading static files. It’s a
search path that is by default empty. See the STATICFILES_DIRS docs
how to extend this list of additional paths.
Additionally, see the documentation for the STATICFILES_FINDERS
setting for details on how staticfiles finds your files.
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
For local development, if you are using runserver or adding
staticfiles_urlpatterns to your URLconf, you’re done with the setup –
your static files will automatically be served at the default (for
newly created projects) STATIC_URL of /static/.
You’ll probably need to refer to these files in your templates. The
easiest method is to use the included context processor which allows
template code like:
See Referring to
static files in templates for more details, including an alternate
method using a template tag.
So I did this in settings.py:
STATICFILES_DIRS = (
'/home/abc/django/project1/media/',
)
and enabled 'django.contrib.staticfiles',
In media, I have a folder img, which has various jpg files.
In my template, I have this as one of the lines:
<img src="{{STATIC_URL}}img/{{var}}.jpg">
When I'm passing var to this template via my view.
The HTML page seems to render this tag as "<img src="img/abc.jpg"> where var="abc".
But my browser refuses to display the image. What have I done wrong?
Did you see ths part in the documentation:
If {{ STATIC_URL }} isn't working in your template, you're probably not using RequestContext when rendering the template.
Do you also use RequestContext in your view to render the template?
Here is an alternative approach:
settings.py:
import os
PROJECT_DIR = os.path.dirname(__file__) + '/../'
STATIC_ROOT = os.path.join(PROJECT_DIR, 'media/')
STATIC_URL = '/media/'
In your template:
{% load staticfiles %}
<img src="{% static img/foo.jpg %}" />
If you need to pass a variable, use the prefix method:
{% load staticfiles %}
<img src="{% get_static_prefix %}img/{{var}}.jpg" />