Odoo blog cover image not showing

Question

I have created custom latest blog template. But I can't show cover images in thumbnails.

Cover image should be here:

I have written following code to show the cover image:

<div class="panel">
    <t t-set="properties" t-value="json.loads(post.cover_properties)">
       <a class="o_panel_cover" t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-att-style="background-image: #{cover_properties.get('background-image')};">
       </a>
    </t>
    <div class="panel-heading mt0 mb0">
        <h4 class="mt0 mb0">
          <a t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-field="post.name"></a>
          <span t-if="not post.website_published" class="text-warning">
             <span class="fa fa-exclamation-triangle ml8" title="Unpublished"/>
          </span>
        </h4>
    </div>

After writing the code image not loading and it shows like this:

How can I show the image?

Answer 1

Firstly, there are several things with the controller.

The latest post route doesn't render cover-properties, it is like below:

return request.render("website_blog.latest_blogs", {
        'posts': posts,
        'pager': pager,
        'blog_url': blog_url,
    })

So I added necessary functions in my controller and returned like this:

return request.render("website_blog.latest_blogs", {
        'posts': posts,
        'pager': pager,
        'blog_url': blog_url,
        'blogs':blogs,
        'blog_posts': blog_posts,
        'blog_posts_cover_properties': [json.loads(b.cover_properties) for b in blog_posts],
    })

On XML returned like this:

 <t t-set="cover_properties" t-value="blog_posts_cover_properties[post_index]"/>
    <a class="o_panel_cover" t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" 
      t-attf-style="background-image: #{cover_properties.get('background-image')};"></a>