Django media URLs in CSS files
-
06-07-2019 - |
Question
In django templates, it's common to do the following:
<img src="{{ MEDIA_URL }}/img/someImage.jpg">
How would you accomplish this in a CSS file which is not served as a template?
.someClass {
/* can't do this this */
background: url("{{ MEDIA_URL }}/img/someImage.jpg");
/* either this */
background: url("http://media.domain.com/img/someImage.jpg");
/* or this */
background: url("/django_static_media/img/someImage.jpg");
/* can't do both... what to do? */
}
I need the ability to serve my files either from the media subdomain, or during offline work and serve them directly as a django static view. But CSS files are a problem since they are not processed as templates and I cannot use the MEDIA_URL
context variable.
What's the solution?
Edit: I should note that the problem arises since my static media files are in fact located on a separate media sub-domain, thus negating the use of relative paths. Got it, thanks!
Solution
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.
OTHER TIPS
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
Is using relative paths (for image files) in your CSS files not a viable option for you?
If you want to use template directives in a file, why isn't it served via a template?