Storefront Edge theme, change homepage Latest Products thumbnail size.

Why are the thumbnails in the Homepage Latest Products grid badly cropped?

Storefront themes Edge theme has two possible home page layouts. The Homepage #2 Template has a grid area below the slider titled “Latest Products”. This displays a grid of thumbnails showing, you guessed it, the most recently added products. Max 2 rows of 3 thumbnails. The problem is these are hard coded to be 140×140 pixels which can cause some pretty ugly cropping in a high visibility area if your product images are not square. So how to change this? Luckily this is easy.

Locate the home_template.php file which is in Edge theme folder. Make a safe copy somewhere in case you have problems. Really this one is so easy you could just do the edit by going to Appearance/Editor in WordPress, and clicking home_template.php on the file list.
Around line 89 in Edge 1.0.5 you will find two numbers that set the width and height for these thumbnails. I have included enough code so you can find the correct section. The line numbers may vary slightly depending on your version.

	
		$width = '140';

	
		$height = '140';

	$latest_products = get_posts( array(
		'post_type'   => 'wpsc-product',

Change the numbers to suit your product images. You can use the handy online aspect ratio calculator to work out the size. I suggest you stick with 140 wide and adjust the height. Web page layout is more flexible for height changes than width. For example if your single product page images are 300 wide x 400 high, to retain the same aspect ratio and keep the width of 140 pixels, you would use a height of 187 pixels.

The thumbnails will actually be regenerated at the new size when you reload the page, not just stretched by CSS!