From 9af07c0234ca386956a0a68f2f1e6f3837ea072c Mon Sep 17 00:00:00 2001
From: Dan Fabulich <dan@fabulich.com>
Date: Mon, 1 Sep 2025 10:03:51 -0700
Subject: [PATCH] Add height and width attributes to ballot cover images

This prevents layout shift on the ballot page.

Fixes #453
---
 IFComp/lib/IFComp/Schema/Result/Entry.pm | 9 +++++++++
 IFComp/root/src/_current_entry_row.tt    | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/IFComp/lib/IFComp/Schema/Result/Entry.pm b/IFComp/lib/IFComp/Schema/Result/Entry.pm
index 1bbfc74a..e4f7ecab 100644
--- a/IFComp/lib/IFComp/Schema/Result/Entry.pm
+++ b/IFComp/lib/IFComp/Schema/Result/Entry.pm
@@ -930,6 +930,15 @@ sub cover_exists {
     }
 }
 
+sub cover_image {
+    my $self = shift;
+
+    return 0 unless $self->cover_exists;
+
+    my $image = Imager->new( file => $self->web_cover_file );
+    return $image;
+}
+
 sub create_web_cover_file {
     my $self = shift;
 
diff --git a/IFComp/root/src/_current_entry_row.tt b/IFComp/root/src/_current_entry_row.tt
index 327ac764..e658f2fe 100644
--- a/IFComp/root/src/_current_entry_row.tt
+++ b/IFComp/root/src/_current_entry_row.tt
@@ -3,7 +3,7 @@
     [% IF entry.cover_exists %]
     <div class="col-sm-4">
         <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
-            <a itemprop="contentUrl" href="[% c.uri_for_action( '/play/full_cover', [ entry.id ] ) %]" target="_blank"><img itemprop="thumbnailUrl" class="img-fluid" src="[% c.uri_for_action( '/play/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]" loading="lazy"></a>
+            <a itemprop="contentUrl" href="[% c.uri_for_action( '/play/full_cover', [ entry.id ] ) %]" target="_blank"><img itemprop="thumbnailUrl" class="img-fluid" src="[% c.uri_for_action( '/play/cover', [ entry.id ] ) %]" alt="Cover art for [% entry.title %]" height="[% entry.cover_image.getheight %]" width="[% entry.cover_image.getwidth %]" loading="lazy"></a>
 	    [% IF (entry.genai_state / 2) % 2 == 1 %]
 		<span style="font-size: smaller;" itemprop="genai_cover"><em>Generative artificial intelligence was used to make this cover art.</em></span>
 	    [% END %]