Using book cover sizes to prevent layout shifting

openlibrary/book_providers.py

@@ -4,13 +4,17 @@
 from typing import Generic, Literal, TypedDict, TypeVar, cast
 from urllib import parse
 
+import requests
 import web
 from web import uniq
 from web.template import TemplateResult
 
 from openlibrary.app import render_template
 from openlibrary.plugins.upstream.models import Edition
-from openlibrary.plugins.upstream.utils import get_coverstore_public_url
+from openlibrary.plugins.upstream.utils import (
+    get_coverstore_public_url,
+    get_coverstore_url,
+)
 from openlibrary.utils import OrderedEnum, multisort_best
 
 logger = logging.getLogger("openlibrary.book_providers")
@@ -577,6 +581,24 @@ def get_cover_url(ed_or_solr: Edition | dict) -> str | None:
     return None
 
 
+def get_dimensions_cover(url: str) -> tuple[int, int] | None:
+    """
+    Get the dimensions of the cover image at a given URL
+    """
+    url = url.replace(url.split("/b/")[0], get_coverstore_url())
+
+    # replace -M.jpg or -S.jpg or -L.jpg to .json
+    url = url.replace("-M.jpg", ".json")
+    url = url.replace("-S.jpg", ".json")
+    url = url.replace("-L.jpg", ".json")
+
+    try:
+        d = requests.get(url).json()
+        return d['width'], d['height']
+    except OSError:
+        return None
+
+
 def is_non_ia_ocaid(ocaid: str) -> bool:
     """
     Check if the ocaid "looks like" it's from another provider

openlibrary/components/LibraryExplorer/components/OLCarousel.vue

@@ -6,7 +6,11 @@
       </template>
 
       <template v-slot:cover="{book}">
-        <slot name="cover" v-bind:book="book"/>
+        <div class="cover-container">
+          <slot name="cover" v-bind:book="book">
+            <img :src="`https://covers.openlibrary.org/b/id/${book.cover_i}-L.jpg`" alt="Cover" class="cover"/>
+          </slot>
+        </div>
       </template>
 
       <template #book-end-start>
@@ -319,4 +323,42 @@ export default {
   overflow: clip;
   position: relative;
 }
+
+.cover-container {
+  width: 180px;
+  height: 220px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+img.cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+@media (max-width: 600px) {
+  .cover-container {
+    width: 100px;
+    height: 150px;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1200px) {
+  .cover-container {
+    width: 120px;
+    height: 180px;
+  }
+}
+
+@media (min-width: 1201px) {
+  .cover-container {
+    width: 150px;
+    height: 200px;
+  }
+}
+
 </style>

openlibrary/core/models.py

@@ -83,6 +83,16 @@ def url(self, size="M"):
     def __repr__(self):
         return "<image: %s/%d>" % (self.category, self.id)
 
+    def width(self):
+        """Get the width of the image."""
+        info = self.info()
+        return info["width"] if info else None
+
+    def height(self):
+        """Get the height of the image."""
+        info = self.info()
+        return info["height"] if info else None
+
 
 ThingKey = str
 

openlibrary/macros/SearchResultsWork.html

@@ -52,12 +52,47 @@
   <div class="sri__main">
     <span class="bookcover $blur_cover">
       $ cover = get_cover_url(selected_ed) or "/images/icons/avatar_book-sm.png"
-      <a href="$work_edition_url"><img
+      $ cover_dimensions = get_dimensions_cover(cover)
+      $ aspect_ratio = 1
+      $if cover_dimensions:
+        $ cover_height = cover_dimensions[1]
+        $ cover_width = cover_dimensions[0]
+      $else:
+        $ cover_height = 360
+        $ cover_width = 180
+      $ aspect_ratio = cover_width / cover_height
+
+      $ fixed_width = 175
+      $ desired_height_for_fixed_width = fixed_width / aspect_ratio
+      <a href="$work_edition_url">
+        <img
               itemprop="image"
               src="$cover"
               alt="$_('Cover of: %(title)s', title=full_title)"
               title="$_('Cover of: %(title)s', title=full_title)"
-      /></a>
+        />
+        <style>
+          .searchResultItem {
+            .bookcover {
+              img {
+                width: 100%;
+                aspect-ratio: $aspect_ratio;
+                object-fit: cover;
+              }
+            }
+          }
+          @media only screen and (max-width: 768px) {
+            .searchResultItem {
+              .bookcover {
+                img {
+                  width: ${fixed_width}px;
+                  height: ${desired_height_for_fixed_width}px;
+                }
+              }
+            }
+          }
+        </style>
+      </a>
     </span>
 
     <div class="details">

openlibrary/plugins/openlibrary/code.py

@@ -1329,6 +1329,7 @@ def setup_template_globals():
         get_book_provider,
         get_book_provider_by_name,
         get_cover_url,
+        get_dimensions_cover,
     )
 
     def get_supported_languages():
@@ -1369,6 +1370,7 @@ def get_supported_languages():
             'get_book_provider': get_book_provider,
             'get_book_provider_by_name': get_book_provider_by_name,
             'get_cover_url': get_cover_url,
+            'get_dimensions_cover': get_dimensions_cover,
             # bad use of globals
             'is_bot': is_bot,
             'time': time,

openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js

@@ -231,9 +231,10 @@ function getSeedType(seed) {
  * @param {string} seedKey
  * @param {string} listTitle
  * @param {string} [coverUrl]
+ * @param {string} desiredHeight
  * @returns {HTMLLIElement}
  */
-export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = DEFAULT_COVER_URL) {
+export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = DEFAULT_COVER_URL, desiredHeight = '') {
     if (!i18nStrings) {
         const i18nInput = document.querySelector('input[name=list-i18n-strings]')
         i18nStrings = JSON.parse(i18nInput.value)
@@ -244,7 +245,7 @@ export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl =
     const seedType = getSeedType(seedKey)
 
     const itemMarkUp = `<span class="image">
-                <a href="${listKey}"><img src="${coverUrl}" alt="${i18nStrings['cover_of']}${listTitle}" title="${i18nStrings['cover_of']}${listTitle}"/></a>
+                <a href="${listKey}"><img src="${coverUrl}" alt="${i18nStrings['cover_of']}${listTitle}" title="${i18nStrings['cover_of']}${listTitle}" width="22px" height="${desiredHeight}"/></a>
             </span>
             <span class="data">
                 <span class="label">

openlibrary/plugins/openlibrary/js/my-books/index.js

@@ -7,7 +7,7 @@ import { removeChildren } from '../utils'
 
 // XXX : jsdoc
 // XXX : decompose
-export function initMyBooksAffordances(dropperElements, showcaseElements) {
+export async function initMyBooksAffordances(dropperElements, showcaseElements) {
     const showcases = []
     for (const elem of showcaseElements) {
         const showcase = new ShowcaseItem(elem)
@@ -42,7 +42,7 @@ export function initMyBooksAffordances(dropperElements, showcaseElements) {
 
     getListPartials()
         .then(response => response.json())
-        .then((data) => {
+        .then(async (data) => {
             // XXX : convert this block to one or two function calls
             const listData = data.listData
             const activeShowcaseItems = []
@@ -56,7 +56,17 @@ export function initMyBooksAffordances(dropperElements, showcaseElements) {
                         const coverID = key.slice(key.indexOf('OL'))
                         const cover = `https://covers.openlibrary.org/b/olid/${coverID}-S.jpg`
 
-                        activeShowcaseItems.push(createActiveShowcaseItem(listKey, seedKey, listData[listKey].listName, cover))
+                        const img = new Image()
+                        img.src = cover
+
+                        await new Promise((resolve) => {
+                            img.onload = () => {
+                                let desiredHeight = 22 * img.height / img.width
+                                desiredHeight = desiredHeight.toFixed(2)
+                                activeShowcaseItems.push(createActiveShowcaseItem(listKey, seedKey, listData[listKey].listName, cover, desiredHeight))
+                                resolve()
+                            }
+                        })
                     }
                 }
             }

openlibrary/templates/covers/book_cover.html

@@ -13,10 +13,30 @@
 $ src = cover_url or '/images/icons/avatar_book.png'
 $ srcset = '%s 2x' % (cover_lg or '/images/icons/avatar_book-lg.png')
 
+$ cover_height = None
+$ cover_width = 180  # Fixed width of the image
+$ aspect_ratio = 1
+$ cover = book.get_cover()
+$if cover:
+    $ cover_height = cover.height()
+    $ cover_width = cover.width()
+    $ aspect_ratio = cover.width() / cover.height()
+$else:
+    $ ia_cover_url = book.get_ia_cover(book.ocaid, "M")
+    $ parts = ia_cover_url.split('_h')
+    $ cover_height_str = parts[1].split('.')[0]
+    $ cover_height = int(cover_height_str)
+    $ cover_width_str = parts[0].split('_w')[1]
+    $ cover_width = int(cover_width_str)
+    $ aspect_ratio = cover_width / cover_height
+
+$ fixed_width = 180  # Fixed width of the container
+$ calculated_height = fixed_width / aspect_ratio
+
 $if preload:
     $add_metatag(tag="link", **{'rel': 'preload', 'as': 'image', 'href': src, 'imagesrcset': srcset})
 
-<div class="coverMagic cover-animation">
+<div class="coverMagic cover-animation" style="min-height: ${calculated_height}px;">
     <div class="SRPCover bookCover" style="display: $cond(cover_url, 'block', 'none');">
         <a
             href="$cover_lg"

openlibrary/templates/lists/home.html

@@ -36,7 +36,12 @@ <h2>$_('Active Lists')</h2>
                         <div class="cover">
                             $ cover = list.get_cover() or list.get_default_cover()
                             $ cover_url = cover and cover.url("S") or "/images/icons/avatar_book-sm.png"
-                            <img src="$cover_url" alt=""/>
+                            $ cover_width = cover.width()
+                            $ cover_height = cover.height()
+                            $ cover_aspect_ratio = cover_width and cover_height and cover_width / cover_height
+                            $ cover_width_for_58px_height = cover_aspect_ratio and int(58 * cover_aspect_ratio)
+                            $ cover_height_for_25px_width = cover_width_for_58px_height and round(1450 / cover_width_for_58px_height)
+                            <img src="$cover_url" alt="" width="25px" height="$cover_height_for_25px_width" />
                         </div>
                         $list.name
                     </a>

static/css/components/book.less

@@ -29,7 +29,7 @@
     margin: 0 auto;
     box-shadow: 1px 2px 5px 0 @book-cover-shadow-color;
     border-radius: 3px;
-    max-width: 100%;
-    max-height: 200px;
+    width: 100%;
+    height: 12rem;
   }
 }

static/css/components/listLists.less

@@ -28,8 +28,7 @@ ul.listLists {
       padding: 0 10px;
       /* stylelint-disable max-nesting-depth */
       img {
-        width: 32px;
-        max-width: 100%;
+        width: 22px;
       }
       /* stylelint-enable max-nesting-depth */
     }

static/css/layout/index.less

@@ -12,9 +12,6 @@
 div.contentBody,
 div#contentBody {
   padding: 0 @contentBody-padding @contentBody-padding;
-  img {
-    max-width: 100%;
-  }
   pre {
     overflow-x: auto;
   }