Type: Function

How to get configureAsImage?


import configureAsImage from 'fontoxml-families/src/configureAsImage.js'

The image family is used for, as its name implies, images. Specifically images that are resolved from a permanent identifier on one of their attributes.

Images are displayed as themselves. If they are wider than the available block with, they are shown scaled.

As Fonto doesn't edit images, we define no keyboard flow inside them.

Images cannot be deleted by pressing Backspace or Delete.

Used for elements that represent images. These images may be represented by a permanent id or a non-permanent id. By setting the option options.isPermanentId to true, the result of the query is interpreted as a permanent id, which will be resolved.

The following widget areas are available:

  • blockHeaderLeft

  • blockHeaderRight

  • blockBefore

  • blockAfter

  • blockFooter

  • blockOutsideBefore

  • blockOutsideAfter

This family has a number of additional options which affect how it behaves:

  • referenceQuery

  • isPermanentId


// Configure HTML images without permanent ids
configureAsImage(sxModule, 'self::img', 'image', { referenceQuery: '@src', isPermanentId: false });

// Configure HTML images with permanent ids
configureAsImage(sxModule, 'self::img', 'image', { referenceQuery: '@src', isPermanentId: true });

// Configure an other kind of image with the url as its text content
configureAsImage(sxModule, 'self::img', 'image', { referenceQuery: 'string(.)', isPermanentId: true });


  1. sxModule


    Type: SxModule

  2. selector


    Type: XPathTest

  3. markupLabel


    Type: String

  4. options


    The options, or the name of the attribute in which the permanent id referencing this image is located. The generic CvkOptions are expanded with two properties: