How to change the size of Product images

Last updated on
27 October 2017

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

Ubercart uses Drupal's core Image module to control the display of product images. Because this is a core Drupal module, there's lots of detailed documentation on how it works. Here, we will just discuss some of the specifics as they relate to Ubercart. To find out more about the core Image module, read https://www.drupal.org/docs/7/core/modules/image/working-with-images.

When you install Ubercart, a number of "styles" are automatically created for you. (These were called "presets" in Drupal 6.) These styles define how the product images are displayed in various places on your site such as the product page, the cart page, and the product catalog.

If you go to the Image settings page at Configuration » Media » Image styles (admin/config/media/image-styles) you will find the list of all the styles available on your site. Immediately after you've installed Ubercart, it should look something like the following:

Ubercart styles all have a "uc_" prefix - any other styles you see are created by Drupal core or other contributed modules. The style that controls the image display on the product page is called "uc_product"; the "uc_product" style defaults to scaling the images to fit in a 250 x 250 pixel box, while preserving the original image's aspect ratio. To change the way Ubercart displays images, you must modify the existing style.

You may click on the "edit" link for the "uc_product" style to see the details of the current settings and to modify the settings to fit your needs. It should look something like this:

The "Override defaults" button will expose a link to edit the existing settings and to add new effects. If you change the defaults, be sure to submit your changes by pushing the "Update style" button when you're done.

Note that by modifying the Ubercart styles other than uc_product you can control how images appear in product teasers, on the cart page, in the product list page, etc.

Help improve this page

Page status: No known problems

You can: