When no cover show title and author

openlibrary/templates/books/custom_carousel.html

@@ -1,21 +1,25 @@
 $def with(books=[], title="", url="", key="", min_books=1, load_more=None, test=False)
 
 $def render_carousel_cover(book, lazy):
+  $ fallback_cover = 'https://openlibrary.org/images/icons/avatar_book.png'
+  $ cover_host = '//covers.openlibrary.org'
   $ url = book.get('key') or book.url
   $ title = book.title
+
   $if book.get('cover_url'):
     $ cover_url = book.get('cover_url')
   $elif book.get('cover_id'):
     $ cover_url = '%s/b/id/%s-M.jpg'%(cover_host, book.get('cover_id'))
   $elif book.get('ia'):
     $ cover_url = '%s/b/ia/%s-M.jpg?default=%s'%(cover_host, book.get('ia')[0], fallback_cover)
   $else:
-     $ cover_url = fallback_cover
+     $ cover_url = False
   $if book.get('authors'):
     $ author_names = [author.name for author in book.authors]
     $ byline = ' by ' + ', '.join(author_names)
   $else:
     $ byline = ''
+    $ author_names = ''
   $ modifier = ''
   $ cta = None
   $ cta_cls = 'available'
@@ -45,10 +49,17 @@
   <div class="book carousel__item">
     <div class="book-cover">
       <a href="$(url)">
-        <img class="bookcover"
-          width="130" height="200"
-          title="$('%s%s'%(title,byline))"
-          $img_attr="$(cover_url)"/>
+        $if cover_url:
+          <img class="bookcover"
+            width="130" height="200"
+            title="$('%s%s'%(title,byline))"
+            $img_attr="$(cover_url)"/>
+        $else:
+          <div class="carousel__item__blankcover">
+            <div class="carousel__item__blankcover--title">$:macros.TruncateString(title, 70)</div>
+            $if author_names:
+              <div class="carousel__item__blankcover--authors">$:macros.TruncateString(', '.join(author_names), 30)</div>
+          </div>
       </a>
     </div>
     $if cta:
@@ -75,9 +86,6 @@ <h2 class="home-h2"><a href="$url">$title</a></h2>
         $ config = ['.carousel-' + key, 6, 5, 4, 3, 2, 1, load_more_config ]
         <div class="carousel carousel-$key carousel--progressively-enhanced"
           data-config="$json_encode(config)">
-          $ cover_host = '//covers.openlibrary.org'
-          $ fallback_cover = 'https://openlibrary.org/images/icons/avatar_book.png'
-
           $for index, book in enumerate(books or []):
               $:render_carousel_cover(book, index > 5)
         </div>

package.json

@@ -65,7 +65,7 @@
     },
     {
       "path": "static/build/page-user.css",
-      "maxSize": "19KB"
+      "maxSize": "19.5KB"
     }
   ],
   "devDependencies": {

static/css/components/carousel.less

@@ -26,6 +26,11 @@
   overflow-x: scroll;
   padding: 10px 20px;
 
+  a,
+  a:link {
+    text-decoration: none;
+  }
+
   &__item {
     float: left;
     height: 100%;
@@ -113,4 +118,42 @@
     overflow: hidden;
   }
 }
+
+@height-blank-cover: 200px;
+.carousel__item__blankcover {
+  position: relative;
+  padding: 33% 10px 10px 10px;
+  text-align: center;
+  background: @lighter-grey;
+  font-size: 1em;
+  color: black;
+  height: @height-blank-cover;
+
+  // White border
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    border: 2px solid fade(@white, 50%);
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: 10px;
+  }
+
+  &--title {
+    position: relative;
+    font-size: 0.9em;
+  }
+
+  &--authors {
+    position: relative;
+    color: hsl(0,0%,40%);
+    padding: 4px 4px 0;
+    font-size: 0.6875em;
+    font-style: oblique;
+  }
+}
+
 @import (less) "category-item.less";