Tweaks to make images + shelves look good on retina displays
authorAlex Chan <alex@alexwlchan.net>
Mon, 16 Nov 2020 20:29:56 +0000 (20:29 +0000)
committerAlex Chan <alex@alexwlchan.net>
Mon, 16 Nov 2020 20:29:56 +0000 (20:29 +0000)
scripts/generate_bookshelf.py
scripts/render_html.py
templates/base.html
templates/review.html

index 5e260fb..1748f40 100755 (executable)
@@ -17,7 +17,7 @@ def get_bins(total_width, min_height, max_height):
     x_coord = 0
 
     while x_coord <= total_width:
-        width = R.randint(5, 25)
+        width = R.randint(8, 40)
         height = R.randint(min_height, max_height)
 
         yield [(x_coord, 0), (x_coord + width, height)]
@@ -44,10 +44,11 @@ def get_tint_colors(tint_color):
 
 
 def create_shelf(tint_color):
-    bins = get_repeatable_bins(total_width=2000, min_height=30, max_height=45)
+    # Shelves go from 30px to 45px height, then 2x for retina displays
+    bins = get_repeatable_bins(total_width=2000, min_height=60, max_height=90)
     colors = get_tint_colors(tint_color=tint_color)
 
-    im = Image.new("RGBA", size=(2000, 45))
+    im = Image.new("RGBA", size=(2000, 90))
 
     draw = ImageDraw.Draw(im)
 
index f30b13b..c9f11e3 100755 (executable)
@@ -14,7 +14,6 @@ import frontmatter
 from jinja2 import Environment, FileSystemLoader, select_autoescape
 import markdown
 from markdown.extensions.smarty import SmartyExtension
-from PIL import Image
 import smartypants
 
 from generate_bookshelf import create_shelf_data_uri
@@ -181,11 +180,10 @@ def render_individual_review(env, *, review_entry, **kwargs):
 def _create_new_thumbnail(src_path, dst_path):
     dst_path.parent.mkdir(exist_ok=True, parents=True)
 
-    im = Image.open(src_path)
-
-    if im.width > 240 and im.height > 240:
-        im.thumbnail((240, 240))
-    im.save(dst_path)
+    # Thumbnails are 240x240 max, then 2x for retina displays
+    subprocess.check_call([
+        "convert", src_path, "-resize", "480x480>", dst_path
+    ])
 
 
 def thumbnail_1x(name):
@@ -196,19 +194,10 @@ def thumbnail_1x(name):
 def _create_new_square(src_path, square_path):
     square_path.parent.mkdir(exist_ok=True, parents=True)
 
-    im = Image.open(src_path)
-    im.thumbnail((240, 240))
-
-    dimension = max(im.size)
-
-    new = Image.new("RGB", size=(dimension, dimension), color=(255, 255, 255))
-
-    if im.height > im.width:
-        new.paste(im, box=((dimension - im.width) // 2, 0))
-    else:
-        new.paste(im, box=(0, (dimension - im.height) // 2))
-
-    new.save(square_path)
+    subprocess.check_call([
+        "convert",
+        src_path, "-resize", "240x240", "-gravity", "center", "-background", "white", "-extent", "240x240", square_path
+    ])
 
 
 def create_thumbnails():
index 87e8c77..8ee5e50 100644 (file)
@@ -11,6 +11,7 @@
     <style>
       aside #shelf_background {
         background: url({{ [0, 0, 0] | create_shelf_data_uri }});
+        background-size: auto 100%;
       }
     </style>
 
index 73cc74c..b35e255 100644 (file)
@@ -31,7 +31,8 @@
       }
 
       aside #shelf_background {
-        background: url({{ tint_colors[review_entry.book.cover_image] | create_shelf_data_uri }})
+        background: url({{ tint_colors[review_entry.book.cover_image] | create_shelf_data_uri }});
+        background-size: auto 100%;
       }
     </style>
   {% endif %}