Using STATIC_URL in CSS/JS files?

1,603 views
Skip to first unread message

Victor Hooi

unread,
Jan 2, 2012, 8:56:19 PM1/2/12
to django...@googlegroups.com
Hi,

In Django, you can use {{ STATIC_URL }} in your HTML templates to point to the correct path for static files, however I'm wondering if there's any way to use it inside of CSS/JS files?

E.g. I have a CSS file that points to a PNG sprite, and I'd like a way to get it to point to {{ STATIC_URL}} without hardcoding the URL/path - any way?

Cheers,
Victor

Christophe Pettus

unread,
Jan 2, 2012, 9:02:52 PM1/2/12
to django...@googlegroups.com

On Jan 2, 2012, at 5:56 PM, Victor Hooi wrote:
> E.g. I have a CSS file that points to a PNG sprite, and I'd like a way to get it to point to {{ STATIC_URL}} without hardcoding the URL/path - any way?

You can use Django to serve your CSS file if you want to, although you'll want to cache the heck out of it for performance reasons. There are also a wide variety of tools which generate CSS from various input files to allow for various kind of template expansion, and those might be a suitable alternative.

--
-- Christophe Pettus
x...@thebuild.com

Andres Reyes

unread,
Jan 2, 2012, 10:38:21 PM1/2/12
to django...@googlegroups.com
If you're serving your media from the same domain as your CSS i'd use
relative paths

2012/1/2 Christophe Pettus <x...@thebuild.com>:

> --
> You received this message because you are subscribed to the Google Groups "Django users" group.
> To post to this group, send email to django...@googlegroups.com.
> To unsubscribe from this group, send email to django-users...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
>

--
Andrés Reyes Monge
arm...@gmail.com
+(505)-8873-7217

francescortiz

unread,
Jan 3, 2012, 4:10:01 AM1/3/12
to Django users
Appart of using relative paths when I want to use STATIC_URL in
javascript I define a global javascript variable in my base.html
template, so it is available in my javascript files.

<script>
window.STATIC_URL = '{{STATIC_URL}}';
</script>
> > For more options, visit this group athttp://groups.google.com/group/django-users?hl=en.
>
> --
> Andrés Reyes Monge
> armo...@gmail.com
> +(505)-8873-7217

Bill Freeman

unread,
Jan 3, 2012, 2:18:50 PM1/3/12
to django...@googlegroups.com
You can do this in a bad way or a worse way:

The worse way is to serve your static files as views, complete with template
rendering. This will be even morepainful if you use Django templates as the
templating engine, since you will have to quote all those braces that you need
in CSS and Javascript. You might find a templating scheme that fits the task
better, and feed it the variable values you need to.

The bad way is like the worse way, but is more work: you do the same template
interpolation, but from a management command, which makes versions of your
static files with all substitutions applied, and which places them in
the folder from
which your front end apache or ngniz will really serve them, which
should probably
be where runserver will look for them as well. You would have to remember to
run this when you changed something.

Bill

Christophe Pettus

unread,
Jan 3, 2012, 3:29:35 PM1/3/12
to django...@googlegroups.com

On Jan 3, 2012, at 11:18 AM, Bill Freeman wrote:

> This will be even morepainful if you use Django templates as the
> templating engine, since you will have to quote all those braces that you need
> in CSS and Javascript.

I don't believe this is correct; Django's templating engine doesn't choke on single braces.

Bill Freeman

unread,
Jan 4, 2012, 4:18:38 PM1/4/12
to django...@googlegroups.com
Good point. But you can run into double braces in JS.

francescortiz

unread,
Jan 5, 2012, 9:21:56 AM1/5/12
to Django users
The only case in which you can have issues with double brackets is
when a '{{' appears in the same line and before than a '}}'.
Reply all
Reply to author
Forward
0 new messages