I'm new in Django,
I'm adding new CSS files to my application!
<link href="{% static 'css/style.css' %}" rel="stylesheet">
EDIT:
I'm using {% load static %} before rendering the teamplate!
I can't see any change when add files to the /static/ folder
(it works when adding them to /assets/)
My Question:
What the deference between the two folders? Do I need to add the new files to /static/ anyway? Because I see the var {% static .. %}
Related
I had static files in django.
Project Structure Sample
I have project structure like above i want to use js and img from asset folder. How can i do this ? How i can avoid using {% static "abc.jpg" %} ?
First you need to keep this files in static folder
Keep these files out of templates like
project_main_folder/static/img/abc.jpg
The recommended way is to use static tag provided by django.
{% static "abc.jpg" %}
Without static tag you can do this like
<img src="host:port/static/img/abc.jpg" />
or
<img src="/static/img/abc.jpg" />
This is not recommend.
I've been struggling to get Django to recognize my SCSS files (I may be misusing SCSS/SASS/LESS terminology... their relationship confuses me). I'm using django-libsass and compress, both of which seem pretty straight-forward. My page is giving me the error "Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream: ". It's loading the page but none of my styles are showing.
I'm not sure what people need to see. My template includes:
<link href="{% static 'css/blog.scss' %}" rel="stylesheet">
(this worked fine when it was css)
Settings:
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'django_libsass.SassCompiler'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# other finders..
'compressor.finders.CompressorFinder',
)
Try adding type="text/x-scss" to the link element along with the compress tag:
{% compress css %}
<link href="{% static 'css/blog.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
And make sure to load the compress tag before you use it:
{% load compress %}
I'm trying to use django's static templatetag to display an SVG, but it doesn't seem to recognize the SVG as a valid image url. This is what I currently have:
settings.py
import mimetypes
mimetypes.add_type("images/svg+xml", ".svg", True)
landing.html
{% load staticfiles %}
<img src="{% static 'images/right-arrow.svg' %}" />
At least in my view.py, it recognizes the SVG mimetype:
views.py
print(mimetypes.guess_type(static('images/right-arrow.svg')))
# returns ('images/svg+xml', None)
The SVG does display in a non-django page, and it will download the SVG if I try to open the SVG path in a new browser tab.
I'm currently using python 3.4 and django 1.8.4.
I found the issue. In settings.py, it should be mimetypes.add_type('image/svg+xml', '.svg', True). image should be singular.
I faced a similar issue.I would recommend you to use :
src="{{ STATIC_URL }} images/right-arrow.svg" instead of src="{% static 'images/right-arrow.svg' %}"
svg format might not always identify django's method of obtaining staticfile contents.Hope this helps :)
Add this in your settings.py file.
import mimetypes
mimetypes.add_type("image/svg+xml", ".svg", True)
mimetypes.add_type("image/svg+xml", ".svgz", True)
In your cases you have added images in add_type which should be singular (image).
You are loading staticfiles and using static?
This is wrong.
Try changing {% load staticfiles %} <img src="{% static 'images/right-arrow.svg' %}" /> to
{% load static %} <img src="{% static 'images/right-arrow.svg' %}" /> and you also need to consider which app you should find your static files.
I am using django 1.5.2 and I am having a hard time understanding the purpose of the media directory vs. the static directory and how to include stylesheets in my django project.
This is my directory structure:
django_books
beer
__init__.py
admin.py
models.py
views.py
random_book
(same as beer above)
django_books (the actual django project; beer and random_book above are my apps)
templates
base.html
beersall.html
__init__.py
settings.py
urls.py
views.py
wsgi.py
static
css
beers.css
media
css
beers.css
static
css
beers.css
manage.py
My beersall.html template (the beer output is correct, so just linking the stylesheet is wrong):
{% extends 'base.html' %}
{% block content %}
<div id="beer_list">
{% for beer in beers %}
{{ beer }},
{% endfor %}
</div>
{% endblock %}
My base.html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/css/beers.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/beers.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/beers.css" />
<link rel="stylesheet" type="text/css" href="/static/css/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/media/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/static/beers.css" />
<link rel="stylesheet" type="text/css" href="/Users/username/Projects/django_books/django_books/static/beers.css" />
{% block extrahead %}{% endblock %}
</head>
<body>
<div id="page_container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
My settings.py file:
MEDIA_ROOT = '/Users/username/Projects/django_books/media/'
MEDIA_URL = '/Users/username/Projects/django_books/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
I should note that I am using the django development server, not apache.
The error in my browser (developer console) says beers.css is 404.
The url is localhost:8000/beers/ and my urls.py file correctly points to this and the views.py correctly serves the beersall.html template. How can I properly link my media?
EDIT
When I change the css link href value to /Users/username/Projects/django_books/media/ it still doesn't work.
EDIT 2
I've updated the href values to show things I've tried. Still not working...
User-uploaded files (by admins or site users) go to media directory.
Static files are files provided by developers (or from third-party apps).
Set something like this:
# Local disk paths
MEDIA_ROOT = '/Users/username/Projects/django_books/media/'
STATIC_ROOT = '/Users/username/Projects/django_books/static/'
# URLs visible in the browser's address bar
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
And in Your template use the STATIC_URL variable:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/beers.css" />
And move your styles to the django_books/static/ directory.
in my project:django_learn, in template: check_uncheck_all.html, part pf the code:
{% load staticfiles %}
<html>
<head>
<script type=text/javascript src="{% static 'js/jquery-1.9.1.js' %}"></script>
</head>
you can also have a look at my settings.py
The static files were being found, but the permissions were not set up correctly. (i.e. a 403 not a 404 server error)
<VirtualHost *:80>
WSGIScriptAlias / /Users/username/Projects/django_books/django_books/django.wsgi
#the directory tag before was /Users/username/Projects/django_books/django_books/>
#this was one directory too deep
#from my structure above, you can see I needed to change my directory tag to this:
<Directory /Users/username/Projects/django_books/>
Order Allow,Deny
Allow from All
</Directory>
<Directory /Users/username/.virtualenvs/django_books/lib/python2.7/site-packages/django/contrib/admin/static/admin/>
Order Allow,Deny
Allow from All
</Directory>
Alias /static/admin/ /Users/username/.virtualenvs/django_books/lib/python2.7/site-packages/d$
Alias /static/ /Users/username/Projects/django_books/static/
</VirtualHost>
My app has a lot of routes that use the same set of static files.
I have to define them for every route like this:
css_reset = url_for("static", filename="reset.css")
css_main = url_for("static", filename="main.css")
css_fonts = url_for("static", filename="fonts.css")
js_jquery = url_for("static", filename="jquery-1.7.2.min.js")
js_main = url_for("static", filename="main.js")
And then, when I render a template it looks like this:
return render_template("person.html",
css_main=css_main,
css_reset=css_reset,
css_fonts=css_fonts,
js_jquery=js_jquery,
js_main=js_main)
I'm new to flask and python and I think that what I'm doing is a bit ridiculous. Can I define them in one place and then just use in my templates, without copying and pasting in every route definition?
Instead of passing these variables to your templates every time you can register them as globals in Jinja:
app.jinja_env.globals.update(
css_reset=url_for("static", filename="reset.css"),
css_main=url_for("static", filename="main.css"),
...
)
Or, better yet, register a helper function:
app.jinja_env.globals['static'] = (
lambda filename: url_for('static', filename=filename))
And then in your templates:
<link ref=stylesheet href="{{ static('main.css') }}">
The simplest way is to use Flask-Assets extension.
from flask.ext.assets import Environment, Bundle
assets = Environment(app)
css_all = Bundle('reset.css','main.css','fonts.css')
assets.register('css_all',css_all)
In template:
{% assets %}
<link rel="stylesheet" href="{{ ASSET_URL }}">
{% endassets %}
You can also compress css and js files for production by using certain options of this extension.
Since you need to use these files in many templates, define them in a base.html template and in every template extend that base.html. You don not have to write them again and again.
You don't need to do that, url_for is for generating urls (so that when you change the structure of a url, you don't need to change it a dozen times). You can just use a fixed path to your static files directly in your templates instead. Just put your static files in /static folder and use it in your template :
<link rel="stylesheet" href="{{ YOUR_SITE_URL_HERE+'/static/main.css' }}">
Instead of replacing YOUR_SITE_URL with your site's url directly, you might want to define a variable in your config.py and use it in your template : {{ config['SITE_URL']+'/static/main.css' }}