ImageSettings

Select a Sitevision image and manage its alternative text.

Select image

Image is decorative

Alt text (from image caption)

Use custom alt text

Migration from ImageSelector in version 1

This component replaces the old 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

<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.
You can also generate HTML for an img element with srcset, sizes, responsive images and lazy loading attributes using ImageRenderer.

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

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.

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	objectMer information { 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	functionMer information (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.