Django: How to Serve Media/Stylesheets and Link to Them Within Templates

Django: how do you serve media / stylesheets and link to them within templates

I just had to figure this out myself.

settings.py:

MEDIA_ROOT = 'C:/Server/Projects/project_name/static/'
MEDIA_URL = '/static/'
ADMIN_MEDIA_PREFIX = '/media/'

urls.py:

from django.conf import settings
...
if settings.DEBUG:
    urlpatterns += patterns('',
        (r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
    )

template file:

<link rel="stylesheet" type="text/css" href="/static/css/style.css" />

With the file located here:

"C:/Server/Projects/project_name/static/css/style.css"

Django; How can i serve templates/images/css/js from inside custom 'skin' directory?

First thing, you should rather keep your static files in a static folder and only use media for uploaded content.

Then within your static folder you could have a folder for each of your skin containing all the CSS, images and JS needed.

From your skin template just import the files prefixed by both {{ STATIC_URL }} and your skin name.

<link rel="stylesheet" src="{{ STATIC_URL }}name_of_your_skin/css/style.css" />

If your skins do not need a separate template you could even do :

<link rel="stylesheet" src="{{ STATIC_URL }}{{ skin_name }}/css/style.css" />

including css in Django

I am guessing you aren't using static css sheets. I always just do:

<html>
<head>
            {%block stylesheet %}
               <style type="text/css" title="currentStyle"> 
                   @import "{{MEDIA_URL}}css/style.css";
               </style>
            {% endblock stylesheet%}
   ....

I then set my Media root, and store the files as

 MEDIA_ROOT=<fullyquallified patyh>/Media/css/<css files>
 MEDIA_URL=http://localhost/mysite/

It should be noted that STATIC_URL defaults to MEDIA_URL if its not defined.

How to link my css, js and image file link in django

    {% load staticfiles %}

    <link rel="stylesheet" type="text/css" href="{% static 'pathtostaticfile' %}" />

You can using statcfiles tag to load your static file. With pathtostaticfile is your static file

More detail
https://docs.djangoproject.com/en/1.9/intro/tutorial06/

Linking to stylesheet with Django

Media is for user uploaded files, static - for your CSS and and other files, so you must create there directories for your static files like js and css.

You've done right all things, because something like this in official documentation in Django. I'll leave how my friend told me to do, to server static files in few machines:

# settings.py
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
sys.path.insert(0, os.path.join(PROJECT_DIR, 'models'))
PROJECT_URL = 'http://127.0.0.1:8000'

MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')

MEDIA_URL = PROJECT_URL + '/media/'

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

STATIC_URL = PROJECT_URL + '/static/'

ADMIN_MEDIA_PREFIX = PROJECT_URL + '/static/admin/'

# Additional locations of static files
STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR, 'static'),
    os.path.join(PROJECT_DIR, 'media'),
)
# urls.py
urlpatterns += patterns('',
        (r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),
        (r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.STATIC_ROOT}),
)

Django media URLs in CSS files

Where is your css file served from? This usually isn't a problem as a common media structure such as:

media/
    images/
    css/
    js/

(or similar) allows for relative file paths for images, eg:

background: url('../images/foo.png');

If you're not prepared to change your media folder structure to accommodate relative file paths, you may have no alternative but to overwrite css declarations from within the template, using a secondary css file when offline:

{% if DEBUG %}
    <link rel="stylesheet" href="{{ MEDIA_URL }}css/offline-mode.css" />
{% endif %}

Of course the first option is much tidier.

Django - CSS file not linking with template correctly

The problem is that the server can't find the your static files not because they don't exist, but because there's no urlpattern for them, more info

# project urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = []
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

This should solve it