# Product media

<figure><img src="/files/eLHLIlbt82CCZSc4HeKi" alt=""><figcaption></figcaption></figure>

## Overview

A versatile product media block that renders product images or videos with extensive customization options. Features include hover effects with secondary media, aspect ratio control, flexible padding and spacing, comprehensive color schemes, and responsive visibility settings. The block automatically detects and handles both image and video media types from the product's media collection.

## Common use cases

* Display product images on product pages and product cards
* Show product videos with autoplay and loop functionality
* Enable hover effects to show secondary product images
* Control aspect ratios for consistent product image display
* Use object-fit settings to control how images fill their containers
* Configure appropriate padding based on the block's container context

## Block settings

### General

| Setting                | Description                 | Options                   |
| ---------------------- | --------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |

### Content

| Setting                    | Description                                                    | Options                  |
| -------------------------- | -------------------------------------------------------------- | ------------------------ |
| Product                    | Select the product to display media for                        | Product picker           |
| Show second image on hover | Displays the second product image when hovering over the first | Checkbox (default: true) |

### Spacing

| Setting                   | Description                              | Options                   |
| ------------------------- | ---------------------------------------- | ------------------------- |
| Enable horizontal padding | Adds horizontal padding around the media | Checkbox (default: false) |
| Enable top padding        | Adds top padding around the media        | Checkbox (default: false) |
| Enable bottom padding     | Adds bottom padding around the media     | Checkbox (default: false) |

### Color

| Setting      | Description                          | Options                                                                                                                                                                   |
| ------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Color scheme | Controls the background color scheme | <p>• Body<br>• Neutral<br>• Accent 1 (default)<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur</p> |
| Color border | Controls the border color            | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None<br><br>Visible when border position is not blank</p>                      |

### Style

| Setting             | Description                                                    | Options                                                                                                            |
| ------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position     | Controls where borders appear                                  | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |
| Enable aspect ratio | Forces the media to maintain a specific aspect ratio           | Checkbox (default: false)                                                                                          |
| Show entire image   | Uses object-contain instead of object-cover to show full image | <p>Checkbox (default: true)<br><br>Visible when enable aspect ratio is true</p>                                    |
| Aspect ratio        | The aspect ratio to maintain                                   | <p>• Square<br>• Landscape<br>• Portrait<br>• None<br><br>Visible when enable aspect ratio is true</p>             |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/products/product-media.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.