Im working on the comment section of my page and found a useful website with this https://blog.miguelgrinberg.com/post/implementing-user-comments-with-sqlalchemy. The problem i am having is representing the comments on the website. How to i display nested comments in the same manner as shown in the link above using the flask code below.
for comment in Comment.query.order_by(Comment.path):
print('{}{}: {}'.format(' ' * comment.level(), comment.author, comment.text))
In other words: how would the above segment look as jinja code.
{% for comment in comments %]
.
.
.
{% endfor %}
If there is another way to do it, i'm all ears. Thanks.
Here i am after some research and successful completion of my comment section to answer my own question. To get this effect do this below
{% for comment in all_comments %}
<div class="row">
{% if comment.comment_level == 0 %}
<div class="col-lg-12 ">
{% elif comment.comment_level == 1 %}
<div class="col-lg-1 "></div>
<div class="col-lg-11">
{% elif comment.comment_level == 2 %}
<div class="col-lg-2 c"></div>
<div class="col-lg-10 ">
{% elif comment.comment_level == 3 %}
<div class="col-lg-3 "></div>
<div class="col-lg-9 ">
{% else %}
<div class="col-lg-4 "></div>
<div class="col-lg-8 ">
{% endif %}
<div>
<p>{{comment.text}}</p>
</div>
This will create the step ladder effect you see in comment section. This is a flask solution. I'm sure you can replicate it in other languages.
Related
I am currently working with Python Flask and Bootstrap.
I am looking to get it so that if there are 4 cards in one row, it will automatically create a new row.
Issue i am having just now is the more posts I have the longer and thinner the rows cards get.
Current code:
{% extends "base.html" %}
{% block content %}
<div class="card-deck">
{# Go through each forum post #}
{% for post in forum_posts.items %}
<div class="card">
<div class="card-body">
<span class="badge badge-info">{{ post.cat }}</span>
<h3 class="card-title"><a class="card-title"
href="{{ url_for('forum_posts.view_post', forum_post_id=post.id) }}">{{ post.title }}</a>
</h3>
<h6 class="card-subtitle mb-2 text-muted">Written by: {{ post.author.username }}</h6>
<p>{{ post.text[:100] }}...</p>
</div>
<div class="card-footer">
<a href="{{ url_for('forum_posts.view_post', forum_post_id=post.id) }}"
class="btn btn-primary">Read
Blog Post</a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
You could code this on the python side so that it makes it easier in jinja2, using an array of arrays:
>>> arr = [0,1,2,3,4,.....,102]
>>> forum_posts.items = []
>>> for i in range(int(len(arr)/4)):
j = i * 4
forum_posts.items.append([arr[j], arr[j+1], arr[j+2], arr[j+3]])
# needs an error trap for IndexError on 103
Then in jinja2: you can double loop:
{% for row in forum_posts.items %}
{% for item in row %}
{# HTML here for a new row of at most 4 cards #}
There is a way of doing the same kind of thing in jinja2 using variable loop counters and setting new row HTML if for example the new loop index is an exact multiple of 4:
{% for i, post in enumerate(forum_posts.items) %}
{% if i % 4 == 0 %}
{# new row code #}
{% else %}
{# regular row code %}
{% endif %}
{% endfor %}
Here i have attached screenshot,in that 2nd section 2 rows are present. i need to display only one row with custom code condition, If i disable from admin side,it will work correctly,but i need loop condition for enable and disable to display only row. Here is my code,
<div class="col-md-12" >{% for module in modules %}<div class="img-responsive">
{{ module }}
{% endfor %}</div></div>
</div>
There's special loop variables inside a loop that let's you keep track of index and more. In your case loop.index.
<div class="col-md-12" >
{% for module in modules %}
<div class="img-responsive">
{# Replace 1 with a specific index you want to use as condition #}
{% if loop.index == 1 %}
{{ module }}
{% else %}
No module
{% endif %}
</div>
{% endfor %}
</div>
Often i need to do some tricky layout on dynamic elements like galleries.
Here's one example:
<ul>
<li class="slide">
<img src="img_01.jpg">
<img src="img_02.jpg">
</li>
<li class="slide">
<img src="img_03.jpg">
<img src="img_04.jpg">
</li>
<li class="slide">
<img src="img_05.jpg">
<img src="img_06.jpg">
</li>
</ul>
I've managed to do it with the following snippet. But i wanted some suggestions if possible about how to make it more flexible or more simple, like grouping by any number. Maybe using cycle() or any other method. I was getting strange results using the slice() or array[1:2] notation.
<ul>
{% for image in gallery %}
{% set current = loop.index %}
{% set next = current + 1 %}
{% if current is odd %}
<li class="slide">
{% for image in gallery %}
{% if loop.index in [current,next] %}
{% set th = TimberImage(image) %}
<img src="{{th.src}}">
{% endif %}
{% endfor %}
</li>
{% endif %}
{% endfor %}
</ul>
Any suggestions are welcomed.
Timber becomes very handy for quick in and out fixes with Timber::compile or custom themes with full routing. The purpose of the question is to create some snippet that can be reused.
Kudos to creators.
https://github.com/timber/timber
You can approach with the rest of the division with the following code (Here a working solutions):
{# number of element for every section #}
{% set section = 2%}
<ul>
{% for image in gallery %}
{% if loop.index % section == 1 %}
<li class="slide">
{% endif %}
{% set th = TimberImage(image) %}
<img src="{{th.src}}">
{% if loop.index % section == 0 or loop.last %}
</li>
{% endif %}
{% endfor %}
</ul>
You can easily reuse this code making a Twig macro using as parameter the gallery and the number of element for section (highlighted with the variable section
Here's the final result taking the suggestion of #Matteo for a macro:
https://gist.github.com/lithiumlab/5ee0454b0a77b1cc26fc0ce8ba52fd80
views/single.twig:
{% import 'utils.twig' as utils %}
{{utils.group_collection(gallery,3)}}
views/utils.twig:
{% macro group_collection(collection, groupby) %}
{% set section = groupby|default(2) %}
<ul>
{% for element in collection %}
{% if loop.index % section == 1 %}
<li class="group">
{% endif %}
{% set th = TimberImage(element) %}
<img src="{{th.src}}">
{% if loop.index % section == 0 or loop.last %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endmacro %}
Trying to edit a particle in Joomla -- I'm fairly new to twig and I'm trying to list information based on a selection in vertical tabs. I have an on-click refresh for my li edit that makes a tab "selected" and creates my internal url:
{% for item in particle.items %}
<li>
<a href="/Joomla/about-the-library/locations#{{ loop.index }}">{{ item.title|e }}
<img src="{{ url(item.image)|e }}" alt="{{ item.title|e }}">
<div class="g-flexslider-carousel-item-image-preview-icon"></div>
</a>
</li>
{% endfor %}
This is all well and good, but I ran into an issue when trying to display the data associated with the selected item. I tried to create a variable to check my items against, but the variable doesn't seem to be coming back as an integer, and I've tried a few things:
{% set branch = app.request.pathinfo|trim('/Joomla/about-the-library/locations#') %}
{% if loop.index == branch %}
<div class="g-flexslider-showcase-item-content-container">
<div class="g-flexslider-showcase-item-image">
<img src="{{ url(item.image)|e }}" alt="{{ item.title|e }}">
</div>
Can anyone tell me what I'm doing incorrectly?
(I found that get current url in twig template? helped, but I'm not sure I'm using the answers provided correctly. I've also sifted through the Twig Documentation for a couple hours to no avail.)
[Nov 2016] - This is still what "my" code looks like for this section. It seems to just be a problem with this if statement, as the "else" statement (which I'm using for debugging purposes) keeps coming through.
{% for item in particle.items %}
{% if app.request.get('name') == item.URLname|e %}
<p>You have branched {{ item.title|e }} correctly. </p>
I was wondering if it is possible to create some sort of condition which can be used on 3 different places in a template with Twig.
Let's say I have 3 slider images with a link. A user of the template has the option to choose between a button link or a normal link via a dropdown menu. Like so (below is only the first slider):
{% if theme.slide1 %}
<li class="animate-in f1">
<div class="wrap">
{{ 'Read more' | t }}
</div>
</li>
{% endif %}
{% if theme.slide2 %}
<li class="animate-in f2">
<div class="wrap">
{{ 'Read more' | t }}
</div>
</li>
{% endif %}
Normally you would do something like:
{% if theme.slide1_link_setting == 'Link' %} do this {% else %} do that {% endif %}
You have to do this 3 times if you have 3 slider images. But what if you have eg. 10 slider images?
I tried to create a function which checks if a setting is a button or normal link.
{% set link_style = theme.slide1_link in ['link', 'button'] ? 'normal-link': 'btn btn-custom-2 btn-sequence' %}
First of all the function above doesn't work.
Second I don't know how to set the number of the slide you're in. I want something like below:
{% set link_style = theme.slide[numberOfSlide]_link in ['link', 'button'] ? 'normal-link': 'btn btn-custom-2 btn-sequence' %}
Is there anybody who can help me with this?