Hollis Creek Family Dental · Repair report

Exhibit A-2 Evidence: commit 82b2c06

Committed · 82b2c068ae7f38b77a4716a2b1b6233e28406a24

Phones downloaded full-size camera images

The repository itself is private; this page carries the commit as it is recorded there.

Commit message

Fix A-2 follow-up: hero size that keeps the upload's ratio, so srcset is not empty

The measurement found one image still without srcset on the repaired home
page: the hero used a 1600x900 hard crop (16:9) of a 3:2 upload. WordPress
only lists sizes of the same aspect ratio in srcset, so no other size
qualified and every phone got the 1600px crop.

Fix: use the "large" size, which keeps the upload's ratio, so srcset lists
768, 1024, 1536 and 2048px versions; drop the unused crop size.

Proof: tests/phpunit/repair/ImagesTest.php, now with a 3000x2250 upload.

Exhibit: A-2

The change

Text files only, as recorded in git. Lines starting with + were added, lines with − removed.

Files changed

---
 site/wp-content/themes/hollis-child/front-page.php | 2 +-
 site/wp-content/themes/hollis-child/functions.php  | 1 -
 tests/phpunit/repair/ImagesTest.php                | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/site/wp-content/themes/hollis-child/front-page.php b/site/wp-content/themes/hollis-child/front-page.php
index 174a1cf..bf429b2 100644
--- a/site/wp-content/themes/hollis-child/front-page.php
+++ b/site/wp-content/themes/hollis-child/front-page.php
@@ -37,7 +37,7 @@ $hollis_office = (int) get_theme_mod( 'hollis_office_image' );
 			<?php
 			echo hollis_child_image( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- wp_get_attachment_image() output.
 				$hollis_hero,
-				'hollis-hero',
+				'large',
 				array(
 					'loading'       => 'eager',
 					'fetchpriority' => 'high',
diff --git a/site/wp-content/themes/hollis-child/functions.php b/site/wp-content/themes/hollis-child/functions.php
index bc40d13..361c14f 100644
--- a/site/wp-content/themes/hollis-child/functions.php
+++ b/site/wp-content/themes/hollis-child/functions.php
@@ -14,7 +14,6 @@ define( 'HOLLIS_CHILD_VERSION', '1.3.0' );
  */
 function hollis_child_setup() {
 	load_child_theme_textdomain( 'hollis-child', get_stylesheet_directory() . '/languages' );
-	add_image_size( 'hollis-hero', 1600, 900, true );
 }
 add_action( 'after_setup_theme', 'hollis_child_setup' );
 
diff --git a/tests/phpunit/repair/ImagesTest.php b/tests/phpunit/repair/ImagesTest.php
index c2cbd84..fc4c595 100644
--- a/tests/phpunit/repair/ImagesTest.php
+++ b/tests/phpunit/repair/ImagesTest.php
@@ -20,7 +20,7 @@ class ImagesTest extends WP_UnitTestCase {
 	public function set_up() {
 		parent::set_up();
 		hc_booking_install_table();
-		$this->image = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/33772.jpg' );
+		$this->image = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image-large.jpg' /* 3000x2250, like a camera upload */ );
 		set_theme_mod( 'hollis_hero_image', $this->image );
 		set_theme_mod( 'hollis_office_image', $this->image );
 		$member = self::factory()->post->create(

The proving test

tests/phpunit/repair/ImagesTest.php

tests/phpunit/repair/ImagesTest.php, as committed.

<?php
/**
 * Exhibit A-2: the home page and team photos are served at the size of their slot.
 *
 * @package Hollis\Tests
 */

/**
 * Images.
 */
class ImagesTest extends WP_UnitTestCase {

	/**
	 * Attachment used for every image slot.
	 *
	 * @var int
	 */
	private $image;

	public function set_up() {
		parent::set_up();
		hc_booking_install_table();
		$this->image = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image-large.jpg' /* 3000x2250, like a camera upload */ );
		set_theme_mod( 'hollis_hero_image', $this->image );
		set_theme_mod( 'hollis_office_image', $this->image );
		$member = self::factory()->post->create(
			array(
				'post_type'  => 'hc_team',
				'post_title' => 'Test Member',
			)
		);
		set_post_thumbnail( $member, $this->image );
	}

	/**
	 * Renders the home page template.
	 *
	 * @return string
	 */
	private function home_html() {
		$this->go_to( home_url( '/' ) );
		ob_start();
		include get_stylesheet_directory() . '/front-page.php';
		return ob_get_clean();
	}

	/**
	 * All <img> tags in the markup.
	 *
	 * @param string $html Markup.
	 * @return string[]
	 */
	private function images( $html ) {
		preg_match_all( '/<img\b[^>]*>/', $html, $m );
		return $m[0];
	}

	public function test_hero_has_srcset_dimensions_and_high_priority_not_the_original_upload() {
		$imgs = $this->images( $this->home_html() );
		$this->assertNotEmpty( $imgs );
		$hero = $imgs[0];
		$this->assertMatchesRegularExpression( '/\ssrcset="[^"]+\s\d+w/', $hero );
		$this->assertMatchesRegularExpression( '/\ssizes="/', $hero );
		$this->assertMatchesRegularExpression( '/\swidth="\d+"/', $hero );
		$this->assertMatchesRegularExpression( '/\sheight="\d+"/', $hero );
		$this->assertStringContainsString( 'fetchpriority="high"', $hero );
		$this->assertStringNotContainsString( 'loading="lazy"', $hero );
		$this->assertStringNotContainsString( wp_get_original_image_url( $this->image ) . '"', $hero );
	}

	public function test_images_below_the_fold_load_lazily_with_srcset_and_alt() {
		$imgs = array_slice( $this->images( $this->home_html() ), 1 );
		$this->assertNotEmpty( $imgs );
		foreach ( $imgs as $img ) {
			$this->assertStringContainsString( 'loading="lazy"', $img );
			$this->assertMatchesRegularExpression( '/\ssrcset="/', $img );
			$this->assertMatchesRegularExpression( '/\salt="/', $img );
		}
	}
}

Back to Exhibit A-2