Rendering images

The last column of our report will feature the list of followers, with the avatars. We will use the media-list Bootstrap component and a loop through the followers to render each one of them:

<!-- Render followers --> 
<ul class="media-list"> 
  <t t-foreach="o.message_follower_ids" t-as="f"> 
    <li t-if="f.partner_id.image_small"  
      class="media-left"> 
      <img class="media-object" 
        t-att-src="'data:image/png;base64,%s' %  
          f.partner_id.image_small" 
        style="max-height: 24px;" /> 
      <span class="media-body"  
        t-field="f.partner_id.name" /> 
    </li> 
  </t> 
</ul> 

The content of binary fields is provided in a base64 representation. The <img> element can directly accept this type of data for the src attribute. Thus we can use the t-att-src QWeb directive to dynamically ...

Get Odoo 10 Development Essentials now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.