> For the complete documentation index, see [llms.txt](https://e-plus-agency.gitbook.io/plus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/product-medias.md).

# Product Medias

📢 Use this project, [contribute](https://github.com/{OrganizationName}/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Product Medias

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

![Desmostration](https://user-images.githubusercontent.com/48053804/200062001-e63c7f9e-2e2b-4561-8d94-0eade2bc2004.png)

### Configuration

1. Adding the app as a theme dependency in the `manifest.json` file;

```json
  "dependencies": {
    "{vendor}.product-medias": "0.x"
  }
```

1. Declaring the app's main block in a given theme template or inside another block from the theme.

#### `product-medias` props

| Prop name          | Type               | Description | Default value |
| ------------------ | ------------------ | ----------- | ------------- |
| `videoPosition`    | `number` or `last` | XXXXXXXX    | `last`        |
| `videoThumb`       | `boolean`          | XXXXXXXX    | `false`       |
| `labelRemove`      | `string`           | XXXXXXXX    | \`\`          |
| `optionsZoom`      | `object`           | XXXXXXXX    | \`\`          |
| `ModalZoomElement` | `element`          | XXXXXXXX    | \`\`          |

* `optionsZoom` object:

| Prop name | Type      | Description | Default value |
| --------- | --------- | ----------- | ------------- |
| `active`  | `boolean` | XXXXXXXX    | `XXXXXX`      |
| `mode`    | `enum`    | XXXXXXXX    | `XXXXXX`      |

* `mode` enum:

| mode             |
| ---------------- |
| `in-place-click` |
| `in-place-hover` |
| `disabled`       |
| `open-modal`     |

### Usage

#### With Embla

```json
{
"container#product-medias": {
		"props": {
			"blockClass": "product-medias"
		},

		"children": ["embla-carousel.group#product-medias"]
	},

	"embla-carousel.group#product-medias": {
		"children": [
			"product-medias#product-media-left",
			"product-medias#product-media-main"
		]
	},

	"product-medias#product-media-main": {
		"props": {
			"videoPosition": "last",
			"activeZoom": true,
			"labelRemove": "lata"
		},

		"children": ["embla-carousel#product-medias-main"]
	},

	"embla-carousel#product-medias-main": {
		"props": {
			"options": {
				"navigation": true,
				"dots": false,
				"draggable": true
			},

			"blockClass": ["product-medias-main"]
		}
	},

	"product-medias#product-media-left": {
		"props": {
			"videoPosition": "last",
			"videoThumb": true,
			"direction": "vertical",
			"breakpoints": {
				"0": {
					"slidesToScroll": 1,
					"sliderPerView": 1
				}
			}
		},

		"children": ["embla-carousel#product-medias-left"]
	},

	"embla-carousel#product-medias-left": {
		"props": {
			"options": {
				"navigation": false,
				"dots": false,
				"draggable": true,
				"breakpoints": {
					"0": {
						"slidesToScroll": 1,
						"sliderPerView": 3
					}
				}
			},

			"blockClass": ["product-medias-left"]
		}
  }
```

### Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).`

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

| CSS Handles |
| ----------- |
| `icon`      |
| `video`     |
| `image`     |

If there are none, add the following sentence instead:

`No CSS Handles are available yet for the app customization.`

### Contributors ✨

Thanks goes to these wonderful people:

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!