How do I make sure markdown doesn't appear when listing posts in a blog? - django

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?

Related

Customize next page in Django (pagination)

so I'm building a website in Django which have similarities with YouTube. I mean there will be some thumbnails and when you click on one of them it takes you to a page where the video will be played.
Now coming to the code since I don't wanna have to hard-code everything I opted to use the pagination but I have a problem cuz the pagination is doing everything automatically and I can't change the thumbnails for the next page. So either my analysis is wrong or there a way to do it correctly.
Here's the code for the template:
{% load static %}
{% block content %}
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 mb-5">
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch1' %}" target="_blank"> <img src="{% static 'thumbnails/hacker.jpeg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch2' %}" target="_blank"> <img src="{% static 'thumbnails/hydra.jpg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch3' %}" target="_blank"> <img src="{% static 'thumbnails/darkweb.jpg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
last »
{% endif %}
</span>
</div>
{% endblock%}
the function in the view
def boxing(request):
videos = Video.objects.all()
paginator = Paginator(videos, 3) # shows 3 videos per page
pageNumber = request.GET.get('page')
try:
page_obj = paginator.get_page(pageNumber)
except:
page_obj = paginator.get_page(1)
return render(request, 'boxing.html', {'page_obj': page_obj})
And my loop is also displaying the same thing for everything. I could just use an if statement to pick exactly which video I want but with the pagination happening it'll do the same thing on the next page as well.

The best way to divide card-deck into rows in Django template - Django

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

Confusion with templates in django

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>

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 }}

is there is a solution for urls issues

I am building a web app using django and I get an error, I couldn't figure out what is the problem behind it.
I have three models( Category, SubCategory, Article) in my url I want something like that (localhost:8000/categories/Id_category/Id_subcategory)
the url (localhost:8000/categories/Id_category) worked perfectly but (localhost:8000/categories/Id_category/Id_subcategory) didn't work I get this error enter image description here
So here is my code that I tried to make it:
#views.py
def categorie(request):
Catégorie_list=Catégorie.objects.all()
context = {
'Catégorie_list':Catégorie_list,
}
return render(request,'articles/Category.html',context)
def souscategorie(request,categoryID):
SousCatégorie_list=SousCatégorie.objects.order_by('désignation').filter(Catégorie_identifiant_id=categoryID)
name_category=Catégorie.objects.get(id=categoryID)
articles=Article.objects.select_related('Sous_Catégorie__Catégorie_identifiant').filter(Sous_Catégorie__Catégorie_identifiant_id=categoryID)
context = {
'SousCatégorie_list':SousCatégorie_list,
'name_category': name_category,
'articles':articles
}
return render(request,'articles/SubCategory.html',context)
def articl(request,categoryID,articleID):
return render(request,'articles/article.html')
#articles/urls.py
urlpatterns=[
path('',views.categorie, name='Category'),
path('<int:categoryID>/',views.souscategorie, name='SubCategory'),
path('<int:categoryID>/<int:articleID>/',views.articl, name='article'),
path('search',views.search, name='search'),
]
#my template Category.html
{% if Catégorie_list %}
{% for category in Catégorie_list %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<a href="{% url 'SubCategory' category.id %}">
<img class="card-img-top" src="{{ category.photo_main.url }}" alt="{{ category.désignation }}"> </a>
<div class="card-body">
<div class="listing-heading text-center">
<a href="{% url 'SubCategory' category.id %}" style="text-decoration: none;">
<h4 class="text-primary" >{{ category.désignation }}</h4>
</a>
</div>
<hr>
<div class="listing-heading text-center">
<a class="text-primary" >{{ category.Description }}</a>
</div>
<hr>
Voir la catégorie
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p>Aucune catégorie disponible</p>
</div>
{% endif %}
#my template Subcategory.html
<div class="row">
{% if articles %}
{% for article in articles %}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="{{ article.photo_main.url }}" alt="">
<div class="card-body">
<h4 class="card-title">
{{ article.désignation }}
</h4>
<h5>{{ article.Sous_Catégorie }}</h5>
<p class="card-text">{{ article.Description }}</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Ajouter au panier</h6>
</div>
</div>
</div>
{% endfor %}
{% else %}
<a class="list-group-item"> Aucune sous catégorie disponible</a>
{% endif %}
</div>