I have tested to embedded css style into html template, but it doesn't load css files, my configure as below, could you please help assist ?
checkstatic\showstatic\templates\index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en">
<head>
{% load static%}
<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
</head>
<body>
<img src="{% static 'logo1.png' height="200" width="200" class="d-inline-block align-top" %}" alt="">
<h1 class="test">hahahaha</h1>
</body>
</html>
checkstatic\static\css\mystyle.css
.test{
color: red;
}
my settings:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'showstatic'
]
...
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'checkstatic/static/')
]
when i access the index site, it only apply h1 tag, it can not load red color as the css config.
Statics are used to get and use complete files (css, images, js, etc), in your image it should be:
<img src="{% static 'logo1.png' %}" height="200" width="200" class="d-inline-block align-top" alt="">
Leaving the properties of the img outside the static block.
first you should create directory=> static*
after then add base directory in setting:
STATICFILES_DIRS = [
BASE_DIR / 'directory_name'] // typically the name is: static_root
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR , 'media')
then: insert urls in main project
from django.conf import settings
from django.conf.urls.static import static
+static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)
!!attention !! ==> you should insert {%load static %} at above each of html pages
if you want to know more, follow https://docs.djangoproject.com/en/4.0/howto/static-files/
Related
I am doing the Tango with Django tutorial. I am using Django version 3.1.1. I was able to get my image to load on the local link 'http://127.0.0.1:8000/static/images/rango.jpg'
I am not getting it to load on to the index.html the code is
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title> Rango</title>
</head>
<body>
<h1>Rango says...</h1>
<div>
hey there partner! <br />
<strong>{{ boldmessage }} </strong><br />
</div>
<div>
About<br />
<img src="{% static
'images/rango.jpg' %}"
alt="Picture of Rango" />
</div>
</body>
</html>
I did try removing the "alt=" in html but that didn't work.
I do not think the problem is my settings.py, but I'll share some parts of the settings.py anyway.
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates') # this is the file path for templates
STATIC_DIR = os.path.join(BASE_DIR,'static') # this is the file path for static
STATICFILES_DIRS = [STATIC_DIR,]
...
#At the very bottom...
STATIC_URL = '/static/'
I had the same problem some time ago. Applying these changes solved it. Remove STATIC_DIR and STATICFILES_DIRS from settings.py and replace them with these:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, '/static/'),
)
So the problem ended up being how the image html was wrapped. It needs to be one line, like below.
<img src="{% static 'images/rango.jpg' %}"alt="Picture of Rango" />
I am trying to add a logo to my site, but for some reason it just isn't showing up.I have configured my code to the best of my knowledge but here is my code.
First i made sure django.contrib.staticfiles is included in my INSTALLED_APPS.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
]
i then ensured i defined STATIC_URL in my settings.py. I am only using one STATIC
STATIC_URL = '/static/'
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
In my templates, i used the static template tag to build the URL for the relative path using the configured STATICFILES_STORAGE
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
{% block title%}
{% endblock title%}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{%url 'index' %}">
<img src="{% static 'img/ATbrAaMRc.jpg' %}" alt='Image'>
</a>
Any help is appreciated.
There was a typo in the original post.
STATICFILES_DIR was used instead of STATICFILES_DIRS (Note the "S" at the end).
Fixing this allowed the "static" folder to be stored outside of the "blog" folder.
(Source: https://docs.djangoproject.com/en/3.0/howto/static-files/)
moving the static folder to the blog app worked.
I have created a Static folder with img folder. It has a image: dog.jpg
euskaraz>euskaraz>static>img>dog.jpg
HTML template:
{% load static %}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<img src="{% static 'img/dog.jpg' %}">
</body>
</html>
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Inspecting element:
All project:
Where is the problem?
Thanks!
First, add your extra static directory to STATICFILES_DIRS settings
STATICFILES_DIRS = [
("some_cool_name", os.path.join(BASE_DIR, 'euskaraz/static')),
]
then, in your template,
{% load static %}
<img src="{% static 'some_cool_name/img/dog.jpg' %}">
settings.py
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static_in_env')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'
django.contrib.staticfiles' included in installed_apps. {% load static from staticfiles %} used in base.html.
still getting these errors:
[22/Dec/2019 13:45:31] "GET / HTTP/1.1" 200 10735
[22/Dec/2019 13:45:32] "GET /static/js/jquery-3.4.1.min.js HTTP/1.1" 404
1791
[22/Dec/2019 13:45:43] "GET /static/css/bootstrap.min.css HTTP/1.1" 404
1788
[22/Dec/2019 13:45:43] "GET /static/css/mdb.min.css HTTP/1.1" 404 1770
......
script.html
{% load static from staticfiles %}
<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js'
%}">
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{% static 'js/popper.min.js' %}">
</script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}">
</script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{% static 'js/mdb.min.js' %}">
</script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();
</script>
staticfiles dir includes following files and folders
static_in_env
- css
-bootstrap.css
-bootstrap.min.css
-mdb.css
-mdb.min.css
-mdb.lite.css
-mdb.lite.min.css
-style.css
-style.min.css
- font
- img
- js
-bootstrap.js
-bootstrap.min.js
-mdb.js
-mdb.min.js
-popper.min.js
- scss
In your project_name/urls.py, try to add the following at the end:
urlpatterns = [
# your urls...
]
# ↓ add this ↓
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Also, just put {% load static %} in your script.html, not {% load static from staticfiles %}
In settings.py add
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
In base.html
{% load static %}
Hopefully it will work if it doesn't run this command
Python manage.py collectstatic
if you are using bootstap, either you download it or use cdn
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
or you can use the starter template provided by bootstrap, which will have all the basic html,css and js files. Link: https://getbootstrap.com/docs/4.4/getting-started/introduction/
custom css links can be linked to the file as follows
<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>
I am setting up a beginner django app and I cannot make it display static content. (css and jpg) files. The documentation is confusing and I need some help at a very basic level.
My static files are located in: '/home/me/django_projects/myproject/site_media'. Under here there are directories: 'images' and 'css'
I am getting 404 errors on everything static. Even if I try to pull the file directly from: http://localhost:8000/site_media/images/test_image.jpg
Here is the html code that I that is supposed to trigger static content:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Django Test </title>
<link href="{{ STATIC_URL }}/css/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
This is my body... blah blah blah
<p>Here is an image: <img src="{{ MEDIA_URL }}images/media.jpg" alt="Foobar" />
</body>
Below are my settings files. I've tried about every combination of media and static configuration I can think of. Does anyone see what I am doing wrong here?
File: settings.py
# Example: "/home/media/media.lawrence.com/media/"
MEDIA_ROOT = '/home/me/django_projects/myproject/site_media/'
MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/admin_media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
"/home/me/django_projects/myproject/static",
)
# List of finder classes that know how to find static files in
# various locations.
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
#...
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.admin',
'django.contrib.admindocs',
'jim',
)
File: urls.py
urlpatterns = patterns('',
(r'^customers/$', 'jim.views.index'),
(r'^customers/(?P<customer_id>\d+)/$', 'jim.views.detail'),
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/media'}),
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/media'}),
url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
url(r'^admin/', include(admin.site.urls)),
)
Does anyone see whats wrong here?
Looks like you might have two forward slashes:
STATIC_URL = '/static/'
"{{ STATIC_URL }}/css/style.css"
would give you
"/static//css/style.css"
view the page source in the browser and see how the url is being written
If I look at your config I would expect the file at:
http://localhost:8000/media/images/test_image.jpg
But please read the django docs on static versus media. Media is for useruploaded content, static is for site-content like css/images.