Link
A link directive can only be used on <a> tags. It generates a user interface in the editor for entering a link. If you want to set a link on an image for example, just wrap the <img> tag in an <a> tag and add a doc-link directive on the <a> tag.

Example

1
module.exports = {
2
"label": "Web Teaser",
3
"iconUrl": `https://livingdocsio.github.io/livingdocs-design-assets/docs/icons/component-icons/icon_component_teaser_with_image.svg`,
4
"directives": [{
5
"name": "link",
6
"type": "link",
7
"prefill": { // optional
8
"title": {
9
"key": "title",
10
"provider": "iframely"
11
},
12
"site": {
13
"key": "site",
14
"provider": "iframely"
15
},
16
"headline": {
17
"key": "author",
18
"provider": "iframely"
19
},
20
"image": {
21
"key": "image",
22
"provider": "iframely"
23
}
24
}
25
}, {
26
"name": "image",
27
"type": "image",
28
"imageRatios": ["16:9"],
29
"allowOriginalRatio": false
30
}],
31
"html": dedent`
32
<div class="teaser">
33
<a doc-link="link">
34
<div class="teaser__image container image-container" doc-image="image">
35
<div class="image--overlay"></div>
36
</div>
37
<div class="teaser__text">
38
<div>
39
<h3><span doc-editable="headline">Headline</span> <span class="source" doc-editable="site">Source</span></h3>
40
</div>
41
<h2 doc-editable="title">Title</h2>
42
</div>
43
</a>
44
</div>
45
`
46
}
Copied!

Config Options

The only (optional) config option is prefill. This works in tandem with the service Iframely and allows you to prefill other directives (e.g. text) in the same component with metadata fetched from the provided link (through the Iframely service). The example above uses the prefill option to render a teaser that works simply by linking any article from the web (e.g. a NYT article). What Iframely does in a nutshell is parsing the head section of a linked HTML page (the content of doc-link) for meta tags.
The only supported provider is iframely. The possible fields are:
  • title
  • site
  • author
  • image
  • description
  • host
  • icon
  • thumbnail
Last modified 1yr ago
Copy link