Is there a way in twig to have a for every two loop? The best way I know to explain what I mean is to show you the result I'm looking for.
<div class="row"></div>
<div class="item"></div>
<div class="item"></div>
<div class="row"></div>
<div class="item"></div>
<div class="item"></div>
<div class="row"></div>
Is there some way to automatically put two items in a row div, and repeat that for as many items as are available?
A better solution would be to use the batch function in Twig which does exactly what you want.
Here is the code for your example:
{% for row in items|batch(2) %}
<div class="row">
{% for item in row %}
<div class="item">{{ item }}</div>
{% endfor %}
</div>
{% endfor %}
Your code snippet differs from what you are writing below it but I think this is what you want:
{% set columns = 2 %}
<div class="row">
{% for item in items %}
<div class="item">{{ item }}</div>
{% if loop.index % columns %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div>
I ended up using the suggestions from Markus Kottländer and DarkBee combined:
<div class="row">
{% for item in items %}
<div class="item">{{ item }}</div>
{% if loop.index is even %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div>
Related
can anyone please help me with this formula? It doesn't give me what I need. The first two posts to the active section, all the others to the inactive one.
{% set memberLength = members|length / 2 %}
{% for i in 1..memberLength %}
{% set sliceStart = i * 2 - 2 %}
{% set sliceLength = 2 %}
{% if i < 2 %}
<div class="carousel-item active">
<div class="row m-0">
{% for key, member in members|slice(sliceStart,sliceLength) %}
<div class="col-lg-6 py-4 ps-lg-3 pe-lg-5 d-lg-block d-none">
<div class="pb-4 mb-2 text-white">
<p class="fw-7 mb-0">{{ member.name }}</p>
<p>{{ member.podjmeno }}</p>
</div>
<div class="text-primary PF fz-19">
<h2 class="fw-4 mb-3">{{ member.nadpisvelky }}</h2>
<p><em>{{ member.description }}</em></p>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="carousel-item">
<div class="row m-0">
{% for key, member in members|slice(sliceStart,sliceLength) %}
<div class="col-lg-6 py-4 ps-lg-3 pe-lg-5 d-lg-block d-none">
<div class="pb-4 mb-2 text-white">
<p class="fw-7 mb-0">{{ member.name }}</p>
<p>{{ member.podjmeno }}</p>
</div>
<div class="text-primary PF fz-19">
<h2 class="fw-4 mb-3">{{ member.nadpisvelky }}</h2>
<p><em>{{ member.description }}</em></p>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
If you want to create a repeating HTML structure you are best off with using the filter batch
To set the class active on the first item you can use the attribute first of the loop variable
{% for items in members|batch(2) %}
<div class="carousel-item{{ loop.first ? ' active' }}">
{% for item in items %}
<div class="col-lg-6 py-4 ps-lg-3 pe-lg-5 d-lg-block d-none">
<div class="pb-4 mb-2 text-white">
<p class="fw-7 mb-0">{{ item.name }}</p>
<p>{{ item.podjmeno }}</p>
</div>
<div class="text-primary PF fz-19">
<h2 class="fw-4 mb-3">{{ item.nadpisvelky }}</h2>
<p><em>{{ item.description }}</em></p>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
demo
I was creating a simple blog page using Django. When I added cards for the articles it came like this
There is no space between the cards.
{% extends 'base.html' %}
{% block content %}
<div class="card mt-3" style="width: 100%;">
{% for post in posts %}
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
{% endfor %}
</div>
{% endblock content %}
How do I add space between these cards?
your for loop is not in correct place change code from
{% extends 'base.html' %}
{% block content %}
<div class="card mt-3" style="width: 100%;">
{% for post in posts %}
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
{% endfor %}
</div>
{% endblock content %}
to bellow code
{% extends 'base.html' %}
{% block content %}
{% for post in posts %}
<div class="card mt-3" style="width: 100%;">
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
{% endfor %}
{% endblock content %}
Firstly, you need to do the loop for every card, instead of doing it for the inner divs 'card-header' and 'card-body'. Secondly, to answer you question, you should use a spacing by either a margin or a padding.
I would suggest to make the cards a standard width and use a 'margin right 3':
{% for post in posts %}
<div class="card mt-3 mr-3" style="width: 250px">
<div class="card-header">
...
</div>
<div class="card-body">
...
</div>
</div>
{% endfor %}
Besides this solution, I suggest you read the Bootstaps Grid Layout documentation, so you can place the cards nicely within your content block.
I was looking to try to do pagination with the _data files. Here is the code that I was coming up with but it doesn't work. Trying to make it work for a project I am working on right now for a nonprofit client I have.
{% if page.layout == "events" %}
{% for events in paginator.events %}
<div class="card card-posts">
<img src="{{ events.image }}" class="card-img-top" alt="...">
<div class="card-body">
<h1 class="card-title my-3">{{ events.title }}</h1>
<div class="meta-info">
<ul class="list-inline">
{% if events.start %}
<li class="list-inline-item">
<i class="fas fa-calendar-alt"></i> {{ events.start | date_to_long_string }}
</li>
{% endif %}
</ul>
</div>
<p class="card-text">{{ events.summary }}</p>
</div>
</div>
{% endfor %}
{% if paginator.total_pages > 1 %}
<!--pagination-->
<div class="pagination bot-element">
<div class="pr-bg pr-bg-white"></div>
<div class="container">
{% if paginator.previous_page %}
<i class="fal fa-long-arrow-left"></i>
{% endif %}
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
{{ trail.num }}
{% endfor %}
{% endif %}
{% if paginator.next_page %}
<i class="fal fa-long-arrow-right"></i>
{% endif %}
</div>
</div>
<!--pagination end-->
{% endif %}
{% endif %}
Can someone see if this is a way possible that might have done this? If it is would it be ideal to do it for an events page to show an archive of events or no?
I'm trying to pass on the variable, prod_number, to the index of a list, products.
<div class="container">
{% for i in range(lenProducts) %}
<ul class="row product-grid">
{% for j in range(0, 3) %}
<br>
<p class="text-primary"> {% set prod_number = i*3+j %} </p>
<li class="col-md-4 product-wrapper card">
{{ products[prod_number].id }}
</li>
{% endfor %}
</ul>
{% endfor %}
{{ products[prod_number].id }} This line makes the page load forever
How can I fix this? I've isolated the problem and I'm 100% sure it's from that line.
I think this would work :
<div class="container">
{% for i in range(lenProducts) %}
<ul class="row product-grid">
{% for j in range(0, 3) %}
<br>
<p class="text-primary"> {% set prod_number = (i*3)+j %} </p>
<li class="col-md-4 product-wrapper card">
{{ products[prod_number]['id'] }}
</li>
{% endfor %}
</ul>
{% endfor %}
The problem was that the prod_number exceeded the products length and it caused my page to load forever.
prod_number went from 0 to 17 and products had only 6 elements in it.
I am developing a site on Shopify and I need to know how to change color of selected menu items. When a user clicks on any menu items, the color will change and remove once another menu item is selected.
I have tried to solve this problem many times now by using CSS and JQuery, but nothing I do seems to work.
Here is the code for the megamenu liquid file in Shopify.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-
top="197">
<div class="container">
<div class="mega-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav" id="navbar">
{% assign meagemenu_lists = settings.Megamenu-list %}
{% for link in linklists[meagemenu_lists].links %}
{% assign item = link.title | downcase %}
<li class="level1 dropdown">
<a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}"
title="{{link.title}}">{{ link.title }}</a>
{% for i in (2..5) %}
{%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
{% if settings[Megamenu] == item %}
<div class="sub-menu dropdown-menu">
<div class="top-sub-menu">
<div class="item">
{% if settings.service-megamenu-icon1 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon1']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title1'] }}</h3>
<p>{{ settings['service-megamenu-subtitle1'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon2 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon2']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title2'] }}</h3>
<p>{{ settings['service-megamenu-subtitle2'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon3 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon3']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title3'] }}</h3>
<p>{{ settings['service-megamenu-subtitle3'] }}</p>
</div>
</div>
<!-- End item -->
</div>
<ul class="menu-level-1">
{% for j in (1..3) %}
{% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{%
endcapture %}
{% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{%
endcapture %}
<li class="level2"><h4>{{ settings[mega_title] }}</h4>
<ul class="menu-level-2">
{% for link in linklists[settings[mega_col]].links %}
<li class="level3"><a href="{{ link.url }}" title="{{
link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
{% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
<li class="level2">
<img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
</li>
<li class="level2">
<img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
</li>
</ul>
<div class="bottom-sub-menu">
<p>{{ settings['Megamenu-description'] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
<!-- End Dropdow Menu -->
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
There will be a CSS class somewhere in the menu HTML which applies a CSS rule to color the active item. Across different e-commerce themes and platforms, this class is generally 'active', 'open', 'nav-open'. This class may be added via JavaScript after page load, so you may not see it in the HTML file.
I recommend using the inspect element tool to find the rule being applied to the item.