Develop Reference

Django: static files vs. other data files

If I want to display images in a template, the path I specify is relative to the static folder in my app directory. But if I want to load a file from a view function, then the path I specify seems to be relative to the project directory. Should these files all be in the same directory? Or is it typical to separate them out in this way? Is a file loaded by a view function (such as a text file containing human-readable settings) considered to be "static" in the same sense as image, css and js files for rendering my template?

Django supports two different things: static and media files. Static files (CSS, JavaScript, Images) are the files that are part of your website. User uploaded content like images or videos are uploaded to MEDIA_ROOT. You can use these two settings to control this:
MEDIA_ROOT = '/absolute/path/to/media'
MEDIA_URL = '/media/'
Using dev server, you might need to add this to your URLs,
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Using file upload fields (FileField, ImageField), you can get the file url using url property which will include the defined MEDIA_URL.

No, you should not mix up true static content with package data files. Among other things, you generally don’t want users to be able to read those data files directly. Instead, place your files somewhere else within your package’s directory, then use pkgutil.get_data to read them.

I'm using django framework. i'm stuck up with how to show image on my home page

I'm new to django framework .I just want to show simple image on my home page (localhost:8000). I'm getting confused how to use models.py, views.py and urls.py. Can you help me to show just simple image file.
Thank you.

If you just want to display static image, django docs for managing static files and django.contrib.staticfiles may help.
You can
edit your project's settings.py and add appropriate static files settings
# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = '/path/to/static/root/directory'
# URL prefix for static files.
STATIC_URL = '/your_static_url_prefix/'
STATICFILES_DIRS = (
'/path/to/your/static/directory',
)
put your image somewhere under you STATICFILES directory, example at
'/path/to/your/static/directory/images/theimage.png'
Display the image from your home page template, example by
<img src="{{STATIC_URL}}images/theimage.png"/>
You can also read tutorials from the official django documentation to know the basics on how models,views,urls and templates work.

I think you should read something about it. There are some good tutorials in the net. First of all check django book, you can also watch this video tutorial

Django: css referencing media in static files (django dev / 1.3 / static files)

Like any other user of django user I serve static files. I've chosen to use django-staticfiles to be ready for django 1.3 which will basically integrate it into the core.
My question is pretty simple really - this works great for pulling together multiple media sources and referencing them in a uniform way in django templates. However, I often use image backgrounds in Css like so:
#itemname { background-image: url('/path/to/image.png'); }
My question is simple - if I use absolute names, I have to hard code them. If I use relative names, moving to "subdirectory" urls messes up the resource location for these items and they can't be loaded.
So, how do I extend this solution to CSS? Said solution must avoid:
Embedding css in html. I personally avoid this.
Using hardcoded urls. This does not work very well because on my local setup I typically use 'localhost/project' with apache for testing (mod_wsgi) whereas I tend to use project.com for deployment.
Ideas?

You said you had trouble with relative paths, but I don't understand exactly what you meant.
I ran into the same issue, and I've used relative paths to solve it. The only thing to keep in mind is that when deploying the images need to (obviously) remain in the same path relative to the CSS files.
My setup in a nutshell:
Note I'm still using django-staticfiles with Django 1.2, but it should work similarly for Django 1.3
STATIC_URL = "/site_media/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, "site_media", "static")
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, "static_media"),
)
Then I serve the CSS from {{ STATIC_URL }}css/style.css which references images at ../images/logo.png.
and my project looks like this:
project_dir
...
stuff
static_media
...
css
images
Let me know if you have any questions, and I'll clarify.

Ok,
I don't know if there is something wrong with #John's solution but it didn't worked to me then I put this code on the CSS
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
and
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/main.css">
Hope it helps!

Django Template Inheritance -- Missing Images?

I have got the following file heirarchy:
project
other stuff
templates
images
images for site
app1
templates for app1
registration
login template
base.html (base for entire site)
style.css (for base.html)
In the login template, I am extending 'base.html.' 'base.html' uses 'style.css' along with all of the images in the 'templates/images' directory. For some reason, none of the CSS styles or images will show up in the login template, even though I'm extending it.
Does this missing image issue have something to do with screwed up "media" settings somewhere? I never understood those, but this is a major roadblock in my proof-of-concept, so any help is appreciated.
Thanks!

I recommend not putting the styles and images there. For development, your MEDIA_ROOT may point to an arbitrary local directory on your machine containing the files, it need not even be below your django project's root folder (see http://docs.djangoproject.com/en/dev/ref/settings/#media-root).
For production, you'll have to choose a different approach to serving static content anyway (http://docs.djangoproject.com/en/dev/howto/static-files/#the-big-fat-disclaimer).

can't figure out serving static images in django dev environment

I've read the article (and few others on the subject), but still can't figure out how to show an image unless a link to a file existing on a web-service is hard-coded into the html template.
I've got in urls.py:
...
(r'^galleries/(landscapes)/(?P<path>.jpg)$',
'django.views.static.serve', {'document_root': settings.MEDIA_URL}),
...
where 'landscapes' is one of the albums I'm trying to show images from. (There are several more of them.)
In views.py it calls the template with code like that:
...
<li><img src=160.jpg alt='' title='' /></li>
...
which resolves the image link in html into:
http://127.0.0.1:8000/galleries/landscapes/160.jpg
In settings.py I have:
MEDIA_ROOT = 'C:/siteURL/galleries/'
MEDIA_URL = 'http://some-good-URL/galleries/'
In file system there is a file C:/siteURL/galleries/landscapes/160.jpg and I do have the same file at http://some-good-URL/galleries/landscapes/160.jpg
No matter what I use in urls.py — MEDIA_ROOT or MEDIA_URL (with expectation to have either local images served or from the web-server) — I get following in the source code in the browser:
<li><img src=160.jpg /></li>
There is no image shown in the browser.
What am I doing wrong?

This is a long post, basically summarizing all the things I learned about Django in order to get static files to work (it took me a while to understand how all the different parts fit together).
To serve static images in your development server (and later, your real server), you're going to have to do a few things (note specifically the third and fourth steps):
Set MEDIA_ROOT
MEDIA_ROOT is a constant which tells Django the physical path of the file (on your filesystem). Using your example, MEDIA_ROOT needs to be set to 'C:/siteURL/galleries/', like you wrote. MEDIA_ROOT is going to be used in one of the following steps, which is why we set it.
Set MEDIA_URL
MEDIA_URL is the "url" at which your images sit. In other words, whenever you want to get an image, the url to look for starts with MEDIA_URL. Usually this is not going to start with "http", since you're serving from your own server (my MEDIA_URL is usually set to '/site_media/', meaning to start from the root domain, then go to site_media etc.)
Use MEDIA_URL
MEDIA_URL doesn't work by magic, you actually have to use it. For example, when you're writing the HTML which gets a file, it needs to look like this:
<li><img src="{{MEDIA_URL}}/160.jpg" /></li>
See how I'm telling the template to use the MEDIA_URL prefix? That eventually translates to 'http://some-good-URL/galleries/160.jpg'.
Note that to be able to actually use the MEDIA_URL in your templates, you're going to have to add the line 'django.core.context_processors.media' to your TEMPLATE_CONTEXT_PROCESSORS setting in your settings.py file, if I'm not mistaken.
Make your dev server serve static files
In a real environment, you will configure files with addresses like "static_media" to be served without going through Django. But in a dev environment, you'll want to server them from Django as well, so you should add this generic line to the end of your urls.py file:
if settings.DEBUG:
# Serve static files in debug.
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT,
'show_indexes' : True}),
)
Note how that takes anything with the url "site_media/*" (which is actually my MEDIA_URL) and serves it from my MEDIA_ROOT folder, which is the place where the MEDIA_ROOT setting comes into play.
Final note
What confused me is that a lot of the things here are for convenience. For example, MEDIA_ROOT is only used in your debug url pattern, to tell Django where to load from. And MEDIA_URL is only there to encourage you not to put in absolute URLs in all your HTML files, because then when you decide to move the files to a different server, you'd have to manually change them all (instead of just changing the MEDIA_URL constant).
Of course, none of this is necessary: you can hard-code the debug url patter with your own folder, make sure that the static files really are being server from the url (by visiting it in your browser), and then hand-code that without using the MEDIA_URL setting into the HTML file, just to make sure things work.

This looks buggy...:
r'^galleries/(landscapes)/(?P<path>.jpg)$'
this RE will only match image names with a single character begore the jpg suffix, not four (as in, e.g., '160.jpg'). Maybe you meant...
r'^galleries/(landscapes)/(?P<path>.*jpg)$'
...?

Take this as a cross between the two previous answers, both of which are good. First, your regex is incorrect as Alex pointed out. I would suggest setting it as:
(r'^local_media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}), # static content
Because you're probably going to want to server css and js files too, not just images. This regex takes care of any and every static file you might want to serve.
Next, you'll want to specify the MEDIA_URL for your img tags. You currently have:
<img src=160.jpg />
Instead, it needs to be something like:
<img src=[YOUR MEDIA_URL]160.jpg />
The trick I use is easy. At the top of my views.py, I have the following code:
from django.conf import settings
resp = {}
resp['MEDIA_URL'] = settings.MEDIA_URL
and then I just pass the resp dictionary to every template I render. Now I can write those same img tags as:
<img src={{MEDIA_URL}}160.jpg />
Best of all, this part of your code can be used in production as well (not the regexes, just the MEDIA_URL bit).