From 74c0de8f5490b2fd0e113903aacd049c307bc5ab Mon Sep 17 00:00:00 2001
From: Yash Saravgi <f20191530@hyderabad.bits-pilani.ac.in>
Date: Fri, 29 Jan 2021 07:39:41 +0530
Subject: [PATCH] Lazy loaded carousel items should have a src attribute

A 1px by 1px base64 encoded thumbnail is used for covers that will
be lazy loaded as a placeholder. The data-src attribute points to the
real cover and is only added when necessary.

This resolves HTML validation issues on the home page.

Fixes: #4481
---
 openlibrary/templates/books/custom_carousel.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/openlibrary/templates/books/custom_carousel.html b/openlibrary/templates/books/custom_carousel.html
index ed3f5c5b9d4..dd5ee354011 100644
--- a/openlibrary/templates/books/custom_carousel.html
+++ b/openlibrary/templates/books/custom_carousel.html
@@ -30,10 +30,6 @@
     $ author_names = ''
   $ modifier = ''
   $ work_key = book.key if book.key.startswith('/work') else book.get('work_key')
-  $if lazy:
-    $ img_attr = 'data-lazy'
-  $else:
-    $ img_attr = 'src'
 
   <div class="book carousel__item">
     <div class="book-cover">
@@ -42,7 +38,11 @@
           <img class="bookcover" loading="lazy"
             width="130" height="200"
             title="$('%s%s'%(title,byline))"
-            $img_attr="$(cover_url)"/>
+          $if lazy:
+            data-lazy="$(cover_url)"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="/>
+          $else:
+            src="$(cover_url)"/>
         $else:
           <div class="carousel__item__blankcover">
             <div class="carousel__item__blankcover--title">$:macros.TruncateString(title, 70)</div>