Product images

This page includes tips and useful modules for displaying product images in Drupal Commerce.

Drupal Core Image module

The Image module defines the image field type and provides image manipulation tools. It is installed by default in a standard Drupal 8 site. To help maintain consistency for the display of your product images, you can set up a custom image style. This image style will appear as one of the options for "Image" field formatters. Create Image view mode

Example: Create a Product image style
  1. Navigate to the Image styles administration page at /admin/config/media/image-styles.
  2. Click the "Add image style" button.
  3. Enter "Product (570×570)" for the Image style name.
  4. Click the "Edit" button next to the automatically created Machine name to change the machine name to "product".
  5. Select the "Scale" Effect. Create Image view mode

  6. Click the "Add" button to add the Scale effect.
  7. Enter "570" for both the Width and the Height values.
  8. Click the "Add effect" button.

The "Product (570x570)" image style will now appear as an option for Image field formatters.

Image Delta Formatter module

The Image delta formatter module provides a custom formatter for image fields that are configured for multiple images. It allows the user to specify which images (deltas) should be displayed. It can be useful in cases in which a product or product variation has multiple images, but in a certain context, you only want to display a single image. For example, if you want to display multiple products in a uniform grid layout, showing just a single image per product looks best.

Example: Create a custom "Single image" view mode for product variations

See the Multi-product displays documentation for an example of how this custom view mode can be used.

  1. Start by installing the Image delta formatter module in the usual way.
  2. Navigate to the View modes administration page at /admin/structure/display-modes/view.
  3. Scroll down to the "Product variation" entity type and click the "Add new Product variation view mode" link.
  4. Enter "Single image" for the Name and click the "Save" button.

Create Image view mode

  1. Navigate to the Manage display administration page for your product variation type at /admin/commerce/config/product-variation-types/simple/edit/display (for the "Simple" product variation type).
  2. Click on "Custom Display Settings" to enable the "Single image" view mode.

Enable Single image view mode

  1. Click the "Save" button.
  2. Click on the "Single image" link that now appears at the top of the Manage display administration page.

Configure Single image view mode

  1. Drag the "Price" field to the "Disabled" section.
  2. Set the "Images" field Label to "Hidden".
  3. Set the "Images" field Format to "Image delta".
  4. Click the gear icon in the rightmost column to set the image delta formatter's "Image style" to the "Product (570x570)" image style (or another preferred image style).

Configure Image delta formatter

  1. Click the "Update" button to close the formatter configuration form.
  2. Click the "Save" button to save the settings for the Single image product variation display.

The "Single image" view mode will now be an option for displaying product variations.

Links and resources

Found errors? Think you can improve this documentation? edit this page