I'm writing a django website and I want to use 'Semantic UI' for its front end. but when I add a Semantic UI Button to my first page in django, it only shows plain text!
the file tree of my project is like this :
Matab->
----Matab->
--------Templates->
--------------base.html
--------------login.html
---------settings.py
-----media->
--------css->
------------semantic.css
settigs.py :
MEDIA_ROOT = os.path.join(os.path.dirname(__file__),'../media/').replace('\\','/')
MEDIA_URL = '/media/'
base.html :
<html>
<head>
<link rel="stylesheet" href="{{ MEDIA_URL }}css/semantic.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Navid" />
</head>
<body>
<div id="mainContent">
{% block content %}{% endblock %}
</div>
</body>
</html>
login.html:
{% extends 'base.html' %}
{% block content %}
<div class="ui button">hello</div>
{% endblock %}
Edit: Please use STATIC_ROOT and STATIC_URL instead of MEDIA_ROOT and MEDIA_URL. And follow the doc to setup the static file directories.
Your MEDIA_ROOT path is wrong. Update it to this -
MEDIA_ROOT = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'media')
Here os.path.dirname(__file__) evaluates to second Matab directory. Using os.path.dirname() again, takes it to First Matab directory. Then you just join it with media. Python automatically adds the slashes.
The problem was in urls.py, I should insert this line :
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Related
My templates do not seem to be able to access static css files. The project using all-auth for authentication. My file structure is as follow:
Project Folder
app 1
app 2
static
css
style.css
templates
account
login.html
signup.html
base.html
home.html
base.html is as follow:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shuffle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='{% static "css/style.css" %}' rel="stylesheet">
</head>
<body>
<div id="card">
{% block content %}
{% endblock %}
</div> <!--card -->
</body>
</html>
The rest of the templates extend from base.html. On inspecting the rendered page, all the html are correct but the styling is missing.
Edit:
Error is shown as:
GET /static/css/style.css HTTP/1.1" 404 1665
Static directory in setting is set as:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
It seems like you need to add the setting STATICFILES_DIRS.
You should have all 3 parts in your settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
It seems like your folder is called CSS all uppercase, but in your template code (<link href='{% static "css/style.css" %}' rel="stylesheet">) you have folder name css in lowercase.
I also see that the folder Static has the first letter capitalized, but the settings code STATIC_ROOT = os.path.join(BASE_DIR, "static") has the folder name as all lowercase.
Both of these have to match their counterparts, capitalization is important in this part.
I'm trying to get a file that's in my media directory to appear on an HTML template. I'm using the "Tango with Django" book as a tutorial.
Here is my settings.py:
MEDIA_DIR = os.path.join(BASE_DIR, 'media')
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/'
Here is views.py:
def about(request):
return render(request, 'rango/about.html', )
And my about.html template:
<!DOCTYPE html>
{%load staticfiles%}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<h1>This is the about page</h1>
<img src="{{MEDIA_URL}} {{cat.jpg}}"
alt="cats are funny"/>
<div>
Index
</div>
</body>
</html>
I know I must be missing something very obvious, but can't figure it out for the life of me!
The {{MEDIA_URL}} tag is deprecated. Use the {% get_media_prefix %} tag, instead.
<img src="{% get_media_prefix %}cat.jpg" alt="cats are funny"/>
From the documentation:
Similar to the get_static_prefix, get_media_prefix populates a template variable with the media prefix MEDIA_URL.
When rendered, that src attribute will be equivalent to /media/cat.jpg. You may want to consider using STATIC_ROOT in your settings.py, instead, along with the {% static %} tag:
<img src="{% static 'cat.jpg' %}" alt="cats are funny"/>
I think the problems should be errors in format.
Try the following two revisions:
1. in your render(), change "return render(request, 'rango/about.html', )" to "return render(request, 'rango/about.html') by deleting the last comma;
2. in your template file about.html, change .
I have static files placed in my_site/my_app/static/my_app/js and my_site/my_app/static/my_app/css. For some reason, the code below doesn't produce any output which means it can't find the static files:
#my_app/templates/my_app/base.html
{% load staticfiles %}
Here is setting.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'my_app', 'static', 'my_app',).replace('\\','/'),
)
STATIC_ROOT = ''
Why is that?
Add django.contrib.staticfiles to INSTALLED_APPS in your settings.py.
Remove STATICFILES_FINDERS, STATICFILES_DIRS, STATIC_ROOT from your settings.py.
change your base.html to something like this:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="fa">
<head>
<script type="text/javascript" src="{% static 'my_app/js/app.js' %}"></script>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I had faced the same issue which got solved after the following changes.
In HTML pages:
{% load static %} ## loads the static folder and images inside it.
<div id='button-holder'><img src="{% static "glass.png" %}" alt="Hi!" /></div> ## for images
src="{% static 'my_app/js/app.js' %} ## for scripts.
In urls.py
urlpatterns = patterns('',...
........
)+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
After this run command as #Daniel Roseman have mentioned python manage.py collectstatic. The findstatic command can help show you which files are found.
Example
python manage.py findstatic css/base.css admin/js/core.js
You can find help here regarding it.
You are supposed to run manage.py collectstatic to copy your app-level static files to the central static directory.
In my django project there are some mysterious (at least for me as a beinner) outputs I don't understand while working in my development environment.
I wanted to have a base template which includes a stylesheet in a static media folder...this works so far...but just for the address http://localhost/ all the other urls have a template which inherits from the base template.
Now the stylesheet of http://localhost/ looks nice...if i go to http://localhost/hello/ the included stylesheet has a whole html DOM structure with body, doctype etc. why is that? He somehow parses a html site instead of taking the css file...
Here my code: Any ideas?
urls.py:
from django.views.static import *
from django.conf import settings
admin.autodiscover()
urlpatterns = patterns('',
('^$',home_view),
('^hello/$', hello),
(r'^admin/', include(admin.site.urls)),
('^useragent/$',ua_display_good1),
(r'^media/(?P<path>.*)$', 'django.views.static.serve',
)
views.py
from django.http import HttpResponse
from django.shortcuts import render_to_response
def hello(request):
pagetitle = "Hello World"
return render_to_response('hello.tpl', {'pagetitle': pagetitle})
def home_view(request):
pagetitle = "Something"
return render_to_response('home.tpl', {'pagetitle': pagetitle})
def ua_display_good1(request):
try:
ua = request.META['REMOTE_ADDR']
except KeyError:
ua = 'unknown'
return render_to_response('base.tpl',{'ageone': ua})
base template:
<!DOCTYPE html>
<html lang="de">
<meta name="description=" content="{{metadescription}}">
<head>
<link rel="stylesheet" type="text/css" href="media/style.css">
<title>{% block title %}{{pagetitle}}{% endblock %}</title>
</head>
<body>
<h1>{% block h1 %}{{ageone}}{% endblock %}</h1>
{% block content %}{% endblock %}
{% block footer %}{% include "footer.tpl" %}
{% endblock %}
</body>
</html>
hello template:
{% extends "base.tpl" %}
{% block h1 %}Home{% endblock %}
{% block content %}Welcome{% endblock %}
Probably because you have a relative reference to the CSS file.
Try changing:
<link rel="stylesheet" type="text/css" href="media/style.css">
to
<link rel="stylesheet" type="text/css" href="/media/style.css">
so it always look in the root for media/style.css
Now you have set the link to css as relative "media/style.css". In home it resolves to "/media/style.css" but in hello it resolves to "/hello/media/style.css" (which gives the hello page).
Just use absolute css link like this: "/media/style.css".
The proper way to include the style sheets would be
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}style.css">
if this still wont work ....my css file name is Stylesheet.css and i linked it as css/Stylesheet.css ..it wasnt working... then i changed it to css/Stylesheet.CSS ..and it worked
Change href="media/style.css" to href="media/style.CSS" and it will work.
i 've the following folder structure
src\BAT\templates\admin\base.html
src\BAT\media\base.css
src\BAT\media\admin-media\base.css
settings.py
MEDIA_ROOT = os.path.join( APP_DIR, 'media' )
MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/admin-media/'
TEMPLATE_DIRS = (
os.path.join( APP_DIR, 'templates' )
)
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.admin',
'django.contrib.admindocs',
)
urls.py
urlpatterns = patterns('',
(r'^admin/doc/', include('django.contrib.admindocs.urls')),
(r'^admin/', include(admin.site.urls)),
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
)
I need to get both the CSS files in my application. my base.html contains
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{{ MEDIA_URL }}css/base.css" rel="stylesheet" type="text/css" />
<link href="{{ MEDIA_URL }}{{ADMIN_MEDIA_PREFIX}}css/base.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% load adminmedia %}{% admin_media_prefix %}css/base.css{% endblock %}" />
{% block extrastyle %}{% endblock %}
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="{% block stylesheet_ie %}{% load adminmedia %}{% admin_media_prefix %}css/ie.css{% endblock %}" /><![endif]-->
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% admin_media_prefix %}css/rtl.css{% endblock %}" />{% endif %}
<script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";</script>
{% block extrahead %}{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
</head>
I want to get the following output for URL http://localhost:8000/admin
<head>
<title>Site administration | My site admin</title>
<link href="/media/css/base.css" rel="stylesheet" type="text/css" />
<link href="/media/admin-media/css/base.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/media/admin/css/dashboard.css" />
But I always getting
<head>
<title>Site administration | My site admin</title>
<link href="/media/css/base.css" rel="stylesheet" type="text/css" />
<link href="/media/css/base.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/admin-media/css/base.css" />
<link rel="stylesheet" type="text/css" href="/admin-media/css/dashboard.css" />
while direct accessing http://localhost:8000/admin-media/css/base.css shows css file from Python site-packages/django/contrib/admin/media/css
while direct accessing http://localhost:8000/media/admin-media/css/base.css shows css file from src/media/admin-media/css/
while direct accessing http://localhost:8000/media/css/base.css shows css file from src/media/css/
Important for Django 1.4 and newer (see here):
Starting in Django 1.4, the admin’s static files also follow this convention, to make the files easier to deploy. In previous versions of Django, it was also common to define an ADMIN_MEDIA_PREFIX setting to point to the URL where the admin’s static files live on a Web server. This setting has now been deprecated and replaced by the more general setting STATIC_URL. Django will now expect to find the admin static files under the URL <STATIC_URL>/admin/.
Previous answer, for older Django releases:
ADMIN_MEDIA_PREFIX is meant to be an absolute URL prefix, it has nothing to do with the MEDIA_URL - both can point to completely different points. Admittedly, the (bad) choice of "_PREFIX" in the name somewhat suggests that.
So, instead of {{ MEDIA_URL }}{{ADMIN_MEDIA_PREFIX}}css/base.css it must be {% admin_media_prefix %}css/base.css. And then you have to ensure that the web server serves the admin media files on '/admin-media/'.
Note that I used the admin_media_prefix tag above, which needs {% load adminmedia %} at the beginning of the template. The regular media context processor only gives you the MEDIA_URL variable, unfortunately.
In order to override the vanilla admin media serving, try something like this in your URLconf:
# A handy helper function I always use for site-relative paths
def fromRelativePath(*relativeComponents):
return os.path.join(os.path.dirname(__file__), *relativeComponents).replace("\\","/")
[...]
url("^admin-media/(?P<path>.*)$",
"django.views.static.serve",
{"document_root": fromRelativePath("media", "admin-media")})
Django 1.4 uses a new strategy for loading static media files, those using it will want to read over https://docs.djangoproject.com/en/dev/howto/static-files/
The executive summary of the above link is that two new settings variables, STATIC_URL and STATIC_ROOT, are used together with a newly included app (django.contrib.staticfiles) to collect and serve static files which are included on a per app basis.
When upgrading my django installation I had to set my STATIC_ROOT equal to my previous MEDIA_URL.
Under this system templates should now use {{ STATIC_URL }}.