If I structure the first two lines of my HTML doc like this:
{% load static %}
<!DOCTYPE html>
It appears that none of the javascript or CSS run properly, and the webpage displays like this:
However, if I put any character after the {% load static %} expression,
For example, if I structure the first two lines of my HTML doc like this:
{% load static %}.
<!DOCTYPE html>
Then the scripts and CSS components run properly and the webpage displays as it should. Why is this?
Figured it out. For some reason, the content security policy that I had implemented was causing this issue. After removing the CSP, the static files began to behave in-line with expectations regardless of the presence/absence of a character after {% load static %}.
{% load static %}
<!DOCTYPE html>
You did it right but you have load the static files too like i did below.
<!-- js -->
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<!-- js -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
You have to use this tag to load static files in template "{% static %}" this is the syntax for load static files.
#And give it the path in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
And store css and js in static folder in your project too.Than its gonna work.
Make sure that the STATIC_URL of your settings is correct.
Hey everybody i have a problem with this code which i try to run on local host server , in this situation im followin an online project over youtube and he is trying to make an online resume, at the start we tried to make a simple home template which i stock in it so if u can help me to fix the problem in which cause to rise this error
'Static' is not a registered tag library. Must be one of:
admin_list
admin_modify
admin_urls
cache
i18n
l10n
log
static
tz
and this the code itself:
{% load Static %}
<link href="{% static '/css/main.css' %}" rel= "stylesheet" type="text/css">
<h3> Hello world! <h3>
<img src="{% static 'images/me.profile.jpg'%}"
this is the setting.py by the way:
STATIC_URL = '/static/'
MEDIA_URL = '/Images/'
STATIC_DIRS= [
os.path.join(BASE_DIR, 'static')
]
The tag is {% load static %} without the capital S.
it's a recommended way or templating engine rules first make folder template or static folder then in template make a new folder app_name.
then in app_name work on static files.
in your app make a folder name static in it you make another folder name of your app_name init you work on your static files
e.g
static/app_name/images/me.profile.jpg
maybe problem also in this name me.profile.jpg please change it to
profile.jpg.
you don't need to change anything in setting.py because static root default set .
{% load static %}
<link href="{% static 'app_name/css/main.css' %}" rel= "stylesheet" type="text/css">
<h3> Hello world! <h3>
<img src="{% static 'app_name/images/me.profile.jpg'%}" >
I just want to drop the favicon.ico in my staticfiles directory and then have it show up in my app.
How can I accomplish this?
I have placed the favicon.ico file in my staticfiles directory, but it doesn't show up and I see this in my log:
127.0.0.1 - - [21/Feb/2014 10:10:53] "GET /favicon.ico HTTP/1.1" 404 -
If I go to http://localhost:8000/static/favicon.ico, I can see the favicon.
If you have a base or header template that's included everywhere why not include the favicon there with basic HTML?
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
One lightweight trick is to make a redirect in your urls.py file, e.g. add a view like so:
from django.views.generic.base import RedirectView
favicon_view = RedirectView.as_view(url='/static/favicon.ico', permanent=True)
urlpatterns = [
...
re_path(r'^favicon\.ico$', favicon_view),
...
]
This works well as an easy trick for getting favicons working when you don't really have other static content to host.
In template file
{% load static %}
Then within <head> tag
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
This assumes that you have static files configured appropiately in settings.py.
Note: older versions of Django use load staticfiles, not load static.
Universal solution
You can get the favicon showing up in Django the same way you can do in any other framework: just use pure HTML.
Add the following code to the header of your HTML template.
Better, to your base HTML template if the favicon is the same across your application.
<link rel="shortcut icon" href="{% static 'favicon/favicon.png' %}"/>
The previous code assumes:
You have a folder named 'favicon' in your static folder
The favicon file has the name 'favicon.png'
You have properly set the setting variable STATIC_URL
You can find useful information about file format support and how to use favicons in this article of Wikipedia https://en.wikipedia.org/wiki/Favicon.
I can recommend use .png for universal browser compatibility.
EDIT:
As posted in one comment,
"Don't forget to add {% load staticfiles %} in top of your template file!"
In your settings.py add a root staticfiles directory:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
Create /static/images/favicon.ico
Add the favicon to your template(base.html):
{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
And create a url redirect in urls.py because browsers look for a favicon in /favicon.ico
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
urlpatterns = [
...
path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url('images/favicon.ico')))
]
<link rel="shortcut icon" href="{% static 'favicon/favicon.ico' %}"/>
Just add that in ur base file like first answer but ico extension and add it to the static folder
First
Upload your favicon.ico to your app static path， or the path you configured by STATICFILES_DIRS in settings.py
Second
In app base template file:
{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
You can make apps use different favicon.ico files here.
Addition
In project/urls.py
from django.templatetags.static import static # Not from django.conf.urls.static
from django.views.generic.base import RedirectView
Add this path to your urlpatterns base location
path('favicon.ico', RedirectView.as_view(url=static('favicon.ico'))),
This can let installed app(like admin, which you should not change the templates) and the app you forget modify the templates , also show a default favicon.ico
if you have permission then
Alias /favicon.ico /var/www/aktel/workspace1/PyBot/PyBot/static/favicon.ico
add alias to your virtual host. (in apache config file ) similarly for robots.txt
Alias /robots.txt /var/www/---your path ---/PyBot/robots.txt
I tried the following settings in django 2.1.1
base.html
<head>
{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
</head>
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'` <br>`.............
Project directory structure
view live here
<link rel="shortcut icon" type="image/png" href="{% static 'favicon/sample.png' %}" />
Also run: python manage.py collectstatic
The best solution is to override the Django base.html template. Make another base.html template under admin directory. Make an admin directory first if it does not exist. app/admin/base.html.
Add {% block extrahead %} to the overriding template.
{% extends 'admin/base.html' %}
{% load staticfiles %}
{% block javascripts %}
{{ block.super }}
<script type="text/javascript" src="{% static 'app/js/action.js' %}"></script>
{% endblock %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static 'app/img/favicon.ico' %}" />
{% endblock %}
{% block stylesheets %}
{{ block.super }}
{% endblock %}
Came across this while looking for help. I was trying to implement the favicon in my Django project and it was not showing -- wanted to add to the conversation.
While trying to implement the favicon in my Django project I renamed the 'favicon.ico' file to 'my_filename.ico' –– the image would not show. After renaming to 'favicon.ico' resolved the issue and graphic displayed. below is the code that resolved my issue:
<link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.ico' %}" />
Best practices :
Contrary to what you may think, the favicon can be of any size and of any image type. Follow this link for details.
Not putting a link to your favicon can slow down the page load.
In a django project, suppose the path to your favicon is :
myapp/static/icons/favicon.png
in your django templates (preferably in the base template), add this line to head of the page :
<link rel="shortcut icon" href="{% static 'icons/favicon.png' %}">
Note :
We suppose, the static settings are well configured in settings.py.
Just copy your favicon on:
/yourappname/mainapp(ex:core)/static/mainapp(ex:core)/img
Then go to your mainapp template(ex:base.html)
and just copy this, after {% load static %} because you must load first the statics.
<link href="{% static 'core/img/favi_x.png' %}" rel="shortcut icon" type="image/png" />
Now(in 2020),
You could add a base tag in html file.
<head>
<base href="https://www.example.com/static/">
</head>
Sometimes restarting the server helps.
Stop the server and then rerun the command: python manage.py runserver
Now your CSS file should be loaded.
From django 1.5 onwards, https://docs.djangoproject.com/en/1.5/releases/1.5/#miscellaneous
The template tags library adminmedia, which only contained the
deprecated template tag {% admin_media_prefix %}, was removed.
Attempting to load it with {% load adminmedia %} will fail. If your
templates still contain that line you must remove it.
So what is the appropriate way to replace code found in legacy libraries and my legacy projects which still uses {% load adminmedia %} and loads css like:-
<link rel="stylesheet" type="text/css" href="{% load adminmedia %}{% admin_media_prefix %}css/login.css">
?
Since Django 1.3 you can use django.contrib.staticfiles app.
Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS and the STATIC_ROOT and STATIC_URL options are specified in your settings.py.
Then run manage.py collectstatic command and all applications' static files will be collected in STATIC_ROOT folder.
In the templates you can use the {{ STATIC_URL }} context variable (make sure that django.core.context_processors.static is included in TEMPLATE_CONTEXT_PROCESSORS) or the {% static %} template tag.
<link href="{{ STATIC_URL }}admin/css/login.css" rel="stylesheet">
or
{% load staticfiles %}
<link href="{% static 'admin/css/login.css' %}" rel="stylesheet">
I just copied what's in base.css:
{% load admin_static %}
and then
<link href="{% static 'admin/css/base.css' %}" rel="stylesheet">
(replace base.css with whatever you need, like login.css in your case)
Make sure you have django.contrib.staticfiles in your INSTALLED_APPS.
(I didn't need to configure STATIC_ROOT and run manage.py collectstatic as suggested previously by Anton)
I'm somewhat confused as to how Django operates with static content. Essentially, in the settings.py file, we define MEDIA_URL which points to the URL to use when resolving static media such as scripts and styles, as well as MEDIA_ROOT, a reference to where things live on the filesystem.
However, it doesn't seem clear how I can get access to MEDIA_URL from a template, and it's kind-of-important if I want to use Django's mechanism for loading static content at all. Essentially, I have my base template looking somewhat like this:
<html>
<head>
{% block styles %}
<link rel="stylesheet" href="{{ MEDIA_URL }}styles/master.css"/>
{% endblock %}
<title>{% block title %}Page Title{% endblock %}</title>
</head>
<body>
{% block scripts %}
<script type="text/javascript" src="{{ MEDIA_URL }}scripts/jquery.js"></script>
{% endblock %}
</body>
</html>
Will the above code actually work? I've heard that you have to use other plugins to get something like this up and running, which seems kind of strange, as presumably the whole point behind defining MEDIA_URL is to use it in templates.
To access STATIC_URL in your templates, make sure django.core.context_processors.static is in TEMPLATE_CONTEXT_PROCESSORS, and that you're using a RequestContext. More details here.
In addition, static files should be placed under STATIC_URL, not MEDIA_URL, unless it is user-uploaded content.
I would say that you dont have to use MEDIA_URL and MEDIA_ROOT for your Js,css,img files!
I use STATIC_ROOT,STATIC_URL instead! as far as I know MEDIA_* is for upload of files, such as images, or any document!
Also I use STATIC_* because in my case, I have my js,css,... files in a S3 storage! so when I run collectstatic it just copy all my STATIC files to my cloud storage! So in my templates I have something like this:
{% block js %}
<script src="{{ STATIC_URL }}js/libs/modernizr-2.0.min.js"></script>
<script src="{{ STATIC_URL }}js/libs/respond.min.js"></script>
{% endblock %}
Check it out this note from Django docs:
Note In previous versions of Django, it was common to place static
assets in MEDIA_ROOT along with user-uploaded files, and serve them
both at MEDIA_URL. Part of the purpose of introducing the staticfiles
app is to make it easier to keep static files separate from
user-uploaded files.
For this reason, you need to make your MEDIA_ROOT and MEDIA_URL
different from your STATIC_ROOT and STATIC_URL. You will need to
arrange for serving of files in MEDIA_ROOT yourself; staticfiles does
not deal with user-uploaded files at all. You can, however, use
django.views.static.serve() view for serving MEDIA_ROOT in
development; see Serving other directories.