Django: making {% block "div" %} conditional with a conditional {% extends %} - javascript

I would like to share a template between AJAX and regualr HTTP calls, the only difference is that one template needs to extend base.html html, while the other dose not.
I can use
{% extends request.is_ajax|yesno:"app/base_ajax.html,app/base.html" %}
To dynamically decide when to extend, but I also need to include {% block 'some_div' %}{% endbock %} tags to tell the renderer where to put my content. The ajax call needs those tags to be left out because jQuery tells it where to put the content with $('somediv').html(response).
Any idea on how to dynamically include those block tags when its not an ajax call?
I've been referencing this question to figure it out:
Any way to make {% extends '...' %} conditional? - Django
Attempt to make it work through an {% if %}:
{% extends request.is_ajax|yesno:",stamped/home.html" %}
{% if request.is_ajax == False%}
{% block results %}
{% endif %}
{% load stamped_custom_tags %}
...
Content
...
{% if request.is_ajax == False%}
{% endblock %}
{% endif %}
but this fails when parser runs into the {% endif %}

Wouldn't this, or some variant, do?
{% if request.is_ajax %}
{# ajax! #}
{% else %}
{% block 'some_div' %}{% endbock %}
{% endif %}

My Solution:
{% extends x|yesno:"stamped/blank.html,stamped/home.html" %}
Where blank.html contains:
{% block results %}{% endblock %}
<!-- to allow for corrected shared rendering
with ajax posts and normal django rendering -->
and home.html is my standard app page with a results block to extend.

Related

HTML if else condition for printing items in list

I'm making a website with flask, and I pass in a list. My .html file has this code:
{$ for file in list %}
<div>
<img ... > </img>
</div>
{% endfor %}
Now if list.length == 0 I want it to just do something like
<h2> Error </h2>
instead. How do I make an if statement to check if the list is empty, and if it is then I print error on the website, if it is not, I print the images in the list. I tried to put:
<script>
if(list.length==0){
<h2>Error</h2>
}
else{
"the for loop stuff"
}
</script>
but this does not work.
THanks
In Flask with Jinja2 as a template engine, the if-else syntax requires you to write the following statement
{% if mylist.length == 0 %}
<div>error</div>
{% else %}
<!-- loop -->
{% endif %}
Note: Since list is a Python keyword i suggest you to use another name for your list in order to avoid possible conflicts.
In this pythonprogramming page about flask 7, you will find some example code and a video. The example shows an if-else statement:
{% for post in posts %}
<h3> {{ post.title }}</h3>
<p>{{ post.body }}</p>
{% if author %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.author }} </span>
{% endif %}
{% if date %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.date }}</span>
{% endif %}
{% endfor %}
I decided to post my answer to share this learning resource because I have noted that the example does not use any <script> tag (not sure if it helps).
The comparison operator is almost the same everywhere as you can see in both the Python and Jinja references.
Therefore, the equivalent for your code would be:
{% if list.length == 0 %}
...
{% endif %}

Webpack Encore not loading JavaScript in base template

I am using a Webpack Encore in my Symfony 4 project, and when including the Twig helper for JavaScript in my base.html.twig:
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
The JavaScript doesn't load, however, when including the exact same Twig helper in one of my templates (index.html.twig), the JavaScript loads in.
So my question is, why does the above Twig helper work in one of my templates, but not in my base template?
What preciel said is true, using a block inside a template that extends another template will overwrite the default code inside that said block.
However there is another solution than just moving the code outside the block in the base template and that's calling the parent() function
main.twig
{% extends 'base.twig' %}
{% block foo %}
{{ parent() }}
Bar
{% endblock %}
base.twig
{% block foo %}
Foo
{% endblock %}
output
Foo
Bar
demo
It's failing because it's inside your javascript block.
Your template extends base.html.twig, so whatever you place within your javascript block in any template will be inside the javascript block.
But if you do the same within base.html.twig it will just be ignored.
Just move {{ encore_entry_script_tags('app') }} out of your javascript block.
base.html.twig
{{ encore_entry_script_tags('app') }}
{% block javascripts %}
{# nothing here, your templates will overwrite it when you extends base.html.twig #}
{% endblock %}
Remember this: If it's inside your layout, which is base.html.twig, then don't place anything inside the {% block %} tags. It will just be ignored.

How to cut twig correctly

I apologize if the question was raised somewhere, and I did not notice the decision.
I have the following files:
base.html.twig - which includes css и js.
blocks.html.twig - which includes blocks.
en.html.twig
sp.html.twig
ru.html.twig
blocks.html.twig
<h1>hello</h1>
<h2>holla</h2>
<h3>привет</h3>
Please tell me how to initialize the object (for example blocksLang and each h* block to place in this object), for including in different places. For example:
in en.html.twig
{% extends "base.html.twig" %}
{% include "blocks.html.twig" blocksLang.en %} //and it should render <h1>hello</h1>
in sp.html.twig
{% extends "base.html.twig" %}
{% include "blocks.html.twig" blocksLang.sp %} //and it should render <h2>holla</h2>
in ru.html.twig
{% extends "base.html.twig" %}
{% include "blocks.html.twig" blocksLang.ru %} //and it should render <h3>привет</h3>
Thank you for attention

Pass javascript code to base template in Twig using Symfony and Fragments

I am using Symfony and Twig and the fragment sub-framework more specifically the Internal sub-requests.
In any case when I request a template using a fragment include
{% render url('route_name') %}
and my fragment code looks like this for example
<div>[code here...]</div>
<script>[javascript here...]</script>
how can I get this javascript to load into a {% block %} in my base.html.twig file? If I extend my fragment and put {% extends '::base.html.twig' %} in the header it will include the entire layout of my site. I just want to be able to push the javascript from from fragment out to my base template.
In my base template I have a {% block %} such as this
{% block javascript_footer %}
[it inherits javascript from child templates...]
{% endblock %}
Thanks!
separate your javascript into another file and than include it into your base template and also into your fragment.
base template:
{% block javascript_footer %}
{% include '::javascript.html.twig' %}
{% endblock %}
your fragment:
<script>{% include '::javascript.html.twig' %}</script>
assuming that javascript.html.twig doesnt include <script> tag already

how to detect screen size or mobile/desktop using twig

I am currently using twig as my templating engine and I wanted to load different url of an image when the site is loaded using mobile vs desktop. Is there an easy way to do this?
So I wanted to do something like this:
{% if (mobile) %}
<img src="{{ picture.getLowresimageurl() }}"/>
{% else %}
<img src="{{ picture.getMedresimageurl() }}"/>
{% endif %}
is there a way to do this?
You can use MobileDetectBundle for detecting mobile devices, manage mobile view and redirect to the mobile and tablet version
Twig Helper
{% if is_mobile() %}
{% if is_tablet() %}
{% if is_device('iphone') %} # magic methods is[...]
Twig examples
{% if is_mobile_view() %}
{% extends "MyBundle:Layout:mobile.html.twig" %}
{% else if is_tablet_view() %}
{% extends "MyBundle:Layout:tablet.html.twig" %}
{% else if is_full_view() or is_not_mobile_view() %}
{% extends "MyBundle:Layout:full.html.twig" %}
{% endif %}

Categories

Resources