Get the first image src from a post in django

Question

I have a model to write blogs. In that I'm using a wysiwyg editor for the Blog's descritpion, through which I can insert an image within the 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 admin it looks like this:

What I want is to get first image inside the description of the blog, and present it in the template like this:

How do get the img src from the description of the blog to use it in the template? Your help and guidance will be very much appreciated. Thank you.

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

Answer 1

Here's a basic approach you can tweak for your convenience:

Add a 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 all you have to do is populate your first_image field on save, so your model's save method 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 simply reference it in your template.

This is not a fully fledged solution, there are other things that you should take into account, like differentiating between a smiley or thumbnail or a code snippet imr src and an actual img src, but this should do for personal use, you don't want to limit other people's choice to having their first image as the cover image.

Hope this helps!

Answer 2

Personally, I would parse the HTML when receiving a post for a new blog to get the image source, and store it to the data-base (with a specific field), so that you do not need to do it afterwards.

I guess that the description is in HTML, in which case you could derive a class from HTMLParser, and implement the handle_starttag method so that you store the source of the first image you get (And a default image otherwise).