I want to show 6 items in a page with the same design, like this photo: https://pasteboard.co/Jrkehgg.png.
I have this code in a HTML page:
{% for android in single_android_post %}
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="{{ android.get_image }}" height="240px" width="230px" alt="اذا رأيت هذه الجمله فيرجى التواصل معنا واخبارنا بمكان الخطا لاصلاحه">
<div class="card-body">
<h5 class="card-title">{{ android.name }}</h5>
<p class="card-text"> {{ android.app_contect}} </p>
</div>
<div class="card-footer">
<small class="text-muted">{{ android.post_date}}</small>
<small class="firstsmall"><a class="bg-orange" href="" title="">{{ android.post_tag}}</a></small>
</div>
</div>
</div>
{% endfor %}
I tried this code but each card takes up all of the page width. How do I fix it?
You can do:
<div class="card-deck">
{% for android in single_android_post %}
<div class="card">
<img class="card-img-top" src="{{ android.get_image }}" height="240px" width="230px" alt="اذا رأيت هذه الجمله فيرجى التواصل معنا واخبارنا بمكان الخطا لاصلاحه">
<div class="card-body">
<h5 class="card-title">{{ android.name }}</h5>
<p class="card-text"> {{ android.app_contect}} </p>
</div>
<div class="card-footer">
<small class="text-muted">{{ android.post_date}}</small>
<small class="firstsmall"><a class="bg-orange" href="" title="">{{ android.post_tag}}</a></small>
</div>
</div>
{% if forloop.counter|divisibleby:3 %}
</div>
<div class="card-deck">
{% endif %}
{% endfor %}
</div>
See: forloopcounter and divisibleby
Related
Good evening everyone,
I am trying to avoid that the image of a card (implemented through bootstrap) shifts to the top of the card once the user sees the website from a mobile version.
The problem is as follow:
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
{% if post.immagine %}
<div class="col-md-4">
<img src="{{ post.immagine.url }}" class="card-img" width="200" height="260">
</div>
{% else %}
<div class="col-md-4">
</div>
{% endif %}
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ post.nome }} {{ post.cognome }} -
</h5>
Leggi
<p class="card-text"></p>
</div>
{% else %}
<div class="card-body" style="text-align:center">
<h5 class="card-title">{{ post.nome }} {{ post.cognome }}</h5>
</div>
</div>
</div>
{% endfor %}
bootstrap consists of 12 cols to render the content
if you write:
<div class="col-md-4"></div>
<div class="col-md-8"></div>
it means that the left column gets 1/3 of the content and the rigth one 2/3.
the md in col-md-* means that this only works for all resolutions bigger than md ( it's tablet i think )
just get rid of the md and it should work
<div class="col-4"></div>
<div class="col-8"></div>
I was learning django and I have the following template:
{% load static ax_base %}
{% for tm in team_list %}
<div>
<div class="card our-team-slider-card mb-3">
<div class="row no-gutters">
<div class="col-sm-4">
<a href="" class="card-img-wrap" data-toggle="modal"
data-target=".our-team-photo">
<img src="{% static tm.img %}"
class="card-img" alt="...">
</a>
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title mb-4">{{ tm.name }}</h5>
<div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
<p class="card-text fz14 opa05">{{ tm.bio }}</p>
<div class="contacts mb-2">
<a href=""
class="styled-link text-black">{{ tm.phone }}</a><span> , </span>{{ tm.email }}
</div>
Send message
</div>
</div>
</div>
</div>
</div>
{% endfor %}
So, the problem is I have two places where the above template is reused but what I want to do is to use col-sm-4 class in one place but not use col-sm-4 in the other place. Should I create two separate templates for that, that is, one template that uses col-sm-4 and the other template that does not use col-sm-4? Would that be correct?
{% load static ax_base %}
{% for tm in team_list %}
<div>
<div class="card our-team-slider-card mb-3">
<div class="row no-gutters">
{% if not hide %}
<div class="col-sm-4">
<a href="" class="card-img-wrap" data-toggle="modal"
data-target=".our-team-photo">
<img src="{% static tm.img %}"
class="card-img" alt="...">
</a>
</div>
{% endif %}
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title mb-4">{{ tm.name }}</h5>
<div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
<p class="card-text fz14 opa05">{{ tm.bio }}</p>
<div class="contacts mb-2">
<a href=""
class="styled-link text-black">{{ tm.phone }}</a><span> , </span>{{ tm.email }}
</div>
Send message
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I guess your were wrong when you passed the image with {% static tm.img %} better change it to {{ tm.img }}
{% load static ax_base %}
{% for tm in team_list %}
<div>
<div class="card our-team-slider-card mb-3">
<div class="row no-gutters">
<div class="col-sm-4">
<a href="" class="card-img-wrap" data-toggle="modal"
data-target=".our-team-photo">
<img src="{{ tm.img }}"
class="card-img" alt="...">
</a>
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title mb-4">{{ tm.name }}</h5>
<div class="profession mb-4 fz14 opa05">{{ tm.position }}</div>
<p class="card-text fz14 opa05">{{ tm.bio }}</p>
<div class="contacts mb-2">
<a href=""
class="styled-link text-black">{{ tm.phone }}</a><span> , </span><a>
href="" class="styled-link text-black">{{ tm.email }}</a>
</div>
Send message
</div>
</div>
</div>
</div>
</div>
{% endfor %}
You should just pass a variable in render context dict and use that for the conditionally shown block:
{% if show_photo %}
<div class="col-sm-4">
...
</div>
{% endif %}
If it is the actual class you want or don't want to use, it can also be handled in exactly same syntax:
<div class="{% if use_sm_4 %} col-sm-4 {% else %} some-other-class {% endif %}">
...
</div>
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 }}
so I want to have three grid lines, such that <div class="col-6 col-md-4">
each grid line has a content of course. so the code will probably tell what I'm trying to achieve
<div class="row">
<div class="col-6 col-md-4">
{% for all_episode in episode %}
<div class="card">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'></a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
{{ all_episode.season }}
</span>
</small>
</div>
{% endfor %}
</div>
</div>
</div>
but with the above code i get the cards in align vertically. so one card takes the whole line while there should be three cards.
Be careful with your indentation please. It's difficult to read your code.
You can add your col class with your card div, and you need to have your loop into your row div but outside your col div.
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>
I'm building a blog using Django and I just integrated markdown. How do I make sure that the truncated part of the body of a post (which is telling a little of what you'll see when that particular post is opened) doesn't display markdown?
I created a template filter markdown:
from django.utils.safestring import mark_safe
from django import template
import markdown
register = template.Library()
#register.filter(name='markdown')
def markdown_format(text):
return mark_safe(markdown.markdown(text))
Here's the usage in the post_list.html template
{% extends "base.html" %}
{% load blog_tags static disqus_tags %}
{% disqus_dev %}
{% block content %}
<div class="jumbotron">
<h1 class="heading-font">Shelter At Your Crossroads</h1>
<p class="lead">...some random ass text that could serve as motto or something</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
{% if tag %}
<h2 class="mb-4">Posts tagged with "{{ tag.name }}"</h2>
{% endif %}
{% for post in posts %}
<div class="card mb-5">
<img class="card-img-top img-fluid" src="{{ post.image.url }}" alt="{{ post.title }}">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.body|markdown|truncatewords_html:50 }}</p>
<i class="fa fa-book" aria-hidden="true"></i> Read More
<i class="fa fa-share-alt" aria-hidden="true"></i> Share Post
<div class="float-right">
<i class="fa fa-tags"></i>
{% for tag in post.tags.all %}
<a href="{% url 'post_list_by_tag' tag.slug %}">
<span class="badge badge-pill badge-info">{{ tag.name }}</span>
</a>
{% endfor %}
</div>
</div>
<div class="card-footer text-center text-muted">
Posted on {{ post.publish.date }} by {{ post.author.get_full_name }}
</div>
</div>
{% endfor %}
</div>
<div class="col-lg-4">
<div class="card border-dark mb-3">
<div class="card-header">Post Count</div>
<div class="card-body text-dark">
<h4 class="card-title text-center">Total Number of Posts</h4>
<p class="card-text text-center display-3">{% total_posts %}</p>
</div>
</div>
<div class="card border-dark mb-3">
<div class="card-header">Latest Posts</div>
<div class="card-body text-dark">
<h4 class="card-title text-center">Most Recent Posts</h4>
<p class="card-text">{% show_latest_posts 3 %}</p>
</div>
</div>
<div class="card border-dark mb-3">
<div class="card-header">Latest Comments</div>
<div class="card-body text-dark">
<h4 class="card-title text-center">Most Recent Comments</h4>
<p class="card-text">{% disqus_recent_comments shortname 5 50 1 %}</p>
</div>
</div>
</div>
</div>
{% include 'includes/pagination.html' with page=posts %}
</div>
{% endblock %}
The filter was used on line 22 - {{ post.body|markdown|truncatewords_html:50 }}
How do I make display just normal text?