How to write something with a mustache in Django - django

I'm trying to implement a website with AMP using Django technology, everything was okay just I want to make the change pagination without load the whole page so I need to use amp-list, the problem is when I start using it I get a problem.
I will explain a little bit about amp-list, to fetch data using amp-list we need to use some tag like the tags that exist on Django like {{#posts}} and {{slug}}, so the problem Django thinks those are variables.
a small example:
<amp-list width="auto" height="100" layout="fixed-height" src="myUrl" [src]="myUrl + pageNumber">
<template type="amp-mustache">
{{#posts}}
<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>
{{/posts}}
</template>
</amp-list>
I have tried with some ways like put these in a variable and call it on the template but I get the same error. I wonder if there is a way that I can use those tags, I think there is something that let you write mustache in the Django template.

You can make use of a {% verbatim %}…{% endverbatim %} template block [Django-doc] to disable interpreting tokens such as {{ and }}.
If you thus do not want to interpret parts like {{#posts}}, {{title}}, etc. then you can surround this with a verbatim block:
{% verbatim %}
<amp-list width="auto" height="100" layout="fixed-height" src="myUrl" [src]="myUrl + pageNumber">
<template type="amp-mustache">
{{#posts}}
<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>
{{/posts}}
</template>
</amp-list>
{% endverbatim %}

Related

Check if image exists in Django template

I currently have a template that loops through a list of URLS, like so.
{% for i in images %}
<div class="col">
<p><img height="200" src="{{i}}"/></p>
<p>{{i|cut:"/uploads/"|truncatechars:20}}</p>
</div>
{% endfor %}
The issue is at the time of rendering some of the images are not done processing. So how would I check if the image is available via the url?
You'd have to make a custom tag or filter that evaluated the availability and sanity of the data. Perhaps using requests & pillow's .verify().
For a static "solution" you can provide a CSS fallback to your HTML img.

Repeating HTML blocks in Django

Not sure what technical term it is I'm looking for, but I have a set of HTML elements that are repeated and wondering if there is an easy way to do this.
Very simplified HTML, if I have the following:
<div class='container'>
{{ django.dataFromORM }}
</div>
I need to add to base.html in a certain section
<div id='main-container'>
all elements go here
</div>
So on run, I want to add the generated HTML the main-container. I've done this before by building in JS, but wondering if there is a way to smoothly do this in Django?
I looked at templates and partials, but not sure that's the proper way or not?
You can use include in template to include your repeated html file.
ie
<div id='main-container'>
{% include "container.html" %}
</div>
if you want to repeat it several times you can add it inside a for loop
eg:
{% for element in elements %}
{% include "container.html" %}
{% endfor %}

Django templates - can you pass arguments to template tags *args style?

I am trying to implement some breadcrumbs in my templates.
I some view urls take one argument and others two.
url(r'^firstpage/(?P<arg_one>(option1|option2))/(?P<unique_identidfier>[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890\-_]+)/', views.MyView.as_view(), name="two_arg_view"),
url(r'^secondpage/(?P<unique_identidfier>[ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890\-_]+)/', views.MySecondView.as_view(), name="one_arg_view),
I would like to pass in an array of breadcrumbs to via get_context_data, then loop over them in the template:
<div class="breadcrumbs">
{%for crumb in breadcrumbs %}
<a href="{% url crumb.url arg1 optional_arg2 %}" >{{ crumb.text }}</a> >
{% endfor %}
{{ current_page }}
</div>
Is there a way I can pass an optional number of arguments to the url template tag?
In the same way you might when calling something with *args?
What I want to do (but doesn't work) is:
<a href="{% url crumb.url *crumb.args %}" >{{ crumb.text }}</a> >
An inclusion tag will most likely do what you're looking for.
Inclusion tags can accept the current template context and you can retrieve your view values from there instead of having to manually pass them in. By including a template that contains the div, anchor tag, etc, you keep your templates simple:
{% tag_url %}
instead of having to repeat a bunch of conditional statements and loops.
I wouldn't recommend doing this sort of logic in a view, as it's not encapsulated or re-usable.

Detecting a URL in a Django wizard_form.html template

I have three SurveyWizardViews all of which use the same standard wizard_form.html which is located at templates/formtools/wizard/wizard_form.html as per the documentation
I have added some basic logic to this template which is designed to detect which page of the form the user is on so that I can include a non standard page/step, this is an image with a JS slider bar underneath. This all works perfectly.
{% if wizard.steps.current == '6' %}
<img src="{% static "survey/images/pathtwo/" %}{{display_image}}"/>
<section>
<span class="tooltip"></span>
<div id="slider"></div>
<span class="volume"></span>
</section>
{% endif %}
However I now want to have a slightly different experience for the user depending on which View/URL they are coming from.
Question Is it possible to detect which URL the view is currently using to look at the page? e.g.
{% if URL.current == 'www.mywebsite.com/experiment/surveyone/' %}
do X
{% if URL.current == 'www.mywebsite.com/experiment/surveytwo/' %}
do y
I have done some searching but Im not even sure what I'm searching for to be honest. Any help would be much appreciated.
You can use the request context variable. Something like:
{% if 'experiment/surveyone' in request.path %}
do this
{% endif %}
I prefer using in instead of == to ignore trailing and leading slashes. If you want the whole thing try the build_absolute_uri method. Also check what options does request offer to you (https://docs.djangoproject.com/en/dev/ref/request-response/#httprequest-objects).
Finally, don't forget to add django.core.context_processors.request to your TEMPLATE_CONTEXT_PROCESSORS (I think it is added by default).

How to test for use of a django template block?

I would like to do the following:
{% if appnav %}
<hr />
<div id="appnav">
<ul class="tabs">
{% block appnav %}{% endblock %}
</ul>
</div>
{% endif %}
...however, testing for the present use of a block by templates further down the inheritance chain does not seem to work.
Is there some other conditional that might do this?
The template language doesn't provide exactly what you're looking for. Child templates can call the parent block with {{ block.super }}, but parent templates can't reference child templates.
Your best bet will probably be to write a custom template tag. There are two sections in the template manual to review.
First, Parsing until another block tag. This will give you the basics of how to parse.
Second, Parsing until another block tag and saving contents. By placing a block tag inside the custom tag, you could detect content and wrap it as appropriate. This should work, because I believe the inner block tag will be parsed first. If that doesn't work, subclass the existing block template tag provided by django to implement your special magic.
If you you are looking for an easy solution. You can hide the element as the default html.
<div id="appnav">
<ul class="tabs">
{% block appnav %}
<script>document.getElementById("appnav").style.display = "none"</script>
{% endblock %}
</ul>
</div>