Storefront Original theme, change the height of Carousel images in the homepage

The question

My products are books, so I need rectangular images. I found ways to do that for product pages and Gridview, but not the Carousel, they are square. How can I change the height of the images in the Carousel?

Answer

The Carousel images are in fact set to be 120 x 120 pixels. There is no simple backend setting to change this. But do not despair. You can easily adjust this with a small PHP change and a little CSS. If you have never done this do not fear, be brave jump in. See the notes at the end of this post for free tools and tips. Be aware that I am only explaining how to adjust the height of the Carousel images here. To adjust the width is much more complex and frankly not something you should attempt.

The PHP

You probably know that you can choose to show 4 different types of things in the Carousel in the Original theme. On Storefront Options Panel/Carousel Tab “Carousel Options” you can select no Carousel, in which case this post is of no interest to you, or Show Product Categories, Show Products, Show Posts and Show Carousel Post Type. Your choice determines which PHP file you need to edit as each has its own file. You only need to adjust the one you are using. Below are instructions grouped for each one with the file to edit, the code line to find and the number to change.
Line numbers are based on Original theme version 2.3.1, you should have no trouble finding the code in other versions.

You must keep the image width which is 120px and adjust the height to work for your images. To keep your images the right shape base the height on the measurements you have set in Settings/Store/Presentation tab for Product Thumbnail and Single Product image. You can use the handy online aspect ratio calculator if the math is tricky.
Your Product Thumbnail and Single Product image sizes should be based on your uploaded image sizes of course. For more on that see these 2 posts on selecting and implementing a good image plan, Part 1, Part 2

Show Product Categories

TEMPLATE PATH /includes/homepage/show_categories_carousel.php

<a href="<?php wpsc_print_category_url();?>" title="<?php wpsc_print_category_name();?>"><?php wpsc_print_category_image(120,120); ?><p><?php wpsc_print_category_name();?></p></a>

change the second number in wpsc_print_category_image(120,120)

Show Products

TEMPLATE PATH /includes/homepage/show_products_carousel.php

<img alt="<?php the_title();?>" title="<?php the_title();?>" src="<?php echo wpsc_the_product_thumbnail(120, 120); ?>" width="<?php echo $image['width']; ?>" height="<?php echo $image['height']; ?>" />

change the second number in wpsc_the_product_thumbnail(120, 120)

Show Posts

TEMPLATE PATH /includes/homepage/show_posts_carousel.php

$image = vt_resize( $thumb, '', 120, 120, true );

change the second number

Show Carousel Post Type

TEMPLATE PATH /includes/homepage/custom_post_type_carousel.php

$image = vt_resize( $thumb, '', 120, 120, true );

change the second number

CSS

You will also need to add some css so your images are not squashed into a 120×120 box. Adjust the height to match your change. Just put this in the Storefront Options Panel/Style Tab Custom CSS box and save. Change the height to suit your images.

.infiniteCarousel ul li {
  height: 180px;
}
.infiniteCarousel ul li img {
  height: 180px;
}