Get first src image from post in django
I have a model for writing blogs. In this I am using the wysiwyg editor Blog
descritpion
through which I can insert the image into description
.
class Blog(models.Model):
title = models.CharField(max_length=150, blank=True)
description = models.TextField()
pubdate = models.DateTimeField(default=timezone.now)
publish = models.BooleanField(default=False)
In the administrator it looks like this:
I want to get the first image inside the blog description and present it in the template like this:
How do I get img
src
from the blog description to use it in the template? Your help and guidance would be much appreciated. Thank.
views.py:
def blog(request):
blogs = Blog.objects.all()
return render(request, 'blogs.html', {
'blogs':blogs
})
template:
{% for blog in blogs %}
<div class="blog">
<p class="blog_date"> {{blog.pubdate}} </p>
<h2 class="blog_title"> {{blog.title}} </h2>
<img src="{{STATIC_URL}} ###img src to be included" class="blog_image img-responsive img-thumbnail">
<a href="blog_detail.html" class="blog_read_more btn btn-info">Read more</a>
<div class="container">
<p class="divider">***</p>
</div>
</div>
{% endfor %}
source to share
Here's a basic approach that you can tweak for your convenience:
Add the first_image field to your model:
class Blog(models.Model):
title = models.CharField(max_length=150, blank=True)
description = models.TextField()
pubdate = models.DateTimeField(default=timezone.now)
publish = models.BooleanField(default=False)
first_image = models.CharField(max_length=400, blank=True)
Now you need to fill in the first_image field when saving, so your method for saving the model should look like this:
def save(self, *args, **kwargs):
# This regex will grab your first img url
# Note that you have to use double quotes for the src attribute
img = re.search('src="([^"]+)"'[4:], self.description)
self.first_image = img.group().strip('"')
super(Blog, self).save(*args, **kwargs)
Now, just reference it in your template.
This is not a complete solution , there are other things you have to consider like the difference between an emoticon or thumbnail or code snippet imr src and the actual img src, but this should do for personal use, you don't want to limit other people's choices to what theirs the first image is the cover.
Hope this helps!
source to share
Personally, I parsed the HTML when I get a post for a new blog to get the source of the image, and save it to the database (with a specific field) so I don't have to do that later.
I am assuming the description is in HTML, in which case you could get the class from HTMLParser
and implement the method handle_starttag
so that you store the source of the first image you get (and the default image otherwise).
source to share