# ImageSettings

Select a Sitevision image and manage its alternative text.

> **Migration from ImageSelector in version 1**
>
> This component replaces the old [ImageSelector](/packages/config-svelte/version-1/components/imageselector/) component for selecting images and managing their alternative text.\
> If you are migrating from the old `ImageSelector` component and need to maintain the old naming convention, use the `legacyNames` prop to ensure compatibility.\
> The component is also no longer wrapped in a Panel, so you may need to adjust your layout accordingly by importing and using a Panel component if needed.

## Example

```svelte
<script>
  import { ImageSettings } from '@soleil-se/config-svelte';
</script>


<ImageSettings name="image" />
```

### Reading saved values

With the standard save behavior, the image settings are saved in the app configuration using the provided `name` as a prefix for each field using dot notation.

> **Remember to scale images properly**
>
> The code below is just a simple example, remember to scale images appropriately for their intended display size with [ImageScaler](https://developer.sitevision.se/webdav/files/apidocs/senselogic/sitevision/api/render/ImageScaler.html).\
> You can also generate HTML for an `img` element with `srcset`, `sizes`, responsive images and lazy loading attributes using [ImageRenderer](https://developer.sitevision.se/webdav/files/apidocs/senselogic/sitevision/api/render/ImageRenderer.html).

If a custom alt text is used, it will be saved under the `alt` key in the app configuration, otherwise the alt text from the image node will be used.

**index.js**

```js
import appData from '@soleil-se/app-util/server/app-data';
import PropertyUtil from '@sitevision/api/server/PropertyUtil';


function getImage() {
  const node = appData.get('image.node');
  const decorative = appData.getBoolean('image.decorative');


  return {
    uri: PropertyUtil.getString(node, 'URI'),
    alt: decorative ? '' : appData.get('image.alt') || PropertyUtil.getString(node, 'alt'),
  };
}
```

Legacy names**

When enabling the `legacyNames` prop, use camelCase for app config keys instead of dot notation, e.g. `imageNode` instead of `image.node`.

```js
import appData from '@soleil-se/app-util/server/app-data';
import PropertyUtil from '@sitevision/api/server/PropertyUtil';


function getImage() {
  const node = appData.get('imageNode');
  const decorative = appData.getBoolean('imageDecorative');


  return {
    uri: PropertyUtil.getString(node, 'URI'),
    alt: decorative ? '' : appData.get('imageAlt') || PropertyUtil.getString(node, 'alt'),
  };
}
```

## Props

| Prop             | Type                                                                                                                           | Description                                                                                                   |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| `value`$bindable | `object`Mer information```ts
{ node?: string; alt: string; decorative: boolean; useCustomAlt: boolean }
```                    | Selected image node ID and its alternative-text settings.                                                     |
| `name`           | `string`                                                                                                                       | Configuration key and HTML name prefix for the image fields, uses dot notation, e.g. `image.node`.            |
| `required`       | `boolean`                                                                                                                      | Requires an image to be selected.**Default:** `false`                                                         |
| `decorative`     | `boolean`                                                                                                                      | Whether the image is preset as decorative.**Default:** `false`                                                |
| `hideDecorative` | `boolean`                                                                                                                      | Hides the decorative-image checkbox. When hidden, the image is treated as non-decorative.**Default:** `false` |
| `show`           | `boolean`                                                                                                                      | Shows or hides the component without destroying its fields.**Default:** `true`                                |
| `legacyNames`    | `boolean`                                                                                                                      | Use legacy naming for app config keys, e.g. `imageNode` instead of `image.node`.**Default:** `false`          |
| `onChange`       | `function`Mer information```ts
(value: { node?: string; alt: string; decorative: boolean; useCustomAlt: boolean }) => void
``` | Called when the image settings value changes.                                                                 |

## Value

The bindable value contains:

* `node`: selected image node.
* `alt`: alternative text from the image description or custom text.
* `decorative`: whether the image is decorative.
* `useCustomAlt`: whether to use custom alternative text.

When the image is not decorative, the component reads the alternative text from the selected image. Enable custom alternative text to enter a different value.

## Validation

When `required` is set, an image must be selected. A non-decorative image also needs alternative text, either from its image description or from the custom text field. Mark an image as decorative when it conveys no meaningful content.