From 46f26d798800e4527bb57f289872aeb10106f628 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Mon, 23 Sep 2024 13:29:44 -0700
Subject: [PATCH] Fix blog post title image display (#3233)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

For some reason, the blurred placeholder image that nextjs generates can
be of a different size than the original image. The title image we are
using is `1792 × 1024 px` (aspect ratio 1.75) but the blurred image is
`240 x 150 px` (aspect ratio 1.6). Perhaps nextjs uses a few fixed
sizes. When we switched from `cover` to `contain` for the blurred image
in #3232, it resulted in a noticeable flicker. This PR takes a different
approach to fixing the layout problem. This fixes both the layout shift
and makes sure the image clickbox is correct at all times.

Before/after:


https://github.com/user-attachments/assets/8ea2732c-285d-4e48-9489-b8687f436288


## Checklist
- [x] I have read and understood the [WATcloud
Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines)
- [x] I have performed a self-review of my code
---
 components/blog-post.tsx | 7 ++++++-
 components/picture.tsx   | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index 365d8be..6b3b229 100644
--- a/components/blog-post.tsx
+++ b/components/blog-post.tsx
@@ -112,7 +112,12 @@ export function BlogPostHeader() {
                     <Picture
                         image={titleImage}
                         alt={titleImageAttribution}
-                        imgClassName='max-h-96 object-contain'
+                        // The title images are either square or wide.
+                        // On small screens (viewport width < viewport height), the width is the constraint and the image looks nice by default (w-full).
+                        // On larger screens (viewport width > viewport height), we want to make sure
+                        // the image is not too tall, so we constrain the height.
+                        // w-auto is used to make sure the image doesn't get stretched.
+                        imgClassName='md:h-96 md:w-auto'
                     />
                 </PopoverTrigger>
                 <PopoverContent side='bottom' className="w-96 max-w-full">
diff --git a/components/picture.tsx b/components/picture.tsx
index 4510822..8691b4d 100644
--- a/components/picture.tsx
+++ b/components/picture.tsx
@@ -41,7 +41,10 @@ export default function Picture({
   )}")`;
 
   const placeholderStyle = {
-    backgroundSize: "contain",
+    // This is `cover` because the blur image can have a different aspect ratio
+    // E.g. an image with 1792 × 1024 px can have a blur image with 240 x 150 px
+    // This may be due to some implementation details in the next/image loader
+    backgroundSize: "cover",
     backgroundPosition: "50% 50%",
     backgroundRepeat: "no-repeat",
     backgroundImage,