The open-source Ghost editor is robust and extensible.
{{content}}
helper. Use the following examples to ensure your theme is compatible with the latest version of the Ghost editor.
<figure>
and <figcaption>
<figure>
and <figcaption>
elements. For example:
.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<figure>
elements to maintain compatibility with the Markdown and HTML cards.
kg-width-wide
and kg-width-full
classes to the <figure>
elements in the HTML output. Here’s an example for wide images:
width
and height
attributes when that data is available. Width and height correspond to the size and aspect ratio of the source image and do not change when selecting different size options in the editor. If your theme has a max-width
style set for images it’s important to also have height: auto
to avoid images appearing stretched or squashed.
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:
srcset
and sizes
attributes to allow for smaller images to be served to devices with smaller screens. Full output will look similar to this:
cards.min.css
and cards.min.js
in the {{ghost_head}}
helper.
You can override the default styles and behaviour for individual cards by configuring your theme’s package.json
to exclude the assets for specific cards:
card_assets
to false (the default is true).
audio
, blockquote
, bookmark
, button
, callout
, file
, gallery
, header
, nft
, product
, toggle
, video
, and signup
.
You can customize the styles of individual cards by using custom CSS. Each card has a unique class name that you can target to apply your own styles. Here’s a list of the class names for each card type:
.kg-audio-card
blockquote
or .kg-blockquote-alt
.kg-bookmark-card
.kg-button-card
.kg-callout-card
.kg-file-card
.kg-gallery-card
.kg-header-card
.kg-nft-card
.kg-product-card
.kg-toggle-card
.kg-video-card
.kg-signup-card
.kg-gallery-container
.kg-gallery-row
.kg-gallery-image
kg-size-
class of either: kg-size-small
, kg-size-medium
or kg-size-large
and a kg-style-
class of either kg-style-dark
, kg-style-light
, kg-style-accent, or
kg-style-image`.
The default CSS for the card can be used as a reference implementation.
kg-width-<size>
, size
can be kg-width-regular
, kg-width-wide
, or kg-width-full
.
Full-width and split-layout with contained image cards provide a kg-content-wide
class. Use this class to ensure card content is properly positioned and sized. See Casper’s implementation for a guide.
Split-layout signup cards, which include an image adjacent to the text content, provide the kg-layout-split
class.
See the default CSS included with this card.