Ghost/core/server/lib/mobiledoc/cards/image.js
Kevin Ansfield f57268daae
Koenig - Finalise Koenig HTML output and migrate existing content (#9741)
refs https://github.com/TryGhost/Ghost/issues/9742

We've identified some changes we need to make to the HTML output of the [new Koenig editor](
https://forum.ghost.org/t/koenig-editor-beta-release/1284/102) for future proofing and consistency across cards.

- the `<div class="kg-post">` wrapper around post content has been removed
- for image cards the `.kg-image-wide` and `.kg-image-full` classes have been changed to `.kg-width-wide` and `.kg-width-full` and applied to the `<figure>` element rather than the `<img>` element

Before:
```html
<div class="kg-post">
    <figure class="kg-image-card">
        <img class="kg-image kg-image-wide" src="...">
        <figcaption>example wide image</figcaption>
    </figure>
</div>
```

After:
```html
<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="...">
    <figcaption>example wide image</figcaption>
</figure>
```
2018-07-23 12:23:02 +01:00

35 lines
939 B
JavaScript

module.exports = {
name: 'image',
type: 'dom',
render(opts) {
let payload = opts.payload;
// let version = opts.options.version;
let dom = opts.env.dom;
if (!payload.src) {
return '';
}
let figure = dom.createElement('figure');
let figureClass = 'kg-image-card';
if (payload.cardWidth) {
figureClass = `${figureClass} kg-width-${payload.cardWidth}`;
}
figure.setAttribute('class', figureClass);
let img = dom.createElement('img');
img.setAttribute('src', payload.src);
img.setAttribute('class', 'kg-image');
figure.appendChild(img);
if (payload.caption) {
let figcaption = dom.createElement('figcaption');
figcaption.appendChild(dom.createTextNode(payload.caption));
figure.appendChild(figcaption);
}
return figure;
}
};