How to serve thumbnail image instead of full image on the articles listing page in Django?
I made a django powered website here it is https://www.endustri.io When you look the frontpage i serve the blog post feautered image in original size. And it causes the increase loading time. So i wanna serve 300x180 pixels the featured images of the posts. How can i make automatically 300x180 pixels images from my original images and how can i serve these images on the frontpage. When i looked the media file, i wanna see two images, one of is original and other image is 300x180 pixels.
Here is my codes... views.py
def frontpage(request):
posts = Post.objects.order_by('-id')
most = Post.objects.order_by('-num_reads')[:10]
kat = Category.objects.all()
f = Firma.objects.all().order_by('-id')[:15]
p = Paginator(posts, 10)
page = request.GET.get('page')
sayfalar = p.get_page(page)
context = {
'posts': posts,
'most': most,
'kat': kat,
'sayfalar': sayfalar,
'f': f,
}
return render(request, 'blog/frontpage.html', context)
models.py
class Post(models.Model):
category = models.ForeignKey(Category, related_name="posts", on_delete=models.CASCADE)
title = models.CharField(max_length=300)
slug = models.SlugField(max_length=300)
intro = models.TextField()
body = tinymce_models.HTMLField()
description = models.TextField()
author = models.ForeignKey(User, on_delete=models.CASCADE)
featured_photo = models.ImageField(null=True, blank=True, upload_to="blog/")
date_added = models.DateTimeField(auto_now_add=True)
num_reads = models.PositiveIntegerField(default=0)
def __str__(self):
return str(self.title)
def get_absolute_url(self):
return reverse('detail', args=[str(self.slug)])
and frontpage.html
{% for post in sayfalar %}
<div class="card mb-3" style="max-width: 75%px;">
<div class="row g-0">
<div class="col-md-4">
<img src="{{ post.featured_photo.url }}" width="300" height="180" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.intro |safe }}</p>
</br></br>
<small class="text-muted">Yazar: {{ post.author.first_name }} {{ post.author.last_name }} - Kategori: {{ post.category }} - Okunma: {{ post.num_reads}} </small><a href="{% url 'detail' post.slug %}" class="btn btn-primary float-end">Devam覺</a>
</div>
</div>
</div>
</div>
{% endfor %}