turl1, turl2...ourl1, ourl2 are context variables (all strings) I am returning from view.
{% for i in "1234" %}
<div class="spot">
{% with t="turl"|add:i %}
{% with o="ourl"|add:i %}
<a href= {{ o }}">
<img src={{ t }}>
</a>
{% endwith %}
{% endwith %}
</div>
{% endfor %}
Right now I am getting this:
<a href="ourl1">
<img src="turl1">
</a>
...
while ourl1 and turl1 should evaluate to url but it's not.
You should remove quotes in lines:
{% with t=turl1 %}
{% with o=ourl1 %}
If you want to iterate over it, you should pass in two arrays from your view.
{'urls': [[turl1, ourl1], [turl2, ourl2]]}
Then iterate over it in your template:
{% for t, o in urls %}
<a href="{{ o }}">
<img src="{{ t }}"/>
</a>
{% endfor %}
If turl1, turl2...ourl1, ourl2 are context variables then in the django templates you need to put them between { ... }
Related
I'm trying to create a navigation menu, that when the number of objects within the menu is even puts an image between the two halves of the menu. Here is the code that I tried to use within my menu model and templates to create the effect.
"""Splitting the menu in half for the frontend."""
#property
def is_even(self):
if (self.objects.count() % 2) == 0:
return True
else:
return False
#property
def find_halves(self):
first_half = self.objects[0:self.objects.count()/2]
second_half = self.objects[self.objects.count()/2:self.objects.count()]
return first_half, second_half
<nav class="main-nav">
{% image navigation.logo fill-115x115 as logo %}
<ul class="nav-links">
{% if navigation.is_even %}
{% for item in navigation.menu_items.first_half.all %}
<li><a href="{{ item.link }}" {% if item.open_in_new_tab %} target="_blank" {% endif %}>{{ item.title }}</a></li>
{% endfor %}
<img src="{{ logo.url }}" alt="CCCR Logo" class="logo">
{% for item in navigation.menu_items.second_half.all %}
<li><a href="{{ item.link }}" {% if item.open_in_new_tab %} target="_blank" {% endif %}>{{ item.title }}</a></li>
{% endfor %}
{% else %}
<img src="{{ logo.url }}" alt="CCCR Logo" class="logo">
{% for item in navigation.menu_items.all %}
<li><a href="{{ item.link }}" {% if item.open_in_new_tab %} target="_blank" {% endif %}>{{ item.title }}</a></li>
{% endfor %}
{% endif %}
</ul>
</nav>
However, when I run the code it goes to the else statement even though I have six menu items in the wagtail admin.
For an item like this that is related to what users see, I would suggest using the Django template tag divisibleby: https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#divisibleby
So maybe something like this:
{% if navigation.menu_items.count|divisibleby:"2" %}
You might also find the cycle template tag useful. It might let you do what you want layout-wise by alternating the placement of a class on odd and even items.
I am trying to figure out how to display tags belonging to an article created within Aldryn NewsBlog plugin. Unfortunately, I cannot find any documentation on how do it.
I was able to display categories using the following code.
<span style="margin: 0; display: block">
<h4 style="display:inline-flex">Categories:</h4>
{% for category in article.categories.all %}
{{ category.name }} {% if not forloop.last %}, {% endif %}
{% endfor %}
</span>
For tags, I am using this code:
<span style="margin: 0; padding-bottom: 0; display: block">
<h4 style="display:inline-flex">Tags:</h4>
{% for tag in article.tag %}
{{ tag.name }} {% if not forloop.last %}, {% endif %}
{% endfor %}
</span>
What am I doing wrong? Could anyone tell me how to display tags?
this is the official tags template of aldryn-newsblog, it worked for me:
{% load i18n apphooks_config_tags %}
<div class="aldryn aldryn-newsblog aldryn-newsblog-tags">
<ul class="list-unstyled">
<li{% if not newsblog_tag %} class="active"{% endif %}>
{% trans "All" %}
</li>
{% for tag in tags %}
<li{% if newsblog_tag.id == tag.id %} class="active"{% endif %}>
<a href="{% namespace_url "article-list-by-tag" tag.slug namespace=instance.app_config.namespace default='' %}">
{{ tag.name }}
<span class="badge">{{ tag.article_count }}</span>
</a>
</li>
{% endfor %}
</ul>
https://github.com/aldryn/aldryn-newsblog/blob/master/aldryn_newsblog/boilerplates/bootstrap3/templates/aldryn_newsblog/plugins/tags.html
you're right, that is what you're looking for, with article.tags.all:
{% if article.tags.exists %}
<ul style="margin-left: 0">
{% for tag in article.tags.all %}
<li class="tags">{{ tag.name }}</li>
{% if not forloop.last %}<span class="separator tags-separator">|</span> {% endif %}
{% endfor %}
</ul>
{% endif %}
I need to develop a web app using python flask and I need to add an image to the view page. But I couldn't get it.please help me out of it.
In the example below the image is stored in an SQLite database. From there you can do something like:
#app.route('/show')
def show_pic():
filename = request.args.get('filename','')
t = (filename,)
cur = g.db.execute('select label from pics where filename=?', t)
label = cur.fetchone()[0]
return render_template('upload.html', filename=filename, label=label)
And then in your template:
{% macro pic_path(pic) %}
{{ url_for('return_pic', filename='%s' % pic) }}
{% endmacro %}
{% block content %}
{% if filename is defined %}
<div id="image">
<a href="{{ pic_path(filename) }}" target="_blank">
<img class="new" src="{{ pic_path(filename) }}">
</a>
</div>
{% else %}
<ul>
{% for pic in pics %}
<li class="thumb">
<a href="{{ url_for('show_pic', filename=pic.filename) }}">
<img class="thumb" src="{{ pic_path('thumb_'+pic.filename) }}">
</a>
<strong>{{ pic.label }}</strong>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
I have following mezzanine tree.html
{% if page_branch_in_menu %}
<ul class="nav nav-list navlist-menu-level-{{ branch_level }}">
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or not page.is_primary %}
<li class="
{% if page.is_current %} active{% endif %}
{% if page.is_current_or_ascendant %} active-branch{% endif %}
" id="tree-menu-{{ page.html_id }}">
{{ page.title }}
{% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
In the base.html I have following block:
<div class="col-md-2 left">
{% block left_panel %}
<div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
{% endblock %}
</div>
The problem is that on some pages where the menu is empty the css styles are applied to the divs with empty menu lists and users can observe empty containers. In html it looks like:
<div class="col-md-2 left">
<div class="panel panel-default tree">
<ul class="nav nav-list navlist-menu-level-0"></ul>
</div>
</div>
I can hide the child ul with something like .nav:empty { display:none;} but the parent will still be visible. Here is the discussion about similar question: :empty selector for parent element
Is it possible to solve this problem with Mezzanine template tags?
{% if page_branch %} doesn't help because it's full of pages which are all not in_menu.
So better filter them before context.
menu_pages = page_branch.filter(in_menu=True)
Also you should put if block on top of div.tree
{% if menu_pages %}
<div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
{% endif %}
Another way is to write custom filter
{% with menu_pages=page_branch|filter_in_menu %}
{% if menu_pages %}
...
{% endif %}
{% endif %}
But there is no way to apply extra filter to queryset with built-in syntax or Mezzanine tags.
You could wrap the code with an if tag.
{% if page_branch %}
<ul>
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or not page.is_primary %}
<li>
{% if not page.is_primary %}
{{ page.title }}
{% endif %}
{% page_menu page %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
How do I display a group of 6 thumbnails in my template to create a filmstrip. The list i am iterating through a for loop has around 30 items i want to break it into chunks of 6 and show it as a filmstrip slider. I tried using the range function for the for loop but that doesnt work
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
{% for show in object_list %}
<li class="span2">
<div class="thumbnail">
<a href="{{ show.get_absolute_url }}" data-title="{{ show.name }}" >
{% if show.images.exists %}
{% with show.images.all.0.image as show_image %}
<img src="{% thumbnail show_image 160x160 crop %}" alt="{{show.name}}" class="thumbnail">
{% endwith %}
{% else %}
<img src="{% static 'img/default-image.gif' %}" alt="{{show.name}}" class="thumbnail">
{% endif %}
</a>
</div>
</li>
{%endfor%}
</ul>
</div>
If you want 1 carousel per 6 images then you could do it like this
Step 1) Create a new .html file in your templates folder called film-slider.html.
{% for reel in reels %}
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
{% for show in reel %}
<li class="span2">
<div class="thumbnail">
<a href="{{ show.get_absolute_url }}" data-title="{{ show.name }}" >
{% if show.images.exists %}
{% with show.images.all.0.image as show_image %}
<img src="{% thumbnail show_image 160x160 crop %}" alt="{{ show.name }}" class="thumbnail">
{% endwith %}
{% else %}
<img src="{% static 'img/default-image.gif' %}" alt="{{ show.name }}" class="thumbnail">
{% endif %}
</a>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
Step 2) In your templatetags/tags.py (create it if you haven't)
from django import template
register = template.Library()
def filmslider(reel):
reels = []
for i in range(0, len(reel), 6):
reels.append(reel[i:i+6])
return {'reels':reels}
register.inclusion_tag('film-slider.html')(filmslider)
This will make an inclusion tag that's available in your templates once you've loaded it via {% load tags %}.
This will make this work for you like this {% filmslider object_list %} which you will replace all the above html code that you posted with.
I haven't tested this but it should work, if in the future you want to have more functionality to this tag you can simply add arguments to the tag definition, I'll give an example.
def filmslider(reel, slides):
#do the code.
which will lead you to {% filmslider object_list 9 %} and voila, now you can extend your film reel from 6 slides to 9.
Hope this helps a bit!