Use a sprinte instead of individual images for books

The book listing loads close to 100 images at this point, this is a huge
number of roundtrips and... Slow. Instead, combine them into one sprite
and use CSS.

To do this add a generic support for generating sprites. Right now it's
only used for books, but it can be used for others as well in the
future.

To add a new book now, add it to the YAML, add the image as usual, and
then run "manage.py combine_image_sprites", and make sure to commit both
the original image and the combined one.

This brings the image downloads from about 2MB across 84 requests to
less than 350KB across 1 request.

Author: mhagander

media/css/main.css

@@ -1807,6 +1807,13 @@ table.sponsor-table tbody tr td:nth-child(3) {
   width: 30%;
 }
 
+/* Docs/books */
+img.bookcover {
+  width: 130px;
+  height: 160px;
+  background-image: url('/media/img/docs/books/combined.webp');
+}
+
 /**
 * This sets the rule for the rendering in the sponsors table. The name is chosen
 * to ensure compatibility with various browser plugins that may otherwise hide

media/img/docs/books/combined.webp

@@ -401,6 +401,7 @@ class BooksData(YamlDataLoader):
 
 
 @xkey('data_books')
+@content_sources('style', "'unsafe-inline'")
 def books(request):
     return render_pgweb(request, 'docs', 'docs/books.html', {
         'books': booksdata.get()['books'],

media/img/empty.png

@@ -0,0 +1,20 @@
+from django.core.management.base import BaseCommand
+from django.db import transaction
+from django.conf import settings
+
+from pgweb.util.sprites import sprites
+
+
+class Command(BaseCommand):
+    help = 'Combine images to sprites'
+
+    def add_arguments(self, parser):
+        parser.add_argument('image', type=str, nargs='?', default='all', choices=('books', 'all', ))
+
+    def handle(self, *args, **options):
+        if options['image'] == 'all':
+            for k, s in sprites.items():
+                print("Creating sprite for {}".format(k))
+                s.build_sprite_image()
+        else:
+            sprites[options['image']].build_sprite_image()

pgweb/docs/views.py

@@ -0,0 +1,43 @@
+import os
+from PIL import Image
+
+from pgweb.docs.views import booksdata
+
+
+class HorizontalSpriteBuilder:
+    def build_sprite_image(self):
+        inputlist = list(self.items())
+
+        fullwidth = len(inputlist) * (self.width + 1)
+
+        fullimg = Image.new("RGBA", (fullwidth, self.height), (255, 0, 0, 0))
+        for i, fn in enumerate(inputlist):
+            im = Image.open(fn)
+            ratio = min(self.width / im.width, self.height / im.height)
+            new_width = round(im.width * ratio)
+            new_height = round(im.height * ratio)
+
+            im = im.resize((new_width, new_height), Image.LANCZOS)
+
+            # Center if smaller
+            xofs = (self.width - new_width) // 2
+            yofs = (self.height - new_height) // 2
+
+            fullimg.paste(im, (i * (self.width + 1) + xofs, yofs))
+
+        fullimg.save(self.output, optimize=True, compress_level=9)
+
+
+class BooksSpriteBuilder(HorizontalSpriteBuilder):
+    width = 130
+    height = 160
+    # We use webp here because it's jpeg size (even smaller actually) and can be made transparent
+    output = "media/img/docs/books/combined.webp"
+
+    def items(self):
+        return (os.path.join('media/img/docs/books/', b['image']) for b in booksdata.get()['books'])
+
+
+sprites = {
+    'books': BooksSpriteBuilder(),
+}

pgweb/util/management/commands/combine_image_sprites.py

@@ -15,7 +15,7 @@ <h1>Books <i class="fas fa-book"></i></h1>
       <tr>
         <td>
 {% if book.url %}<a href="https://leanpub.com/deep-dive-into-a-sql-query">{% endif %}
-              <img src="/media/img/docs/books/{{ book.image }}" alt="{{ book.title }}">
+	    <img class="bookcover" src="/media/img/empty.png" alt="{{ book.title }}" style="background-position-x: {% widthratio forloop.counter0 1 -131 %}px">
 {% if book.url %}</a>{% endif %}
         <td>
            <strong>Title</strong>: {{ book.title }}<br />