ImageSelector

Custom panel component for selecting an image.

• AppData
• Props
• Example
  • Standard
  • Advanced
• Slots

AppData

If used with standard name all values will be prefixed with the name property provided to the component.
For example if name="image" the values will be available as imageNode, imageAlt (if custom alt-text is set) and imageDecorative (if image is set as decorative, since 1.11.0).

import appData from 'appData';

const getImage = () => ({
  uri: appData.get('imageNode', 'URI'),
  alt: appData.get('imageDecorative') ? '' : appData.get('imageAlt') || appData.get('imageNode', 'alt'),
});

Props

// Panel heading
export let heading = 'Bild';
// Name attribute.
export let name = undefined;
// If field is required.
export let required = false;
// Node ID of selected image.
export let node;
// Custom alt text.
export let alt;
// If image is decorative, since 1.11.0
export let decorative = false;
// Show and hide compoment without re-rendering.
export let show = true;
// If the checkbox for decorative image should be hidden, since 1.11.0
export let hideDecorative = false;

Example

Standard

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

<ImageSelector name="image" heading="Bild" />

<!-- If decorative should be checked from the start, since 1.11.0 -->
<ImageSelector name="image" heading="Bild" decorative />

Advanced

<script>
  import { ImageSelector } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';

  const values = window.CONFIG_VALUES || {};

  onSave(() => values);
</script>

<ImageSelector bind:node={values.imageNode} bind:alt={values.imageAlt} />

Slots

Default slot

<ImageSelector name="image" heading="Bild" />
  <p class="help-block">Some helpful text.</p>
</ImageSelector>