fix: decrease image size for Collections in certain cases

src/blocks/collections/class-collections-block.php

@@ -65,6 +65,18 @@ final class Collections_Block {
 	 */
 	public static function init() {
 		add_action( 'init', [ __CLASS__, 'register_block' ] );
+		add_action( 'after_setup_theme', [ __CLASS__, 'register_image_sizes' ] );
+	}
+
+	/**
+	 * Register custom image sizes for collections block.
+	 *
+	 * @return void
+	 */
+	public static function register_image_sizes() {
+		add_image_size( 'newspack_collection_small', 550, 9999 );
+		add_image_size( 'newspack_collection_medium', 800, 9999 );
+		add_image_size( 'newspack_collection_large', 1200, 9999 );
 	}
 
 	/**
@@ -264,19 +276,27 @@ protected static function render_collection( $collection, $attributes ) {
 	 * @return string Image size name.
 	 */
 	public static function get_image_size_from_attributes( $attributes ) {
+		if ( isset( $attributes['layout'], $attributes['columns'] ) && 'grid' === $attributes['layout'] && 4 <= $attributes['columns'] ) {
+			return 'newspack_collection_small';
+		}
+
+		if ( isset( $attributes['layout'], $attributes['columns'] ) && 'grid' === $attributes['layout'] && 3 === $attributes['columns'] ) {
+			return 'newspack_collection_medium';
+		}
+
 		if ( ! isset( $attributes['layout'] ) || 'grid' === $attributes['layout'] ) {
-			return 'post-thumbnail';
+			return 'newspack_collection_large';
 		}
 
 		$size = isset( $attributes['imageSize'] ) ? $attributes['imageSize'] : 'small';
 		switch ( $size ) {
 			case 'large':
-				return 'full';
+				return 'newspack_collection_large';
 			case 'medium':
-				return 'medium_large';
+				return 'newspack_collection_medium';
 			case 'small':
 			default:
-				return 'medium';
+				return 'newspack_collection_small';
 		}
 	}
 

tests/unit-tests/collections/class-test-collections-block.php

@@ -199,33 +199,56 @@ public function test_get_image_size_from_attributes() {
 			'imageSize' => 'small',
 		];
 		$size       = Collections_Block::get_image_size_from_attributes( $attributes );
-		$this->assertEquals( 'medium', $size, 'Small should map to medium' );
+		$this->assertEquals( 'newspack_collection_small', $size, 'Small should map to newspack_collection_small' );
 
 		// Test medium size.
 		$attributes = [
 			'layout'    => 'list',
 			'imageSize' => 'medium',
 		];
 		$size       = Collections_Block::get_image_size_from_attributes( $attributes );
-		$this->assertEquals( 'medium_large', $size, 'Medium should map to medium_large' );
+		$this->assertEquals( 'newspack_collection_medium', $size, 'Medium should map to newspack_collection_medium' );
 
 		// Test large size.
 		$attributes = [
 			'layout'    => 'list',
 			'imageSize' => 'large',
 		];
 		$size       = Collections_Block::get_image_size_from_attributes( $attributes );
-		$this->assertEquals( 'full', $size, 'Large should map to full' );
+		$this->assertEquals( 'newspack_collection_large', $size, 'Large should map to newspack_collection_large' );
 
 		// Test default.
 		$attributes = [ 'layout' => 'list' ];
 		$size       = Collections_Block::get_image_size_from_attributes( $attributes );
-		$this->assertEquals( 'medium', $size, 'Default should be medium' );
+		$this->assertEquals( 'newspack_collection_small', $size, 'Default should be newspack_collection_small' );
 
-		// Test grid layout.
-		$attributes = [ 'layout' => 'grid' ];
+		// Test grid layout with columns < 3 (should return newspack_collection_large).
+		foreach ( [ 1, 2 ] as $columns ) {
+			$attributes = [
+				'layout'  => 'grid',
+				'columns' => $columns,
+			];
+			$size       = Collections_Block::get_image_size_from_attributes( $attributes );
+			$this->assertEquals( 'newspack_collection_large', $size, "Grid layout with {$columns} columns should map to newspack_collection_large" );
+		}
+
+		// Test grid layout with columns = 3 (should return newspack_collection_medium).
+		$attributes = [
+			'layout'  => 'grid',
+			'columns' => 3,
+		];
 		$size       = Collections_Block::get_image_size_from_attributes( $attributes );
-		$this->assertEquals( 'post-thumbnail', $size, 'Grid layout should map to post-thumbnail' );
+		$this->assertEquals( 'newspack_collection_medium', $size, 'Grid layout with 3 columns should map to newspack_collection_medium' );
+
+		// Test grid layout with columns >= 4 (should return newspack_collection_small).
+		foreach ( [ 4, 5, 6 ] as $columns ) {
+			$attributes = [
+				'layout'  => 'grid',
+				'columns' => $columns,
+			];
+			$size       = Collections_Block::get_image_size_from_attributes( $attributes );
+			$this->assertEquals( 'newspack_collection_small', $size, "Grid layout with {$columns} columns should map to newspack_collection_small" );
+		}
 	}
 
 	/**