How can I add css and jquery file in my django project?

Question

I am learning Django for one of my web projects. Facing difficulties to append css,jquery file in my project. The template is very simple and need not to use extends.Just one page form. What I have done to declare my media file that: In settings.py file: Added path:

`import os

def path(*x):
    return os.path.join(os.path.abspath(os.path.dirname(__file__)), *x)

` Then added:

MEDIA_ROOT = path('media') #media is my folder where all the css,js file are 
MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/media/'
TEMPLATE_DIRS = (
    path('templates')

In the urls.py file added:

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

In the template file I have tried with all these types of declaration:

<script type="text/javascript" src="/media/jquery.min.js"></script> 
    <script type="text/javascript" src="/media/site.js"></script>   
    <link rel="stylesheet" type="text/css" media="screen" href="/media/screen.css" />
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../media/screen.css" />

But when I loaded the template file as simple html with :

<script type="text/javascript" src="../media/jquery.min.js"></script> 
    <script type="text/javascript" src="../media/site.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="../media/screen.css" />

That worked.But I need to integrate within my Django project. Hope will get the navigation and solve it :) Thanks

Your MEDIA_URL and ADMIN_MEDIA_PREFIX are identical. Since runserver serves media admin for you automatically, this is likely the source of your problems. Try setting ADMIN_MEDIA_PREFIX to something else, like /media/admin/. — eternicode
– eternicode, Commented Nov 20, 2010 at 16:39

Gabriel Hurley · Accepted Answer · 2010-11-20 10:39:49Z

The correct syntax is in the list of things you tried unsuccessfully:

<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" />

If you define your MEDIA_URL as "/media/", then that link will work out to be /media/test.css.

Provided that you have the following directory structure:

my_project
    |-- settings.py
    |-- urls.py
    |-- media
        |-- test.css

I would double check all your file and directory names, make sure you don't have any errant/extra slashes, etc.

Also, I presume that "test.css" was supposed to be "screen.css" like it was in all your other examples...

But basically, using an absolute url path (starting with the slash to indicate it resolves from the site root) will work just the same as using a relative path (../) as long as you actually have your files in the right place. Then what you have will work.

2 revs, 2 users 88% · Accepted Answer · 2010-11-20 16:29:42Z

2

My dir structure is as follows:

|-- test_form
|-- /settings.py
|-- /urls.py
|-- /media
|   '-- test.css
'-- /templates
    '-- ...

And I added the following syntax in my template.html file:

<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" />

I am confused where the problem is.

edited Nov 20, 2010 at 16:29

community wiki

2 revs, 2 users 88%
eternicode

Comments

Olle Sjögren · Accepted Answer · 2012-11-27 12:44:33Z

2

I think in the urls.py, you might have missed the url in the urlpatterns, i.e.:

urlpatterns = patterns('',url(r'^media/(?P.*)$', 'django.views.static.serve', { 'document_root' : settings.MEDIA_ROOT }),

edited Nov 27, 2012 at 12:44

Olle Sjögren

5,3923 gold badges35 silver badges55 bronze badges

answered Nov 27, 2012 at 12:16

Raghavendra Karunanidhi

291 bronze badge

Collectives™ on Stack Overflow

How can I add css and jquery file in my django project?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related