I've written my first angular app for handling a rather complex multi-file upload process within a Django app. Everything is working great and I'm loving Angular. However, I stumbled on a simple problem referencing image sources. It's not critical for my app, but I wanted to add a simple spinner/whirligig image while the files are uploading.
In my non-Angular Django templates this is dead simple:
<img src='{% static 'whirligig.gif' %}'>
This doesn't work inside Angular views due to the Angular/Django template syntax conflict. Of course, I can hard-code my Django STATIC_URL path or use a relative path from the Angular partial, but I'd prefer not to. Am I missing something simple here or is this just an unfortunate product of mixing two MVC frameworks?
Have you tried verbatim tag?
I guess you can do something like:
{% verbatim %}{{ {% endberbatim %}{% static 'whirligig.gif' %}{% verbatim %} }}{% endverbatim %}
Related
I use django template index.html to render the frontpage. It includes another template to create a link icon. This template url_icon.html includes another template icon.html. When passing the arguments down the way, I face with an error. How to fix it?
index.html
.
.
.
{% include "url_icon.html" with name="return" url="/" %}
.
.
.
url_icon.html
{% include "icon.html" with icon={{ name }} %}
icon.html
<img src="/static/images/{{ name }}.png" />
Causing an error:
Could not parse the remainder: '{{' from '{{'
it looks like there are a few things you can do to improve/fix this. Addressing #1 and #2 should fix your issue. I've also added suggestions for best practices that would probably require refactoring (#3, #4).
It looks like you need to remove the curly-braces from name inside the {% include %} tag. Context variables can be used inside tags without extra syntax.
url_icon.html:
{% include "icon.html" with icon=name %}
icon.html will have access to name since you're not using the only keyword when updating its context, so your code might appear to work at first ({% include %} documentation). However, it looks like your intention is to refer to it as icon.
Use the variable icon in instead of name
icon.html:
<img src="/static/images/{{ icon }}.png" />
Optional suggestion: Use Django's staticfiles system
Try using the {% static %} tag for your icon. This will help make deployment easier, especially if you use a separate CDN from your webserver. There's lots of literature on how to set up staticfiles for Django projects in production, it's a large topic, but you'll be able to approach it more easily if you use the {% static %} tag from the beginning.
Optional suggestion: Django's URL routing system
Your route in index.html is hard-coded to be "/". Django has a powerful URL referencing system to leverage. If you've defined the root URL / using Django too, you can refer to it by name. Docs: {% url %}, and for the back-end, reverse().
This question already has an answer here:
Using a Django template_tag on pages that extend from the view that loads the tag
(1 answer)
Closed 6 years ago.
I'm making a website with django and rest framework and I found myself copying and pasting a lot of the same code on every page. I learned about creating a base.html and adding {% extends 'app/base.html' %} from http://tutorial.djangogirls.org/en/template_extending/. This worked great for most of my pages but I am having issues with 2 pages that have different forms (but I get the same error for all the forms). The error is:
TemplateSyntaxError at /boards/: Invalid filter: 'attr'
error during template rendering in template boards.html, error at line 30
I am confused because when I get rid of the {% extends 'app/base.html' %} and just copy the head of base.html into this other page, it works fine. The headers of the 2 are identical but something within the forms breaks when I try to use the base template. Its kind of a lot of code to include so I'm not going to include it unless requested. But hopefully someone has an idea of what the issue could be without seeing my code?
I guess it may be relevant to include that I am using django-widget-tweaks with my forms. I'm not sure if that is at all related to the problem.
Turns out the issue was actually with django-widget-tweaks! I had {% load i18n widget_tweaks %} only in base.html but I also had to add it to the individual pages (I am still not really sure why, but it worked). So each template that extends base.html and that has a form on it looks like:
{% extends 'app/base.html' %}
{% load i18n widget_tweaks %}
{% block content %}
....
{% endblock %}
Apparently just loading widget tweaks in the base doesn't cut it, see the comments for why not.
I have a Django website that I'm trying to get internationalized. The image files are all encoded with the language code of two letters. So when a user switches the language, the references to image files are updated with the language code in templates as follows:
<img src="{% static 'website/images/contact_us_{{ LANGUAGE_CODE }}.png' %}">
Problem is, I have to have a tag as well for the path of static content. What is an elegant way to solve this?
Per #MarAja suggestion, I followed his/her question and solution here which was practically identical to mine. I'm posting what I did, so whoever that lands on this page has a solution. During my research, I did not stumble upon #MarAja's post.
The code is an exact copy, and the choice not to use add tag is because according to the Django documentation, it tries to cast the arguments to an int i.e. not intended for strings.
Full code:
# Custom Template tag file named "custom_app_tags.py"
from django import template
register = template.Library()
#register.filter
def addstr(s1, s2):
return str(s1) + str(s2)
Finally, usage:
{% load staticfiles %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% load custom_app_tags %}
<img src="{% static 'website/images/contact_us_'|addstr:LANGUAGE_CODE|addstr:'.png' %}">
Note, I included everything so that whomever gets here later, gets a complete picture of what is going on.
Ok very weird issue here.
In the base.html file for the admin site they have this:
<script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% static "admin/" %}{% endfilter %}";</script>
The important part is this {% static "admin/" %}. Its only used for a handful of things in javascript, one of them being the calendar icon url for the date widget.
Locally this works just fine, and the url ends up being /static/admin/. However on production, it ends up as http://myaws.s3.address/admin with no trailing slash.
I can't figure out for the life of me how this might happen. This is Django 1.4. My STATIC_URL for aws ends with a trailing slash. This has got to be in the staticfiles app somewhere right? I'm not sure how to track this one down.
GAH!
Found the problem. Its a bug in django storages (s3 specifically):
http://code.larlet.fr/django-storages/issue/121/s3boto-admin-prefix-issue-with-django-14
I think I'm missing a basic concept here. In the stereotypical Django project, you'd have two apps responding to different urls:
http://localhost/myproj/app1/33
http://localhost/myproj/app2/newcomment.html
But what mechanisms exist to handle cases where the two apps are complementary - say one provides content, and the other provides presentation? Or maybe one is content and the other is a kind of static, side-wide content that should appear on every page.
In particular, I don't understand how both apps can use template inheritance to extend the same template. Imagine there's a base app "baseapp" with a template "base.html":
...
<div blah blah>
{% block content %}
{% endblock %}
...
App1 extends it:
{% extends "baseapp/templates/base.html" %}
{% block content %}
... here's the actual content...
{% endblock %}
App2 adds a little banner or something:
{% extends "baseapp/templates/base.html" %}
{% block content %}
<div class="banner">Please support our site!</div>
{{ block.super }}
{% endblock %}
So what are the ways that both templates can get displayed? I can think of:
app1 could extend app2's templates. But this seems wrong: app1 is the content provider, and shouldn't be dependent on something as trivial as app2.
app2 could extend app1's templates. But this seems wrong: now the URL scheme would have to funnel every URL through app2 (if I understand correctly)
middleware?
As I said, I'm probably missing something very basic. Or I'm making some very faulty assumptions that I don't know about. (This question is my third attempt, after Embed an optional Django application in another page, if that app is present and How to capture and display information external to my webapp, but relevant to users of it? - I'm having trouble framing the issue.)
App doesn't respond to an URL, a view does. View is a function that can use models, forms and other object from any app. There isn't any problem here.
If you want to add something to template, inheritance isn't the only way. You'd better use custom context processor or custom template tag.
I think what I was actually missing here:
Apps can override templates just by including a template of the right name in the right subdirectory. The Django docs don't make this very clear, that I can see: they refer to this functionality in the context of Admin templates
When overriding a template as above, you can't extend it, but:
This snippet lets you both override a template and extend it: http://djangosnippets.org/snippets/1376/
Here's a closely related question: Django: Overriding AND extending an app template