xppl/app/templates/show_books_grid.html

{% extends 'base.html' %}

{% block main %}
<div class="container">
  {% from "_formhelpers.html" import render_field %}
  <form method="POST">
    <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
      <div class="search">
      {{ render_field(form.search) }} </div>
      <button type="submit" class="button">browse</button>
           <p><br>
      {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p> 
 </form>
    </div>


  <h1 class="page-header">All Books</h1>
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <div class="alert alert-success">
        <ul>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      </div>
    {% endif %}
  {% endwith %}

<div class="grid">

        {% for book in books %}


<div class="gridbox">
<a href="books/{{ book.id }}">
<img class="no_cover" id="{{ book.title }}" src="/uploads/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></a> 
<p>
<tbody>
<th>
{{ book.title }} ({{ book.year_published or '–' }})</th>
<br>
<span style = "font-size: 14px;">
{% for author in  book.authors %}
{{ author.author_name }}<br> {% endfor %} </span>
</tbody>
</p>
</div>
  {% endfor %}
</div>

</div>
{% endblock %}