Screenshots: Add aspect ratio to the desktop image screenshot

This will keep mshots pending & 404 images consistent with the real screenshot sizes. Fixes #148
WordPress · Sep 13, 2023 · 5739e9e · 5739e9e
1 parent a5755b5
commit 5739e9e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php
@@ -85,7 +85,7 @@ function render( $attributes, $content, $block ) {
 function get_site_screenshot_src( $post, $type = 'desktop' ) {
 	$screenshot_url = false;
 	$media_id = get_post_meta( $post->ID, 'screenshot-' . $type, true );
-	$cache_key = '20221208'; // To break out of cached image.
+	$cache_key = '20230913'; // To break out of cached image.
 
 	$size = 'screenshot-' . $type;
 	$all_sizes = wp_get_registered_image_subsizes();

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss
@@ -53,4 +53,8 @@
 		width: 100%;
 		vertical-align: middle;
 	}
+
+	&.is-size-desktop img {
+		aspect-ratio: 535 / 300;
+	}
 }