In a Django project, I would like to include a static file in a template. The following is the the project structure:
proj/
main/
static/
main/
js/
main.js
news/
templates/
news/
news.html
In news.html, I would like to include the main.js with the following hypothetical format:
{% load staticfiles %}
...
{% include {% static 'main/js/main.js' %} %}
How do I do it?
The include directive only searches file in template directories. What you could do (although I wouldn't) is to change your settings to also include the static files:
TEMPLATE_DIRS = [
...
"path/to/your/statics",
]
I have a couple of ideas.
The easiest thing to do would be to ensure you have the filesystem loader enabled, and you include the relevant directory containing static files in TEMPLATES[0]['DIRS'] (previously TEMPLATE_DIRS). The caveats are that it will not pick up static files contained inside your installed applications automatically, unless you list them in DIRS, too. Another option would be to use STATIC_ROOT, but that will only work if you run collectstatic every time you change the static file, which you normally don't have to do in development. Another pitfall is that it will only work with local static storage, not if you use any CDN or otherwise host your static files on a different host / network / whatever.
The other thing you can do is to write your own template loader which will use the static files API to load statics as templates. This is a bit more involved, but it should be able to access static files regardless of how they are stored and served.
Should you choose either option, you still have to be careful. For instance, you'll have to ensure that the static files you're including as templates are safe to include into HTML or whatever other context you're using them in. There will be no escaping going on.
In case you're trying to optimize the number of requests the client has to make, there are better ways. You're most likely better off implementing some pipeline that will pre-process and minify your static files. Including any significant chunk of CSS / JS into the HTML will make it impossible for clients to take advantage of caching, forcing them to re-download the same static content over and over again, likely impacting the performance negatively.
Edit: Since you want to just include some dynamic JavaScript variables, that's not a static file at all. What you really want is to create a template containing JavaScript code, and not mess with handling static files as templates. There is no rule that would say every javascript needs to be a static file. If it's dynamic, it's not a static file.
For the record, this was a typical instance of the XY problem. Problem X was dynamically assigning values to JavaScript variables when rendering templates. You came up with including static files in templates as a potential solution, but then got stuck with problem Y, which was that you didn't know how to include static files in templates.
Related
When I run python manage.py collectstatic, it makes a copy of each image, JavaScript, and CSS file with a hash in the filename:
Post-processed 'css/theme.css' as 'css/theme.afeb1fc222a9.css'
Post-processed 'css/custom.css' as 'css/custom.585e1b29ff9a.css'
...
I'm assuming this is just a way of making a versioned filename for better caching; the client or CDN can be told to cache this file indefinitely, because if I make a change, the hash will differ, and I'll just reference the new version by the new name.
However, I'm not clear on how I'm supposed to reference this URL. The documentation on serving static files just says,
In your templates, either hardcode the url like /static/my_app/example.jpg or, preferably, use the static template tag to build the URL for the given relative path by using the configured STATICFILES_STORAGE storage (this makes it much easier when you want to switch to a content delivery network (CDN) for serving static files).
I went through my templates and dutifully switched every static resource (including the CSS files) from a hardcoded URL to a {% static "..." %} template tag, assuming it would map to the versioned filename where appropriate. But it doesn't.
I'm also using WhiteNoise for serving the resources, and I'm not entirely sure how it affects things, but it also says,
Want forever-cacheable files and compression support? Just add this to your settings.py: STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
But I have that in my settings file and it also doesn't seem to do anything with these versioned filenames.
If DEBUG is True then the static url will be 'css/theme.css' instead of
'css/theme.afeb1fc222a9.css'
Three of my Django apps have static files with the same name app1/static/css/mycss.css, app2/static/css/mycss.css, app3/static/css/mycss.css. How do I collect them all to STATIC_ROOT since default behavior of DJango is to collect only the first one encountered among the same named static file?
If you don't want the static files to be getting in each others way, give them their own name space by creating a suitable folder structure. Example
app1/static/css/app1/mycss.css
app2/static/css/app2/mycss.css
Alternatively if you want to combine all the CSS into one big CSS look into django-compressor
In our Django project we are using Gulp to compile our assets, then UglifyJS to minify them. During this whole process we are generating sourcemaps, which appear to be working correctly.
The problem comes when we use the Django static template tag to include our minified files. Say we have a minified JS file called ourapp.min.js. In our template we would write:
<script src="{% static 'ourapp.min.js %}"></script>
which would be compiled into something like:
<script src="/ourstaticroot/ourapp.min.0123456789ab.js"></script>
(where 0123456789ab is a hash of the file contents)
The problem now is that, although the file has been renamed, our sourcemap still points to the old filename, so suddenly becomes invalid. If we then need to debug this page (say, using Sentry) it cannot find the source file and we are left to debug the uglified file instead, which becomes much more of a task.
Does anyone know of a good way to get around this? We would like to continue using Gulp for our assets, and also continue using the hashed filenames, as this prevents issues caused by caching of stale asset files.
it does not really matter, since the original files are being kept. So if your file points to a map without a hash it should be served by Django. Of course you need to be careful with long term expiration headers. Should you be using whitenoise are are fine, since they handle expiration properly and long term expiration headers are only set on hashed files.
Cheers
-Joe
I see two options available to you. It's not clear where exactly the cache busting suffix gets added to your files, but at that point you could:
Use some string processing, to manipulate the assets and set their sourceMapUrl with a url that is generated by your system and includes the expected suffix //# sourceMappingURL=/path/to/file.js.<suffix>.map. This could be a simple bash command in a gulp step (if that's where it happens)
Alternatively, browsers will also accept an http header SourceMap: /path/to/file.js.map which you could instruct your asset server to set for files with headers. This may be more difficult depending on your infrastructure.
I want to insert an image into my template. The image resides in the same folder as the template.
I tried:
<img src = "imageName.png" />
but for some reason, this wouldn't work.
Does anyone have an idea why that is?
Don't put images in the same folder as templates. Images are a part of static content. You should read about managing static files in django.
Hope that helps.
I'm guessing you're new to the whole django scene, so don't be afraid to hit a few boulders on the way. In fact, this is a problem that I faced too, since I just usually put everything on a web-server, with an index.php file (yes, the horror), and everything was just relative.
So, let me give you a little context, what you are trying to embed on a page is called a static file. What that basically means is a file that does not change, a file that is not dynamic. Now, since these static files require no processing, they are treated specially, and are put inside a static folder. You can see where your static folder is when you check your main settings.py file.
Now often, people make a lot of mistakes with static files, because there are so many variables that have a STATIC infront of them. I know, its totally counter-intuitive, but there are reasons why they're there. So, let me direct you to something that can be a little help in understanding this whole fiasco.
When using static files, you usually use a few special tags. You can learn more about them here. But, I'll just show you how you would embed your image into your html, just as a sample.
{% load staticfiles %}
<img src="{% static "images/myphoto.png" %}"/>
So, how should your directory look like? Well, what you would have is something like this
STATIC_FILES_FOLDER > IMAGES > myphoto.png
Hope that helps.
Im building a web app which will be part of an existing static website. I'd prefer to use the header and footer from the current site which are static .inc include files.
Is there a way to include these files something like:
{% include 'http://www.mysote.com/inc/footer.inc' %}
There isn't a built-in way to do this in Django, but it would be a really easy template tag to write on your own (there's a decent chance someone has already written such a thing, though a quick search didn't turn it up for me). If you want to go that route, you can do that with a quick simple_tag (documented here: https://docs.djangoproject.com/en/1.3/howto/custom-template-tags/#shortcut-for-simple-tags). It could probably be as simple as something like:
def include_external(url):
import urllib2
return urllib2.urlopen(url).read()
register.simple_tag(include_external)
{% include_external 'http://....' %}
However, as Umang mentioned, that is potentially problematic--fetching that include file will probably significantly increase your page load time, and you'll guarantee that a failure in your static site will bring down your Django app as well. If either of those things turns out do be a concern, you could look at caching the header--however, that's adding additional complexity, and you might be better of just copying your header file over each time it's updated.