Display articles from database in bootstrap columns - django

I have a large database of articles, I want to display them all in bootstrap rows(3 articles per row):
<div class="container">
<h1 class="mt-4 mb-4 text-center display-4">All News </h1>
<div class="row">
{% for article in articles %}
<div class="col-md">
<div class="card">
<h2 class="pt-2">{{ article.title }}</h2>
<p class="lead"> {{ article.description }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
The problem is that row is created outside the for statement, so every article is squeezed into one row (when there should be 3 articles per row). Is there a way to loop through the for statement, and put 3 articles in one row, close that row and then begin a new one?


You could try to use the value of forloop.counter to change the behavior every three iterations.
<div class="container">
<h1 class="mt-4 mb-4 text-center display-4">All News </h1>
<div class="row">
{% for article in articles %}
{% if forloop.counter|divisibleby:3 %}
<div class="row">
{% endif %}
<div class="col-md">
<div class="card">
<h2 class="pt-2">{{ article.title }}</h2>
<p class="lead"> {{ article.description }}</p>
</div>
</div>
{% if forloop.counter|divisibleby:3 %}
</div>
{% endif %}
{% endfor %}
</div>
</div>

Related

How to make data that comes from Django database appear horizontally?

In this Image, the data appears in vertical format. But I want data in horizontal format.
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-3">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<div class="post block">
<h2 class="subtitle">{{post.title}}</h2>
<small>Posted At {{post.date_added}}</small>
<p>{{post.intro}}</p>
Read More
</div>
{% endfor %}
{% endblock body %}
Hi There I'm Newbie In Django
How Can I Able To Appear Horizontally The Data Is Come From Database

So The Problem Was I Was Ending Row Inside For Loop To Create New Row You Have To Put For Loop Outside
Check This Code
{% extends 'base.html' %}
{% block title %}Blog{% endblock title %}
{% block body %}
<div class="container">
<div class="row">
{% for post in posts%}
<div class="col-lg-4">
<div class="card" style="width: 31.25rem;">
<!-- <div class="card"> -->
<img class="img-fluid card-img-top" src="https://images.unsplash.com/photo-1591154669695-5f2a8d20c089?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="Card image cap" style="height: 250px;width: 500px;">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
{{post.date_added}}
<p class="card-text">{{post.intro}}</p>
Go somewhere
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock body %}

django slice filter breaks template for tinymce safe content

I have contents which were published using tinymce editor. Now, I want to show my content, that's why I have to use safe filter. But, whenever I'm trying to use slice or truncate filter, the template breaks.
this is my HTML code.
{% extends 'blog/frontend/layouts/base.html' %}
{% block content %}
<div class="card border-primary">
{% for post in posts %}
<div class="card my-2 mx-1">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<hr>
<img src="{{ post.image.url }}" alt="Card image" width="85%" class="mx-auto d-block">
<p class="card-text mt-1">
{{ post.content|truncatewords:50|safe}}
</p>
<hr>
<div class="d-flex">
<div class="px-2 py-0 my-auto">
<h6><i class="fas fa-user-edit"></i> {{ post.author.username }}</h6>
</div>
<div class="px-2 py-0 my-auto">
<h6>Date posted: <span class="text-info">{{ post.date_posted|date:"d M, Y" }}</span></h6>
</div>
<div class="ml-auto px-2 my-auto ">
Read more
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
These are the image, first one without sliceor turncate filter, 2nd and 3rd one are with them.

Sorry, it was a stupid question to ask. Just in case anyone else is facing this kind of problem, use truncatechars_html or truncatewords_html just like this: {{ post.content|truncatewords_html:30|safe }} or {{ post.content|truncatechars_html:30|safe }}

How to use Django Cycle for displaying Two post on one row?

Following code giving me the output of one post in one row, how can I change it to display two posts in one row ?
<div class="container">
<div class="row">
<div class="col-md-4 mt-3 left">
{% for post in disease_list %}
<div class="card mb-4">
<div class="card-body">
<h6 class="card-title"> {{ post.title }}</h6>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
Does Cycle method is good to implement here ? If Yes then how ?

2 Rows and 3 columns using bootstrap in Django

Trying to iterate multiple posts through a loop, into 2 rows of 3 items.
Currently my code looks like this
{% for post in post.all %}
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>{{ post.title }} - {{post.assignment_level}}</h3>
<p>by {{post.author}} from {{post.pub_date}}</p>
<h4>{{post.assignment_body}}</h4>
<p>Read...</p>
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock%}
this gives me one column of 6 posts.
How do I split them in to 2 rows of three posts.
Really been googling this.
Thank you in advance

You can do something like this:
{% set count = 0 %}
{% for post in post.all %}
{% if count == 0 %}
<div class="row">
{% endif %}
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>{{ post.title }} - {{post.assignment_level}}</h3>
<p>by {{post.author}} from {{post.pub_date}}</p>
<h4>{{post.assignment_body}}</h4>
<p>Read...</p>
</div>
</div>
</div>
{% set count = count + 1 %}
{% if count == 3 %}
</div>
{% set count = 0; %}
{% endif %}
{% endfor %}
{% endblock%}

What you are doing here is creating multiple rows for each posts. Hence all your elements are coming in separate rows.
You can do something like this.
<div class="row">
{% for post in post.all %}
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>{{ post.title }} - {{post.assignment_level}}</h3>
<p>by {{post.author}} from {{post.pub_date}}</p>
<h4>{{post.assignment_body}}</h4>
<p>Read...</p>
</div>
</div>
</div>
{% endfor %}
</div>

Jinja2: Create new row for every 3 items

Currently for every article in articles a new div with class span4 is created.
Instead for each row I would like to limit it's content to three span's and create a new row once that limit has been reached. How can I best implement this?
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<legend></legend>
<div class="row-fluid" id="main">
{% for article in articles %}
<div class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x150/483CB4">
<div class="caption">
<h4>{{ article.title }}</h4>
<p> {{ article.summary }}</p>
</div>
<legend></legend>
<a class="btn" href="#"><i class="icon-thumbs-up"></i></a>
<a class="btn" href="#"><i class="icon-thumbs-down"></i></a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Goal:
<div class="row">
<div class="span4">article[0]</div>
<div class="span4">article[1]</div>
<div class="span4">article[2]</div>
</div>
<div class="row">
<div class="span4">article[3]</div>
<div class="span4">article[4]</div>
<div class="span4">article[5]</div>
</div>

The best way to do this is to use the built in batch filter to break up your list into groups of three:
{% for article_row in articles | batch(3, ' ') %}
<div class="row">
{% for article in article_row %}
<div class="span4">{{ article }}</div>
{% endfor %}
</div>
{% endfor %}

You can use loop.index0 and loop.last inside the for loop. Here is the for-loop documentation.
Example:
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<legend></legend>
<div class="row-fluid" id="main">
{% for article in articles %}
{% if loop.index0 % 3 == 0 %}
<div class="row">
{% endif %}
<div class="span4">
...
</div>
{% if loop.index0 % 3 == 2 or loop.last %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
The loop.last clause should close the last row even if there were less than 3 items. <div> should start when loop.index0 gives 0 as the remainder and should end when 2 is the remainder
Another alternative would be to group the items into rows before passing them into the template, then you can just issue two for-loops one inside the other.