I'm using django notifications, but when unread notifications increasing, loading time and duplication times are also increasing. How can I optimize this code ?
{% for notification in request.user.notifications.unread %}
<li><div class="media">
<div class="media-left">
<div class="media-object">
<img data-src="holder.js/50x50?bg=cccccc" class="img-circle" alt="50x50" style="width: 50px; height: 50px;"
src="{{ BASE_DIR}}/media/profile_pictures/{{notification|getNotifUser}}/profile.jpg" data-holder-rendered="true">
</div>
</div>
<div class="media-body">
<strong class="notification-title">
<a id="{{ notification.target_object_id }}" class="{{ notification.pk }}">
{{ notification.actor_object_id|get_username}} {{notification.verb}} - request {{notification.target_object_id}}</a></strong>
<div class="notification-meta">
<small class="timestamp">{{ notification.timesince | getLocalTimeDifference}} əvvəl</small>
</div>
</div>
</div> </li>
{% endfor %}
Related
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/
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
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?