I want to display one query into two coulmns for explain: I have 22 elements in my query and i want to display it as 11 on the left and 11 on the right.
<div class="list-group container">
<div class="list-group-item">
{% for k in kategoria %}
<div class="media align-items-center">
<div class="mr-3">
</div>
<div class="media-body">
<a href="{% url 'katalog:kategoria' pk=k.pk %}">
<h5 class="text-md d-block text-limit mb-2 ml-5 text-left"><u>{{k.name}}</u></h5>
</div>
<div class="media-body">
<a href="{% url 'katalog:kategoria' pk=k.pk %}">
<h5 class="text-md d-block text-limit mb-2 ml-5 text-left"><u>{{k.name}}</u></h5>
</div>
</div>
{% endfor %}
</div>
</div>
This is my code, actually my website looks like:
I just want to display half of the list on the left and the second half on the right.
Related
enter image description hereI'm working on Ecommerce Website that sells Coffee and my problem is that the only working plus and minus button is the first coffee. The plus and minus buttons on the others are not functioning. Is it about the for statement where I'm wrong? or the structure of the html isn't right.
I've copied some of the code on cart.html file to make the product page had the option of adding products to the cart and also has a proceed button to the checkout page. The before structure of the site was you click on the image of a product and directed to the addtocart page then to the checkout page.`{% extends 'app/base.html' %}
{% load static %}
{% block title %}Category{% endblock title %}
{% block main-content %}
<div class="container my-5">
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
{% for prod in product %}
<div class="row">
<div class="col-sm-3 text-center align-self-center"><img src="{{prod.product_image.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="150" width="150"></div>
<div class="col-sm-9">
<div>
<h5>{{prod.title}}</h5>
<p class="mb-2 text-muted small">{{prod.description}}</p>
<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn" pid={{product.id}}><i class="fas fa-minus-square fa-lg"></i></a>
<span id="quantity">{{quantity}}</span>
<a class="plus-cart btn" pid={{product.id}}><i class="fas fa-plus-square fa-lg"></i></a>
</div>
<div class="d-flex justify-content-between">
<a href="#" class="remove-cart btn btn-sm btn-secondary mr-3" pid={{prod.id}}>Remove item </a>
<p class="mb-0"><span><strong>₱ {{prod.discounted_price}}</strong></span></p>
</div>
</div>
</div>
</div>
<hr class="text-muted">
{% endfor %}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h3>The Total Amount </h3>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0" >Amount<span id="amount">₱ {{amount}}</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">Shipping<span>₱ 144</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total</strong>
</div>
<span id="totalamount"><strong>₱ {{totalamount}}</strong></span>
</li>
</ul>
<div class="d-grid">Place Order</div>
</div>
</div>
</div>
</div>
</div>
{% endblock main-content%}
`
I'm working on a comments section for a blog in Flask. Having a very poor understanding of html, I decided to go with a public domain template. The script below works great, just one problem! After each submission, the comment window shrinks. Does anyone know how to make the size of the comment window constant?
{% for comment in post.comments %}
<div class="container my-2 py-2">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="card text-dark">
<div class="card-body p-4">
<p class="fw-light mb-4 pb-2"> Recent Comment By: </p>
<div class="d-flex flex-start">
<img class="rounded-circle shadow-2-strong me-2"
src="{{url_for('static', filename='uploads/' + comment.user.image_file)}}" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-2">{{comment.user.username}}</h6>
<div class="d-flex align-items-center mb-2">
<p class="mb-0">
<i> {{comment.datetime.strftime('%B %d, %Y')}} </i>
{% if user.id == comment.author or user.id == post.author %}
<a href="/delete_comment/{{comment.id}}">
<span class="badge bg-danger">remove?</span>
</a>
{% endif %}
</p>
</div>
<p class="mb-0"> {{comment.text|safe}} </p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I'm developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>
In one of the HTML files of my Django project, I have a div that contains a col-6 for an image and a col-6 for a text.
{% if automotives %}
{% for automotive in automotives %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
</div>
{% endfor %}
{% endif %}
I read title and description and cover from the database.
I want to periodically change the order of image and text in each row.
I have no idea how to do it. and I don't know much about js or jquery.
any help is appreciated.
You can achieve this with flex, but I see that your question is django/jinja2 related so, this is how I would approach this problem:
Build a partial template like this
{% if image_right %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
</div>
{% else %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
</div>
{% endif %}
You can name this something like image_text.html.
This template contains a bit of duplicate code, but it is simple to understand.
If image_right variable is True (or set to any non null value), it will show the row with the image on the right.
If image_right variable is False, (or 0 or any other null value), it will show the image left (so, image on the left is the the default behavior in this case).
Then, in your main template, you can use this partial template you just built (image_text.html) like this, for example, if you want to switch image on left and right on each row:
{% if automotives %}
{% for automotive in automotives %}
{% include 'image_text.html' with automotive=automotive image_right=forloop.counter|divisibleby:2 %}
{% endfor %}
{% endif %}
forloop.counter is the index of your for loop (it starts from 1, user forloop.counter0 if you want a counter that starts from 0).
When forloop.counter is even, image_right in your partial template will be True, so it will show image on the right.
When forloop.counter is odd, image_right in your partial template will be False, so it will show image on the left.
Hope it helps. This may need some tweaks though.
I am trying to refactor my site using the D.R.Y. method, part of that is using liquid syntax to help.
Currently everything works with what I have here:
page-internal.html
---
layout: default
<div>
<div class="d-flex" style="background-color: #e9ecef;">
<div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
<div class="col-lg-12 p-3 mx-auto">
<img width="50" height="50"
class="rounded-circle float-left mr-2"
src="/assets/img/internal/{{ page.image }}" />
<h1 class="display-4">{{ page.title | escape }}</h1>
<p class="lead">{{ content }}</p>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
{% include card-post-{{ page.passname }}.html %}
</div>
</div>
</div>
The {{ page.passname }} pulls from a .md file like so:
---
layout: page-internal
title: User Interface
permalink: /pages/design-ui
image: ui.svg
passname: ui
---
That works just fine, too. But then I have to create several pages to pull from instead of just referencing passname to grab the right .md page (I hope I'm making sense here, apologies if I'm not). That page looks like this
card-post.ui.html
And the html on that page is:
<div class="container-fluid">
<div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
{% for post in site.categories.ui %}
<div class="card col-sm-12 col-lg-3 m-2">
<div class="card-body d-flex flex-column">
<div class="media">
<div class="d-flex mr-3">
<a href="{{ post.url }}">
<img width="40" height="40"
class="rounded-circle"
src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
</a>
</div>
<div class="media-body">
<h6 class="mb-1">{{ post.title }}</h6>
</div>
</div>
<div class="d-flex flex-column" style="height: 105px;">
<div class="p-2">
<p class="text-muted">{{ post.excerpt }}</p>
</div>
</div>
<div class=" flex-column align-items-end">
<button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
What I'd like to do is take the two html sites and have it like this:
---
layout: default
---
<div>
<div class="d-flex" style="background-color: #e9ecef;">
<div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
<div class="col-lg-12 p-3 mx-auto">
<img width="50" height="50"
class="rounded-circle float-left mr-2"
src="/assets/img/internal/{{ page.image }}" />
<h1 class="display-4">{{ page.title | escape }}</h1>
<p class="lead">{{ content }}</p>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center">
{% include card-post-{{ page.passname }}.html %}
<div class="container-fluid">
<div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
{% for post in site.categories.ui %}
<div class="card col-sm-12 col-lg-3 m-2">
<div class="card-body d-flex flex-column">
<div class="media">
<div class="d-flex mr-3">
<a href="{{ post.url }}">
<img width="40" height="40"
class="rounded-circle"
src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
</a>
</div>
<div class="media-body">
<h6 class="mb-1">{{ post.title }}</h6>
</div>
</div>
<div class="d-flex flex-column" style="height: 105px;">
<div class="p-2">
<p class="text-muted">{{ post.excerpt }}</p>
</div>
</div>
<div class=" flex-column align-items-end">
<button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
This would work however the syntax here:
{% for post in site.categories.ui %}
Needs to be (and this is where I can't figure out what to do)
{% for post in site.categories. {{ page.passname }} %}
This throws an error:
Liquid Warning: Liquid syntax error (line 23): Unexpected character { in "post in site.categories.{{ page.passname }}" in /_layouts/page-internal.html
So my question is, how can I get the passname from said .md post (in this instance it'd be design-ui.md ) and put it into {% for post in site.categories.ui %} where the word ui would be dependint on the .md
I hope I said all this right, apologies if not.
Your loop syntax {% for post in site.categories. {{ page.passname }} %}
is incorrect :
You may reach your category with bracket notation :
{% for post in site.categories[page.passname] %}