I'm trying to create my first blog on Jekyll. I'm stuck on one thing: I have a section for one of my categories, let's say "news":
<section class="news">
<div class="container">
<div class="row no-gutters">
{% for post in site.categories.news limit: 2 offset: 0 %}
{% include news-item-col-6.html %}
{% endfor %}
{% for post in site.categories.news limit: 3 **offset: 2** %}
{% include news-item-col-4.html %}
{% endfor %}
</div>
</div>
</section>
news-item-col-6:
{% if post.thumb != 0 %}
<div class="col-md-6">
<div class="pattern">
<div class="overlay item-title" style="background-image: url({{ post.thumb }});">
<div class="item-title-content">
<h3>{{ post.header }}</h3>
</div>
</div>
</div>
</div>
{% endif %}
news-item-col-4:
{% if post.thumb != 0 %}
<div class="col-md-4">
<div class="pattern">
<div class="overlay item-title" style="background-image: url({{ post.thumb }});">
<div class="item-title-content">
<h3>{{ post.header }}</h3>
</div>
</div>
</div>
</div>
{% endif %}
my posts tp
---
layout: post
title: title | site.com
header: title
description: description
categories: categories url
catname: News
image: "images/URL /to image/1.jpg"
thumb: "images/URL /to thumb/1t.jpg"
permalink: "blog/:categories/:year-:month-:day-:slug.html"
---
The problem is that not all of my posts will have background thumb, and all I want to do is to ignore the posts which has no post.thumb. and the code is works, but unfortunately col-md-4 block's offset is not ignoring post's order with no post.thumb.
The pictures below shows what I want:
This is how should be, if all my posts have post.thumb(bg_image)
This is how should be, if my post Item2 has no post.thumb(bg_image), it just not showing up in section
And this is how my code works
So what should I do to make it work right?
Just use a custom counter, like this:
{% assign counter = 0 %} <!-- create a custom counter and set it to zero -->
{% for post in site.categories.news %} <!-- loop through the posts in news -->
{% if post.thumb %} <!-- check if the post has a thumbnail -->
{% assign counter = counter | plus: 1 %} <!-- increment the counter if it does -->
{% if counter < 3 %} <!-- if this is the first or second counted post -->
{% include news-item-col-6.html %} <!-- include the col-6 element -->
{% elsif counter < 6 %} <!-- else -->
{% include news-item-col-4.html %} <!-- include the col-4 element -->
{% endif %}
{% endif %}
{% endfor %}
Related
what I'm trying to do is bring products pictures and titles from specific collection into my product recommendation module.
This is the module im trying to call my products.
{% if section.settings.show_product_recommendations %}
<div class="product-recommendations"
data-section-type="product-recommendations"
data-components="product-block"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=12">
{% if recommendations.performed and recommendations.products_count > 0 %}
<div class="product-recommendations-container product-slider">
<div class="wide-container section-spacing">
<div class="product-list swiper-container" data-products-in-view="{{ section.settings.grid }}">
<h2 class="h2 section-heading" data-cc-animate>
{{ section.settings.title }}
</h2>
<div class="swiper-wrapper" data-normheights=".image" data-normheights-inner="img">
{%- for product in recommendations.products -%}
<div class="swiper-slide">
{% render 'product-block', product: product, product_class: product_class, i: forloop.index, animate: forloop.index, show_vendor: section.settings.show_vendor, hide_swatches: section.settings.hide_swatches %}
</div>
{%- endfor -%}
</div>
<div class="swiper-scrollbar"></div>
{% render 'svg-chevron-left' %}
{% render 'svg-chevron-right' %}
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
So far i did tried something like this. But this code has to be integrated into to code above because what Im trying to do is call specific collection to my recommendations module.
/collections/224916897949 is ID of my collection list and it has multiple products. Instead of using the Shopify panel to add collection I would like to add by liquid.
{% assign collection = collections[section.settings.collection] %}
{% for product in collection.products.224916897949 limit: 12 %}
I am working with a bootstrap template for a django app
<div class="row">
<div class="col-12">
<div class="card-deck-wrapper">
<div class="card-deck">
{% if posts %}
{% for post in posts %}
<div class="card d-block">
<img class="card-img-top" src="{{ post.image }}" height="200">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.description }}</p>
<p class="card-text">
<small class="text-muted">{{ post.creation_date }}</small>
</p>
</div>
</div> <!-- end card-->
{% endfor %}
{% endif %}
</div> <!-- end card-deck-->
</div> <!-- end card-deck-wrapper-->
</div> <!-- end col-->
</div><!-- end row -->
Mi main target is to repeat each "card" just 3 times, otherwise the templates looks awful, but have no idea how to iterate just 3 times, and at the 4th, 7th, 10th, and so on time, create a new "card-deck" to continue with post 4-5-6, then another "card-deck" for post 7-8-9 and so on
Thank you!
I have changed it a little bit at least to know how many "card-deck" should it have in the views
def blogPost(request):
posts = Post.objects.filter(state=True)
numberOfPosts = len(posts)
addOneDeck = 0
if (numberOfPosts%3) > 0:
addOneDeck = 1
numberOfDecks = ((int(numberOfPosts/3))+addOneDeck)
context = {"posts":posts, "decks":numberOfDecks}
return render(request,"blog.html", context)
Are you looking for forloop counter in templates? django has builtin for that
{% for post in posts %}
{{ forloop.counter }} #The current iteration of the loop (1-indexed)
{{ forloop.counter0 }} #The current iteration of the loop (0-indexed)
{% if forloop.counter0|divisibleby:3 %}
<p>print {{ forloop.counter0 }}</p>
{% else %}
<p> do something else</p>
{% endif %}
{% endfor % }}
you can use within if else conditions then.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#for
I am using jekyll to populate my blog page with blog posts. I want there to be two posts for every div with the "row" class, but I also want every 4th item to be an ad (skip over the post and move to the next row but still include something else that's not a post).
So if there are 6 posts, the output should look like this
<div class="row"> <!-- 1st row -->
<div> {{ post.title }} </div> <!-- 1st post, no skip -->
<div> {{ post.title }} </div> <!-- 2nd post, no skip -->
</div>
<div class="row"> <!-- 2nd row -->
<div> {{ post.title }} </div> <!-- 3rd post, no skip -->
<div> THIS IS NOT A POST </div> <!-- skip post 4, put something else -->
</div>
<div class="row"> <!-- 3rd row -->
<div> {{ post.title }} </div> <!-- 4th post, because last item was skipped to display something else -->
<div> {{ post.title }} </div> <!-- 5th post, no skip -->
</div>
<div class="row"> <!-- 4th row -->
<div> {{ post.title }} </div> <!-- 6th post, no skip -->
</div>
<!-- and so on, so every 4th item is not a post, but the posts continue after the skipped post -->
I have the post loop part but I cant figure out how to add the SKIP
{% assign rows = site.posts.size | divided_by: 2.0 | ceil %}
{% for i in (1..rows) %}
{% assign offset = forloop.index0 | times: 2 %}
<div class="row blogitems">
{% for post in site.posts limit:2 offset:offset %}
<div class="col-md-6">
<p>{{ post.title }}</p>
</div>
{% endfor %}
</div>
{% endfor %}
I think you can just walk through your items while checking the modulo. Like this:
<div class="row blogitems">
{% for post in site.posts %}
{% assign mod3 = forloop.index | modulo: 3 %}
<div class="col-md-6"><p>{{ post.title }}</p></div>
{% if mod3 == 0 %}<div class="col-md-6"><p>THIS IS NOT A POST</p>{% endif %}
{% if mod3 == 0 or mod3 == 2 %}</div><div class="row blogitems">{% endif %}
{% endfor %}
</div>
I am getting an error saying my template is not correct.
The error goes like: Invalid block tag: 'endif', expected 'empty' or 'endfor'
My code is here, the bug is on the last line. Which part is not correct?
{% if entries %}
{% for entry in entries %}
<section class="no-padding" id="portfolio">
<div class="container-fluid">
(% if entry.scammer_name %}
<div class="row no-gutter result-wrapper control-group">
<div class="col-lg-3 result-label">
<label class="control-group result-padding">
suspect's name:
</label>
</div>
<div class="col-lg-9 result">
<label class="control-group result-padding light-font">
{{ entry.scammer_name }}
</label>
</div>
</div>
{% endif %}
</div>
</section>
{% endfor %}
{% endif %}
Add {% endfor %}{% endif %} to the last line of code.
For loops require endfor tags
{% if mike %}
{% if jake %}
{% for x in squid %}
{{ x.do_stuff }}
{% endfor %}
{% endif %}{# closes jake tag #}
{% endif %}{# closes mike tag #}
I want to populate a twig page with information stored in the database. I use a loop to make multiple divs containing different entries of the same tables. The only problem is that I want to group the divs by4.. and I can't stop the loop when I reach the fourth step. In the end i get a big colon of divs.
Can anyone please tell me how to group the divs by 4?
This is my twig template:
<form method="POST" id="form-book">
<section id="portfolio" class="container main">
<ul class="gallery col-4">
{% for type in typeandrooms %}
{% for t, room in type %}
<li>
{% if t == 0 %}
<div class="preview">
{% set var_id = 'bundles/twnelo/images/portfolio/thumb/item' %}
{% set var_id = var_id ~ room.getType.id %}
{% set var_id = var_id ~ '.jpg' %}
<img src="{{ asset(var_id) }}">
<div class="overlay">
</div>
</div>
<div class="desc">
<h5> {{ room.getType.name }} </h5>
<strong>Beds: </strong>Double bed<br/>
<strong>Available rooms: </strong> {{ type|length }} <br/>
<strong>Prices: </strong> {{ room.getPrice }} <br/>
<button type = "submit" name="singleapartment" value = "{{ room.getType.id }}" class="btn btn-success btn-small">Book a room !</button>
</div>
{% endif %}
{% if loop.index % 4 == 0 and loop.index > 0 %}
</li>
Al 4-lea pas
<li>
{% endif %}
</li>
{% endfor %}
{% endfor %}
</ul>
</section>
</form>
{% endfor %}
Problem is solved. This is the new template:
<form method="POST" id="form-book">
<section id="portfolio" class="container main">
<ul class="gallery col-4">
{% for rooms in typesandrooms %}
{% for room in rooms %}
{% if loop.index == 1 %}
<li>
<div class="preview">
{% set var_id = 'bundles/twnelo/images/portfolio/thumb/item' %}
{% set var_id = var_id ~ room.getType.id %}
{% set var_id = var_id ~ '.jpg' %}
<img src="{{ asset(var_id) }}">
<div class="overlay">
</div>
</div>
<div class="desc">
<h5> {{ room.getType.name }} </h5>
<strong>Facilities: </strong>{% for facility in room.getFacilities %} {% if loop.index < 4 %} {{ facility.getFacility }}; {% endif %} {% endfor %}<br/>
<strong>Available rooms: </strong> {{ rooms|length }} <br/>
<strong>Prices: </strong> {{ room.getPrice }} Lei <br/>
<button type = "submit" name="singleapartment" value = "{{ room.getType.id }}" class="btn btn-success btn-small">Book a room !</button>
</div>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</section>
</form>
You have to open the first row right before the loop.
{% for type in typeandrooms %}
+ <li>
{% for t, room in type %}
- <li>
And close the last one right after
{% endif %}
- </li>
{% endfor %}
+ </li>
{% endfor %}
And given this line {% if t==0 %} I reckon you'll need to use a counter instead of index.loop. Else you could end up with less than 4 room per list row. The best practice would be to parse the array first in your controller and remove the rooms with t==0 then just remove the {% if t==0 %} line in your twig template and it'll work with index.loop, you want to keep the logic in twig to a minimum.