[Django]-Django media URLs in CSS files

by

50👍

✅

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.

👤ozan

7👍

Sorry, you won’t like the answer.

I’ve got the same problem:

There is no easy way to do this with static-served CSS files.

What I do:

  • debug server, work locally, media served locally
  • production server is hosted out somewhere commercial w/media on Amazon S3
  • settings.py file auto sets MEDIA_URL (DEBUG, etc.) via hostname check (to differentiate production vs. local/home/debug)
  • HTML files all have css links with
    {{MEDIA_URL}} (+RequestContext
    contexts for views)
  • I like absolute path names, so an “update_s3” script:
    (1) alters each css file is temporarily to fix
    ‘url(“/media’ to ‘url(“s3.mydomain.com/media’ and
    (2) updates/uploads my /media directory to Amazon S3

I then go to production and do an svn update & touch the WSGI file & validate

👤joej

3👍

Is using relative paths (for image files) in your CSS files not a viable option for you?

👤ayaz

0👍

If you want to use template directives in a file, why isn’t it served via a template?

👤ironfroggy

Leave a comment