> From the [Strife developer docs](https://strife.app/docs/reference/fields/image-group). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Image Group

The Image field lets you define a set of images for different media/resolutions to crop, zoom, and insert images effortlessly. It stores the optimized image URLs along with crop data in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-26%20at%2013.37.39.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Image Group field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Medias</td><td>Specifies the various media formats by providing the format name/key, width, and height to add images tailored to different media requirements. Examples of medias could be 'Desktop', 'Tablet' and 'Mobile'.</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-image-group`
* **Type:** `image-group`
* Reference ID: `str-image-group`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-image-group",
    "type": "image-group",
    "propertyName": "...",
    ...
    "attributes": {
      "paddingColor": "..."     //Hex color format
      "paddingAlpha": 0.5,      //Number between 0-1
      "hideAlt": false
    },
    "options": {
      "medias": [
          {
              "name": "...",
              "width": 300,
              "height": 200
          },
          ...
      ]
    }
  },
  ...
}
```

### Live preview

The compatible Strife Web Component for an Image Group field is the `str-picture` component.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).