I'm having a little difficulty implementing a three column grid in Django. I'm trying to create a page where my blog post are displayed in columns of three. I'm using bootstrap to do this and I just cant seem to figure out how to get this right.
I implemented a for loop in order to display a grid of three. I'm either getting three of the same articles. Which is not what i'm trying to accomplish. Please let me know if you have any idea of how I accomplish fix this.
Below you can find my code.
{% for post in object_list %}
<div class="row ">
<div class="column" style="background-color:#grey" >
<div class="card h-100 " style="max-width: 24rem; max-height: 28.5rem; ">
<img src="{{ post.header_image.url }}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.snippet }}</p>
</div>
<div class="card-footer">
<small class="text-muted">By: {{ post.author.first_name }} {{ post.author.last_name }} - {{ post.post_date }} - </small>
{{ post.category }}
</div></div></div></div>
{% endfor %}
Related
I want to show only a select/specific category of Blog Posts in Webpage Section added using the built in Page Builder.
Have created this Web Template in EPRNext to Show Blog postings on any WebPage by adding a Section using Page-Builder. This works fine to show the Blog Posts.
But I want to show only a select category of Posts. What should I add.
`
<section class="container my-5">
<h2 class="section-title">{{ _('जलक्रांतीच्या गाथा') }} </h2>
<p class="section-description">{{ _('ब्लॉगच्या माध्यमातुन') }} </p>
<div class="row">
{% for post in frappe.get_all("Blog Post", fields=["title", "blogger", "blog_intro", "route", "meta_image"], order_by="published_on desc", limit=6) %}
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src={{ post.meta_image }} alt="" class="image-wiih-blur card-img-top image-loaded" max-width="400" max-height="400">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(post.blogger) }}</p>
<p class="card-text">{{ post.blog_intro }}</p>
</div>
<div class="card-body flex-grow-0">
{{ _('पुढे वाचा') }}
</div>
</div>
</div>
{% endfor %}
</div>
</section>
`
<section class="container my-5">
<h2 class="section-title">{{ _('जलक्रांतीच्या गाथा') }} </h2>
<p class="section-description">{{ _('ब्लॉगच्या माध्यमातुन') }}</p>
{% set category = frappe.get_doc("Blog Category", selected_category_name) %}
<div class="row">
{% for post in frappe.get_all("Blog Post", fields=["title", "blogger", "blog_intro", "route", "meta_image"], filters={"blog_category": category.name}, order_by="published_on desc", limit=6) %}
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src={{ post.meta_image }} alt="" class="image-wiih-blur card-img-top image-loaded" max-width="400" max-height="400">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(post.blogger) }}</p>
<p class="card-text">{{ post.blog_intro }}</p>
</div>
<div class="card-body flex-grow-0">
{{ _('पुढे वाचा') }}
</div>
</div>
</div>
{% endfor %}
</div>
</section>
here is my html code using boostrap4 to make cards in my home page :
<div class="container"><div class="card-columns" >
{% for i in post %}
<div class="card text-center" style="width: 16rem;">
{% if i.image_url %}
<img class="card-img-top" alt="Card image" style="width:100%" src="{{ i.image_url }}">
{% else %}
<img class="card-img-top" alt="Card image" style="width:100%" src="{{ i.image.url }}">
{% endif %}
<div class="card-body">
<h5 class="card-title"> {{i.title | slice:":40"}} </h5>
<p class="card-text"> {{i.description | slice:":50" }}</p>
<ul class="list-unstyled">
<li class="align-items-center" style="text-align:center;"><h4 class="text-success font-weight-bold align-items-center">{{i.deal_price}}</h4> <del>{{i.orig_price}}</del> </li>
<li class="text-danger font-weight-bold " style="text-align:center;">{{i.ending_day}} {{i.ending_time}}</li>
{% if not i.is_expired %}
<li class="text-danger font-weight-bold "style="text-align:center;">Expired</li>
{% endif %}
</ul>
Read More
</div>
</div>
{% endfor %}
and here is how my website looks like in pc screen:
but in smaller screen this is how it looks :
in phone screen :
I want a way to make those blog cards responsive to adapt any screen size and looks decent in the center.
Thank you!
I am working on a Django blog application and I have run into a problem with image alignment using Bootstrap 5. I am new at CSS and none of the solutions I see in SO are helping. My problem is I want the text under my images to always line up regardless of the height of the image itself. Here is a partial screen shot:
Here is the HTML code I developed:
{% extends 'base.html' %}
{% load static %}
{% block title %}Post List{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<!-- Latest Posts -->
<main class="posts-listing col-lg-8">
{% if page_obj %}
<div class="container">
<div class="row">
<!-- posts -->
{% for post in page_obj %}
<div class="post col-xl-6">
<div class="card">
<a href="{{post.get_absolute_url}}">
<img src="{{post.thumbnail.url}}" alt="..." class="img-fluid"></a>
</div>
<div class="card-body">
<div class="post-meta d-flex justify-content-between">
{% comment "" %}<div class="date meta-last"></div>{% endcomment %}
<div class="category">
{% for cat in post.categories.all %}
{{cat.title}}
{% endfor %}
</div>
</div>
<a href={{post.get_absolute_url}}>
<h3 class="h4">{{post.title}}</h3>
</a>
<p class="text-muted">{{post.content|safe | truncatechars:256 }}</p>
<footer class="post-footer d-flex align-items-center">
<a href="{% url 'show-user-profile' post.author.user.id %}" class="profile d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{post.author.profile_picture.url}}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{post.author.user.username}}</span></div>
</a>
<div class="date"><i class="icon-clock"></i>{{post.timestamp | timesince}} ago</div>
<div class="comments meta-last"><i class="icon-comment"></i>{{post.comment_count}}</div>
</footer>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<p class="text-big">No Posts in this category</p>
{% endif %}
</main>
{% include 'sidebar.html' with most_recent=most_recent category_count=category_count %}
</div>
</div>
{% endblock content %}
The comments I am getting make it seem like what I am trying to do is impossible, and perhaps it is. Here is a screenshot from Adobe Lightroom that shows the concept - all the photos are placed in identically sized boxes regardless of aspect ratio. No distortion, just different size margins to fill in unused space. Now Lightroom isn't HTML but can't this be done? As I mentioned, all of the sample galleries I see use photos with the same aspect ratio, but that should not be a requirement of a gallery.
I would appreciate some help. Thanks
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.
In one of my of my pages I have a few tables. These tables have the same structure but differ in colors and in the data displayed.
An example table might look like this:
<div class="container reusable-table">
<h4 class="table_title">{{ table_title }}</h4>
{% for item in items %}
<div class="container row">
<div class="container col">
<h4>{{ item.date }}</h4>
</div>
<div class="container col">
<h4>{{ item.time }}</h4>
</div>
<div class="container col">
<h4>{{ item.title }}</h4>
</div>
<div class="container col">
<h4>{{ item.description }}</h4>
</div>
<div class="container col">
<h4>{{ item.price }}</h4>
</div>
</div>
{% endfor %}
</div>
One of my options is to repeat the html and css code for the table each time. This way I risk errors and alot of duplicated code.
From my perspective, I need to find a way to substitute:
html elements, like table_title
data related elements, like {% for item in items %}
colors
Based on the comments and the answers below, also on Assign variables to child template in {% include %} tag Django, you can replace html elements and data with the following:
{% include "new_table.html" with table_title="A Title" and items=new_items %}
That leaves the color aspect, or in better terms the css aspect.
I am searching for a way to make this more efficient.
you can create one HTML File for the table, include the HTML table wherever you want with {% include %}
{% include "mytable.html" with items=<your_items> %}
try this...
You can make your table an html snippet template that you can include in other templates to make this kind of thing manageable. See the docs on include.
Suppose you have item_table.html.
<div class="container reusable-table">
<h4 class="table_title">{{ table_title }}</h4>
{% for item in items %}
<div class="container row">
<div class="container col">
<h4>{{ item.date }}</h4>
</div>
<div class="container col">
<h4>{{ item.time }}</h4>
</div>
<div class="container col">
<h4>{{ item.title }}</h4>
</div>
<div class="container col">
<h4>{{ item.description }}</h4>
</div>
<div class="container col">
<h4>{{ item.price }}</h4>
</div>
</div>
{% endfor %}
</div>
Suppose you have a view that provides a list of items to a template like
# ...
return render('some_template.html', context=dict(some_items=something))
In your some_template.html you can include item_table.html and pass it appropriate values. For example, the list of items some_items can become the items variable in the included template.
{% include "item_table.html" with table_title="My Title" items=some_items %}