Now displaying book covers on the interface

frontend/interface/static/css/main.css

@@ -50,7 +50,9 @@ body{
 }
 .shelf{
     grid-area: shelf;
-    margin: 0px auto 0px auto;
+    margin: 0px 0px;
+    padding: 0px;
+    list-style-type: none;
 }
 .shelf_contents{
     display: flex;
@@ -67,3 +69,15 @@ body{
     height: 50px;
     width: 91px;
 }
+#book_shelf{
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    list-style-type: none;
+}
+.shelf_item{
+
+}
+.book_thumb{
+    width: 300px;
+    height: 375px;
+}

frontend/interface/templates/index.html

@@ -21,9 +21,9 @@
             </div>
             <div class="shelf">
                 <div class="shelf_contents" >
-                    <ul>
+                    <ul id="book_shelf">
                     {% for book in Books %}
-                        <li>{{ book.title }} <img alt="Embedded Image" src="data:image;base64,{{ book.cover[2:-2]|bin_2_img }}" style="width:50px;height:50px;"/> </li>
+                        <li class="shelf_item"><img alt="{{ book.title }}" src="data:image;base64,{{ book.cover | bin_2_img }}" class="book_thumb"/> </li>
                     {% endfor %}
                     </ul>
                 </div>

frontend/interface/templatetags/filters.py

@@ -7,4 +7,4 @@ register = template.Library()
 
 @register.filter
 def bin_2_img(_bin):
-    if _bin is not None: return b64encode(_bin)
+    if _bin is not None: return b64encode(_bin).decode('utf-8')