From 0649e5cf135a17162531f972d91f6bea4340b577 Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Fri, 25 Aug 2023 20:49:55 +0100
Subject: [PATCH] Lazy load images

---
 app/scss/packagegrid.scss                      | 11 +++++++++++
 app/templates/base.html                        |  4 ++--
 app/templates/collections/view.html            |  2 +-
 app/templates/index.html                       |  2 +-
 app/templates/macros/packagegridtile.html      |  4 ++--
 app/templates/macros/reviews.html              |  3 ++-
 app/templates/macros/threads.html              |  8 +++++---
 app/templates/packages/package_base.html       |  3 ++-
 app/templates/packages/review_create_edit.html |  3 ++-
 app/templates/threads/user_comments.html       |  3 ++-
 app/templates/threads/view.html                |  3 ++-
 11 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
index d0b6963e..65b9c1ae 100644
--- a/app/scss/packagegrid.scss
+++ b/app/scss/packagegrid.scss
@@ -13,6 +13,17 @@
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: center;
+
+	img {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		object-fit: cover;
+		padding: 0;
+		margin: 0;
+	}
 }
 
 .packagegridscrub {
diff --git a/app/templates/base.html b/app/templates/base.html
index 4f237763..e21c3425 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -15,8 +15,8 @@
 	<meta name="og:description" content="{{ self.description() | normalize_whitespace }}">
 	{%- endif %}
 
-	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css?v=2">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=42">
+	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css?v=3">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=43">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 
 	{% if noindex -%}
diff --git a/app/templates/collections/view.html b/app/templates/collections/view.html
index 1e19457a..6d9c389a 100644
--- a/app/templates/collections/view.html
+++ b/app/templates/collections/view.html
@@ -79,7 +79,7 @@
 				<div>
 					<article class="card">
 						<div class="ratio ratio-16x9">
-							<img class="card-img-top" src="{{ item.package.get_thumb_or_placeholder(4) }}" alt="{{ item.package.title }} screenshot">
+							<img loading="lazy" class="card-img-top" src="{{ item.package.get_thumb_or_placeholder(4) }}" alt="{{ item.package.title }} screenshot">
 						</div>
 						<div class="card-body">
 							{% if item.package.state.name != "APPROVED" %}
diff --git a/app/templates/index.html b/app/templates/index.html
index d8f549da..1f76d7f3 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -44,7 +44,7 @@
 				<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
 					<a href="{{ package.get_url('packages.view') }}">
 						<div class="ratio ratio-16x9">
-							<img src="{{ cover_image }}"
+							<img loading="lazy" src="{{ cover_image }}"
 								alt="{{ _('%(title)s by %(author)s', title=package.title, author=package.author.display_name) }}">
 						</div>
 						<div class="carousel-caption text-shadow">
diff --git a/app/templates/macros/packagegridtile.html b/app/templates/macros/packagegridtile.html
index 1915e60d..910e5bac 100644
--- a/app/templates/macros/packagegridtile.html
+++ b/app/templates/macros/packagegridtile.html
@@ -1,6 +1,6 @@
 {% macro render_pkgtile(package, show_author) -%}
-	<li class="packagetile flex-fill"><a href="{{ package.get_url('packages.view') }}"
-		style="background-image: url({{ package.get_thumb_or_placeholder(2) }});">
+	<li class="packagetile flex-fill"><a href="{{ package.get_url('packages.view') }}">
+		<img src="{{ package.get_thumb_or_placeholder(2) }}" loading="lazy">
 		<div class="packagegridscrub"></div>
 		<div class="packagegridinfo">
 			<h3>
diff --git a/app/templates/macros/reviews.html b/app/templates/macros/reviews.html
index 8ffe59e2..d55240d4 100644
--- a/app/templates/macros/reviews.html
+++ b/app/templates/macros/reviews.html
@@ -27,7 +27,8 @@
 			<a id="{{ review_anchor }}"></a>
 			<div class="col-md-1 p-1">
 				<a href="{{ url_for('users.profile', username=review.author.username) }}">
-					<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ review.author.get_profile_pic_url() }}">
+					<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
+						src="{{ review.author.get_profile_pic_url() }}" loading="lazy">
 				</a>
 			</div>
 			<div class="col-md-auto ps-1 pe-3 pt-2 text-center" style=" font-size: 200%;">
diff --git a/app/templates/macros/threads.html b/app/templates/macros/threads.html
index 03852f0a..3f1f4ae3 100644
--- a/app/templates/macros/threads.html
+++ b/app/templates/macros/threads.html
@@ -4,7 +4,8 @@
 	<li class="row my-2 mx-0">
 		<div class="col-md-1 p-1">
 			<a href="{{ url_for('users.profile', username=r.author.username) }}">
-				<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ r.author.get_profile_pic_url() }}">
+				<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
+					src="{{ r.author.get_profile_pic_url() }}" loading="lazy">
 			</a>
 		</div>
 		<div class="col pr-0">
@@ -81,7 +82,8 @@
 	<li class="row my-2 mx-0 align-items-center">
 		<div class="col-md-1 p-1">
 			<a href="{{ url_for('users.profile', username=r.author.username) }}">
-				<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ r.author.get_profile_pic_url() }}">
+				<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
+					src="{{ r.author.get_profile_pic_url() }}" loading="lazy">
 			</a>
 		</div>
 		<div class="col-auto">
@@ -137,7 +139,7 @@
 <div class="row mt-0 mb-4 comments mx-0">
 	<div class="col-md-1 p-1">
 		<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
-			 src="{{ current_user.get_profile_pic_url() }}">
+			 src="{{ current_user.get_profile_pic_url() }}" loading="lazy">
 	</div>
 	<div class="col pr-0">
 		<div class="card">
diff --git a/app/templates/packages/package_base.html b/app/templates/packages/package_base.html
index 10287bc4..abb9fca9 100644
--- a/app/templates/packages/package_base.html
+++ b/app/templates/packages/package_base.html
@@ -10,7 +10,8 @@
 						<span class="row m-0 p-0">
 							<span class="col-auto m-0 p-0">
 								<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
-										src="{{ package.get_thumb_or_placeholder(1) }}" alt="{{ _('Thumbnail') }}" style="max-height: 20px;">
+										src="{{ package.get_thumb_or_placeholder(1) }}"  loading="lazy"
+										alt="{{ _('Thumbnail') }}" style="max-height: 20px;">
 							</span>
 							<span class="col m-0 p-0 ps-2">
 								{{ package.title }}
diff --git a/app/templates/packages/review_create_edit.html b/app/templates/packages/review_create_edit.html
index cc06cfee..994d2736 100644
--- a/app/templates/packages/review_create_edit.html
+++ b/app/templates/packages/review_create_edit.html
@@ -22,7 +22,8 @@
 	{{ form.hidden_tag() }}
 	<div class="row mt-0 mb-4 comments mx-0">
 		<div class="col-md-1 p-1">
-			<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ current_user.get_profile_pic_url() }}">
+			<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
+				src="{{ current_user.get_profile_pic_url() }}" loading="lazy">
 		</div>
 		<div class="col">
 			<div class="card">
diff --git a/app/templates/threads/user_comments.html b/app/templates/threads/user_comments.html
index bbbecf6f..8d3a4d0f 100644
--- a/app/templates/threads/user_comments.html
+++ b/app/templates/threads/user_comments.html
@@ -18,7 +18,8 @@
 	<li class="row my-2 mx-0">
 		<div class="col-md-1 p-1">
 			<a href="{{ url_for('users.profile', username=r.author.username) }}">
-				<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ r.author.get_profile_pic_url() }}">
+				<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
+					src="{{ r.author.get_profile_pic_url() }}" loading="lazy">
 			</a>
 		</div>
 		<div class="col pr-0">
diff --git a/app/templates/threads/view.html b/app/templates/threads/view.html
index 52846b0f..cdb18ae3 100644
--- a/app/templates/threads/view.html
+++ b/app/templates/threads/view.html
@@ -109,7 +109,8 @@
 					</span>
 					{% for viewer in thread.get_visible_to() %}
 						<a href="{{ url_for('users.profile', username=viewer.username) }}" title="{{ viewer.display_name }}">
-							<img style="max-height: 2em;" src="{{ viewer.get_profile_pic_url() }}" alt="{{ viewer.display_name }}" />
+							<img style="max-height: 2em;" src="{{ viewer.get_profile_pic_url() }}" loading="lazy"
+								alt="{{ viewer.display_name }}">
 						</a>
 					{% endfor %}
 					<a href="{{ url_for('users.list_all') }}" title="{{ _('Plus approvers and editors') }}">