> ## Documentation Index
> Fetch the complete documentation index at: https://developers.kit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Media source plugin settings

> Media gallery settings components

This guide explains all of the media gallery settings components that are available to be used in your plugin's [settings JSON](/plugins/media-source/plugin-configuration#settings-json) configuration, giving your app users the ability to find the media they want to add into their email content.

<Accordion title="Example media gallery configuration">
  <img width="800" src="https://mintcdn.com/kit-314e57c1/ohR8KbVxvspIDffR/images/media_source/media_source_in_media_gallery.png?fit=max&auto=format&n=ohR8KbVxvspIDffR&q=85&s=6c3f37b5a2b100c2cce24364400d13d2" data-path="images/media_source/media_source_in_media_gallery.png" />
</Accordion>

## Compatible settings components

* [Dynamic select input](/plugins/component-library/dynamic-select-input)
* [Select input](/plugins/component-library/select-input)
* [Text input](/plugins/component-library/text-input)

<Note>Components for media source plugins work slightly differently than other plugin types. Check below to see how to utilize our preset `search`, `filter` and `sort` functionality, powered by `groups`:</Note>

### Search

The optional search functionality utilizes a [text input component](/plugins/component-library/text-input), housed in a media source specific `group` called `search_group` - offering a way for creators to filter your images through a text filter.

```json theme={null}
{
  "type": "group",
  "name": "search_group",
  "settings": [
    {
      "type": "text",
      "name": "search",
      "label": "Search",
      "help": "Search Giphy",
      "required": false
    }
  ]
}
```

It is good practice to make this as smart as possible - ensuring that you return the elements that make sense with the text inputted by the user. This means matching against the name of the image, but also any other relevant metadata a creator may be filtering by (e.g. you may want to include the name of the Folder within the search logic).

Upon keystroke, a new POST request will be made to the `request URL` specified, with the text inputted, for your app to return a newly sorted version of results.

<Accordion title="Example search component">
  <img width="600" src="https://mintcdn.com/kit-314e57c1/ohR8KbVxvspIDffR/images/media_source/media_source_search.png?fit=max&auto=format&n=ohR8KbVxvspIDffR&q=85&s=a670943677de682084336b84f2b6921d" data-path="images/media_source/media_source_search.png" />
</Accordion>

### Filter

The optional filter functionality allows plugins to offer a flat, single-select dropdown the creator can select from to help them find the content they are looking for. This can be predefined through use of the [select input component](/plugins/component-library/select-input) or programmatically generated as the plugin loads, through use of the [dynamic select input component](/plugins/component-library/dynamic-select-input).

<Accordion title="Example filter component">
  <img width="200" src="https://mintcdn.com/kit-314e57c1/ohR8KbVxvspIDffR/images/media_source/media_source_filter.png?fit=max&auto=format&n=ohR8KbVxvspIDffR&q=85&s=52cd9588395d47d0c59f2e32b28a7db9" data-path="images/media_source/media_source_filter.png" />
</Accordion>

Regardless of whether your plugin utilizes a [select input component](/plugins/component-library/select-input) or a [dynamic select input component](/plugins/component-library/dynamic-select-input), this will also need be housed in a media source specific `group`, named `filter_group`.

Examples for each can be found below:

<CodeGroup>
  ```json Select input theme={null}
  {
    "type": "group",
    "name": "filter_group",
    "settings": [
      {
        "type": "select",
        "label": "Rating",
        "name": "rating",
        "options": [
          { "label": "G", "value": "g" },
          { "label": "PG", "value": "pg" },
          { "label": "PG-13", "value": "pg-13" },
          { "label": "R", "value": "r" }
        ],
        "required": false
      }
    ]
  }
  ```

  ```json Dynamic select input theme={null}
  {
    "type": "group",
    "name": "filter_group",
    "settings": [
      {
        "type": "dynamicSelect",
        "label": "Folders",
        "name": "folder",
        "request_url": "https://example-plugin.com/folders",
        "required": false
      }
    ]
  }
  ```
</CodeGroup>

### Sort

The optional sort functionality utilizes a [select input component](/plugins/component-library/select-input) to offer a flat list of sort options the creator can select from, each with a `label` and `value` nested in an `options` array. Once an `option` is selected, a new POST request will be made to the *Request URL* specified, with the value selected, for your app to return a newly sorted version of results. This will need to be encased by a media source specific `group` named `sort_group`.

```json theme={null}
{
  "type": "group",
  "name": "sort_group",
  "settings": [
    {
      "type": "select",
      "name": "sort",
      "label": "Sort",
      "options": [
        { "label": "Alphabetical (A-Z)", "value": "alphabetical_asc" },
        { "label": "Alphabetical (Z-A)", "value": "alphabetical_desc" }
      ]
    }
  ]
}
```

<Accordion title="Example sort component">
  <img width="200" src="https://mintcdn.com/kit-314e57c1/ohR8KbVxvspIDffR/images/media_source/media_source_sort.png?fit=max&auto=format&n=ohR8KbVxvspIDffR&q=85&s=08046a055060c6263c6290479b8d849e" data-path="images/media_source/media_source_sort.png" />
</Accordion>