Image
If defined on an <img> tag, enables users to set the src attribute. If defined on any other tag, enables users to set a background image CSS property to that tag.

Example

1
module.exports = {
2
name: 'image',
3
label: 'Bild',
4
iconUrl: `https://livingdocs-assets.s3.amazonaws.com/magazine-design/assets/images/icons-components/icon_image.svg`,
5
directives: [{
6
name: 'image',
7
type: 'image',
8
allowOriginalRatio: true,
9
imageRatios: ['16:9', '1:1', '4:3', '3:4'],
10
srcSet: {
11
defaultWidth: 1024,
12
widths: [2048, 1024, 620],
13
sizes: ['100vw']
14
}
15
}],
16
html: dedent`
17
<div class="m-asset-image m-asset-image--numbered">
18
<div class="m-asset-image__image">
19
<img doc-image="image" />
20
</div>
21
<div class="m-asset-image__options">
22
<div class="a-asset-input" doc-editable="caption">Caption</div>
23
</div>
24
</div>
25
`
26
}
Copied!

Config Options

Ratios

The image ratio definitions control how the crop tool in the Livingdocs editor is configured.
Crop presets
allowOriginalRatio: true | false, if true allows the inherent ratio of the image to be selected imageRatios: array of strings, an array of strings, e.g. '16:9' of all image ratios that should be preset

SrcSet

The srcSet defines the parameters for HTML srcsets. If set, Livingocs will generate a srcSet attribute on the HTML tag where the image directive is defined. There is a global (instance-wide) default for srcSet and image directives can overwrite this.
Schema:
1
srcSet: ms.obj({
2
defaultWidth: 'number',
3
widths: ms.arrayOf('number'),
4
sizes: ms.arrayOf('string')
5
})
Copied!
For an example see at the top.

Background images

If the doc-image directive is used on any other tag than <img> it will automatically be set as a background image. Background images don't have srcSet properties (see above). Thus you can define a max width that should be used under the directive config key backgroundImage.
Example:
1
backgroundImage: {
2
maxWidth: 1024
3
}
Copied!
Last modified 1yr ago