GHOST CMS

Editor

The open-source Ghost editor is robust and extensible.

开源Ghost编辑器是健壮的和可扩展的。

Overview

More than just a formatting toolbar, the rich editing experience within Ghost allows authors to pull in dynamic blocks of content like photos, videos, tweets, embeds, code and markdown.

For these author-specified options to work, themes need to support the HTML markup and CSS classes that are output by the {{content}} helper. The following guide explains how these options interact with the theme layer and how you can ensure your theme is compatible with the latest version of the Ghost editor.

Ghost不仅仅是一个格式化工具栏，它还提供丰富的编辑体验，允许作者将照片、视频、推文、嵌入、代码和标记等动态内容块拖进来。

要使这些作者指定的选项工作，主题需要支持由{{content}} helper输出的HTML标记和CSS类。下面的指南将解释这些选项如何与主题层交互，以及如何确保主题与最新版本的Ghost编辑器兼容。

<figure> and <figcaption>

Images and embeds will be output using the semantic <figure> and <figcaption>elements. For example:

图像和嵌入将使用语义<figure>和< figcaption>元素输出。例如:

Output

<figure class="kg-image-card">
    <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg">
    <figcaption>An example image</figcaption>
</figure>

The following CSS classes are used:

• .kg-image-card is used on the <figure> element for all image cards
• .kg-image is used on the <img> element for all image cards
• .kg-embed-card is used on the <figure> element on all embed cards

This is only relevant when authors use the built-in image and embed cards, and themes must also support images and embeds that are not wrapped in <figure> elements to maintain compatibility with the Markdown and HTML cards.

只有当作者使用内置的图像和嵌入卡时，这才是相关的，并且主题还必须支持图像和嵌入，而不是包装在<figure>元素中，以保持与Markdown和HTML卡的兼容性。

Image size options

The editor allows three size options for images: normal, wide and full width. These size options are achieved by adding kg-width-wide and kg-width-full classes to the <figure> elements in the HTML output. Here's an example for wide images:

Output

<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg">
</figure>

Normal width image cards do not have any extra CSS classes.

Image size implementations

The specific implementation required for making images wider than their container width will depend on your theme's existing styles. The default Ghost theme Casper uses flexbox to implement layout using the following HTML and CSS:

Output

<div class="content">
  <article>
    <h1>Image size implementation</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.</p>


    <figure class="kg-image-card kg-width-full">
      <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-2.jpg">
      <figcaption>A full-width image</figcaption>
    </figure>

    <p>Fusce interdum velit tristique, scelerisque libero et, venenatis nisi. Maecenas euismod luctus neque nec finibus.</p>

    <figure class="kg-image-card kg-width-wide">
      <img class="kg-image" src="https://casper.ghost.org/v1.25.0/images/koenig-demo-1.jpg">
      <figcaption>A wide image</figcaption>
    </figure>

    <p>Suspendisse sed lacus efficitur, euismod nisi a, sollicitudin orci.</p>
  </article>
</div>

<footer>An example post</footer>

And the CSS:

style.css

.content {
  width: 70%;
  margin: 0 auto;
 }

article {
  display: flex;
  flex-direction: column;
  align-items: center;
}

article img {
  display: block;
  max-width: 100%;
}

.kg-width-wide img {
  max-width: 85vw;
}

.kg-width-full img {
  max-width: 100vw;
}

article figure {
  margin: 0;
}

article figcaption {
  text-align: center;
}

body {
  margin: 0;
}

header, footer {
  padding: 15px 25px;
  background-color: #000;
  color: #fff;
}

h1 {
  width: 100%;
}

Negative margin and transforms example

Traditional CSS layout doesn't support many elegant methods for breaking elements out of their container. The following example uses negative margins and transforms to achieve breakout. Themes that are based on Casper use similar techniques.

style.css

.content {
  width: 70%;
  margin: 0 auto;
 }

article img {
  display: block;
  max-width: 100%;
}

.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin: auto calc(50% - 50vw);
  transform: translateX(calc(50vw - 50%));
}

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

article figure {
  margin: 0;
}

article figcaption {
  text-align: center;
}

body {
  margin: 0;
}

header, footer {
  padding: 15px 25px;
  background-color: #000;
  color: #fff;
}

Gallery card

The image gallery card requires some CSS and JS in your theme to function correctly. Themes will be validated to ensure they have styles for the gallery markup:

• .kg-gallery-container
• .kg-gallery-row
• .kg-gallery-image

Example gallery HTML:

Output

<figure class="kg-card kg-gallery-card kg-width-wide">
    <div class="kg-gallery-container">
        <div class="kg-gallery-row">
            <div class="kg-gallery-image">
                <img src="/content/images/1.jpg" width="6720" height="4480">
            </div>
            <div class="kg-gallery-image">
                <img src="/content/images/2.jpg" width="4946" height="3220">
            </div>
            <div class="kg-gallery-image">
                <img src="/content/images/3.jpg" width="5560" height="3492">
            </div>
        </div>
        <div class="kg-gallery-row">
            <div class="kg-gallery-image">
                <img src="/content/images/4.jpg" width="3654" height="5473">
            </div>
            <div class="kg-gallery-image">
                <img src="/content/images/5.jpg" width="4160" height="6240">
            </div>
            <div class="kg-gallery-image">
                <img src="/content/images/6.jpg" width="2645" height="3967">
            </div>
        </div>
        <div class="kg-gallery-row">
            <div class="kg-gallery-image">
                <img src="/content/images/7.jpg" width="3840" height="5760">
            </div>
            <div class="kg-gallery-image">
                <img src="/content/images/8.jpg" width="3456" height="5184">
            </div>
        </div>
    </div>
</figure>

For a better view of how to support the gallery card in your theme, use the Casper implementation, which is a generic solution that works for most themes.

Bookmark card

The bookmark card requires some minor CSS in your theme to ensure the metadata is easier to digest:

style.css

.kg-bookmark-card {
    width: 100%;
    position: relative;
}

.kg-bookmark-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    color: currentColor;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.kg-bookmark-container:hover {
    text-decoration: none;
}

.kg-bookmark-content {
    flex-basis: 0;
    flex-grow: 999;
    padding: 20px;
    order: 1;
}

.kg-bookmark-title {
    font-weight: 600;
}

.kg-bookmark-metadata,
.kg-bookmark-description {
    margin-top: .5em;
}

.kg-bookmark-metadata {
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kg-bookmark-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.kg-bookmark-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    margin-right: .5em;
    margin-bottom: .05em;
}

.kg-bookmark-thumbnail {
    display: flex;
    flex-basis: 24rem;
    flex-grow: 1;
}

.kg-bookmark-thumbnail img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

.kg-bookmark-author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.kg-bookmark-publisher::before {
    content: "•";
    margin: 0 .5em;
}

Here's an example of the HTML structure that's created by the editor:

Output

<figure class="kg-card kg-bookmark-card">
    <a href="https://ghost.org/" class="kg-bookmark-container">
        <div class="kg-bookmark-content">
            <div class="kg-bookmark-title">The bookmark card</div>
            <div class="kg-bookmark-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at interdum ipsum.</div>
            <div class="kg-bookmark-metadata">
                <img src="/content/images/author-icon.jpg" class="kg-bookmark-icon">
                <span class="kg-bookmark-author">David Darnes</span>
                <span class="kg-bookmark-publisher">Ghost</span>
            </div>
        </div>
        <div class="kg-bookmark-thumbnail">
            <img src="/content/images/article-image.jpg">
        </div>
    </a>
</figure>

Embed card

If a video is used with the theme then some CSS will be needed in order to maintain a good aspect ratio.

Example HTML:

<figure class="kg-card kg-embed-card">
    <iframe ...></iframe> <!-- <iframe> represents card content -->
</figure>

The CSS:

.fluid-width-video-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Summary

You have discovered how to ensure your theme is compatible with the full range of extensible features in the Ghost editor. For further support with themes, head to the forum.