I am making a news site, there is a page where all articles are displayed. But if there are many articles, then the page will be huge.
my code :
{% block content %}
<div class=" container" style="margin-top: 60px;">
{% for post in posts %}
<div class="row" style="padding-top: 30px ">
<div class="col-sm-3">
{% image post.preview_image fill-250x250 as blog_img %}
<img style="border-radius: .3525rem" href="{{ post.url }}" src="{{ blog_img.url }}">
</div>
<div class="col-sm-9">
<a href="{{ post.url }}">
{{ post.title }}
</a>
<br/>
<p> {{ post.intro }}</p>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
what i want to do
I recommend using pagination : https://learnwagtail.com/tutorials/how-to-paginate-your-wagtail-pages/
Related
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.
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 }}
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>
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?
I am using markdown in django 1.11 and I implemented it using cdn
but when ever I run the site, the first paragraph is rendered inside pre and code tags.
Below is the screenshot which is rendered:
https://i.stack.imgur.com/lqNKI.png
Here every first para is rendered like that in every post why is it so and please help me to resolve it.
post_detail.html
{% extends "base.html" %}
{% block body %}
<div class="container" style="margin-top: 10px;">
<div class="card mb-3">
{% if list.image %}
<img class="card-img-top" src="{{ list.image.url }}" alt="Card image cap">
{% endif %}
<div class="card-block">
<h3 class="card-title">{{ list.title }}</h3>
<p class="card-text"><small class="text-muted">Author:
{% if list.user.get_full_name %}
{{ list.user.get_full_name }}
{% else %}
{{ list.user }}
{% endif %}
</small></p>
<div class="content-marked">
<p class="card-text">{{ list.content }}</p>
</div>
<p class="card-text"><small class="text-muted">Last updated {{list.updated | timesince}} ago</small></p>
Edit
</div>
</div>
</div>
{% endblock %}