I sliced and diced an existing class: product__info and created a new one: product__purchase under the same parent class product product-- as such:
<section class="page-width section-{{ section.id }}-padding">
<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.gallery_layout }} grid grid--3-col {% if product.media.size > 0 %}grid--3-col-tablet{% else %}product--no-media{% endif %}">
<div class="grid__item product__media-wrapper">
</div>
<div class="product__purchase-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__purchase-wrapper--extra-padding{% endif %}">
<div id="Product-{{ section.id }}" class="product__purchase-container{% if section.settings.enable_sticky_info %} product__purchase-container--sticky{% endif %}">
</div>
</div>
<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">
<div id="Product-{{ section.id }}" class="product__purchase-container{% if section.settings.enable_sticky_info %} product__purchase-container--sticky{% endif %}">
</div>
</div>
</div>
</section>
However, this new section: product__purchase is not appearing on my development site, only the two original classes: product__media and product__info.
What I see on my development site:
Does anyone have any idea why this is the case? Could it be that I used the same id id=Product-{{ section.id}} ... for the new div class?
As always, thanks for your time :-)
Related
I need to run a segment of a code when the primary key of the object is 1,4,7...etc.
Basically, I need to run a if statement for a certain block of code.
{% with i = ev.pk %}
{% if i%3 == 1 %}
<div class="container">
<div class="intro"></div>
<div class="row articles">
{% endif %}
{% endwith %}
<div class="col-sm-6 col-md-4 item" data-aos="fade-left"><img class="img-fluid" src="{{ ev.image.url }}">
<h3 class="name">{{ ev.event_title }}</h3>
<p class="description">{{ event.event_details }}</p><em class="float-left">{{ ev.date }}</em><em class="float-right">{{ ev.venue }}</em></div>
</div>
</div>
{% endfor %}```
The above code doesn't work, I need:
1. Declare a variable (i)
2. assign it ev.pk
3. run an if statement {% if i%3 == 1%}
I am open for suggestions if there is a better way to code this.
Probably this will work (using divisibleby):
{% with ev.pk as i %}
{% if i|divisibleby:3 %}
<div class="container">
<div class="intro"></div>
<div class="row articles">
{% endif %}
{% endwith %}
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 %}
I am very new to this, so any help would be much appreciated.
I am in the process of learning to code and am using templates as guides, and I am using this slideshow template to create a slideshow. But the issue is that, for example, there are four images on the slideshow, but only one link button, linking to only one url. However, I want to code it so that I can link a different url to each of the four images. Below are the codes...
{% if settings.show_block_lookbook %}
<div id="lookbook-section" class="section-full lookbook-section">
<div class="lookbook-wrapper">
<div class="lookbook-text">
<div class="lookbook-container">
<div class="container">
<div class="lb-text">
{% assign lbText1 = settings.block_lookbook_text_1 %}
{% assign lbText2 = settings.block_lookbook_text_2 %}
{% assign lbText3 = settings.block_lookbook_text_3 %}
{% assign lbText4 = settings.block_lookbook_text_4 %}
{% assign lbLink = settings.block_lookbook_link_1 %}
{% if lbText1 != blank %}<h3>{{ lbText1}}</h3>{% endif %}
<div class="bg-slider-arrows">
<span class="button-prev no-border"></span>
<span class="button-next no-border"></span>
</div>
{% if lbText2 != blank %}<h2>{{ lbText2 }}</h2>{% endif %}
{% if lbText3 != blank %}<p>{{ lbText3 }}</p>{% endif %}
{% if lbText4 != blank %}{{ lbText4 }}{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="lookbook-bg">
{% for i in (1..4) %}
{% assign newShow = 'block_lookbook_img_' | append: i %}
{% if settings[newShow] %}
{% assign newImage = 'block_lookbook_img_' | append: i %}
<div class="lookbook-item">
<img src = "{{ newImage | append: '.jpg' | asset_url}}" alt="" />
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
Simply said, what are the codes to put in if I want to make it so that I can add in a different url for each images. I have tried and tried but to no avail, so if someone can help with code samples, it would be much appreciated...
I want to arrange the following Figure1 content into horizon grid view, here content coming into vertical so, how to arrange into horizontal grid view, like Figure2
Figure1:
Figure2:
Here I only required the css class in div, Please tell the css class to arrange the grid into horizontal form.
Jinja2 Templates
_data_grid.html
This template, takes rows(number of data, like in the following Figure2 we have 5 data), and columns(Image Name, Type, Status, public, protected, Formate, size, Action), All these info comes from the database and django framework.
{% load i18n %}
{% with table.needs_form_wrapper as needs_form_wrapper %}
<div class="table_wrapper">
{% if needs_form_wrapper %}<form action="{{ table.get_full_url }}" method="POST">{% csrf_token %}{% endif %}
{% with columns=table.get_columns rows=table.get_rows %}
{% block grid %}
<grid id="{{table.slugify_name}}">
<div>
{% block grid_caption %}
<h3 class='table_title'>{{ table }}</h3>
{{ table.render_table_actions }}
{% endblock grid_caption %}
</div>
</br>
</br>
</br>
</br>
{% block grid_body %}
<div>
{% for row in rows %}
{{ row.render }}
{% empty %}
{{ table.get_empty_message }}
{% endfor %}
</div>
{% endblock grid_body %}
</grid>
{% endblock grid %}
{% endwith %}
{% if needs_form_wrapper %}</form>{% endif %}
</div>
{% endwith %}
_data_grid_cell.html
This template is used to fill the content,
{% if cell.inline_edit_mod and cell.update_allowed %}
{% else %}
{% if cell.inline_edit_available and cell.update_allowed %}
{% else %}
<ul>{{ cell.value }}</ul>
{% endif %}
{% endif %}
If you want to code the css your self flexbox will be what you are looking for. But I will be easier and probably cleaner to use css frameworks like Bootstrap, your code should look somthing like this, then you can add django template tags:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4"><!--block 1--></div>
<div class="col-sm-4 col-md-4"><!--block 2--></div>
<div class="col-sm-4 col-md-4"><!--block 3--></div>
<div class="col-sm-4 col-md-4"><!--block 4--></div>
</div>
</div>
Check (Bootstrap Grid) for more details and explanation for the css classes.
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.