Output guide

HTML output examples for the different blocks offered by the article editor.

Gregory Claeyssens avatar
Written by Gregory Claeyssens
Updated over a week ago

When publishing StoryChief sends out raw HTML to your website. Below is a reference of the possible elements and their output.

1. Inline elements

1a. Bold

This is <strong>bold</strong> text.

1b. Italic

This is <em>italic</em> text.

1c. Underline

This is <u>underline</u> text.

1d. Strikethrough

This is <s>strikethrough</s> text.

1e. Small

This is <small>strikethrough</small> text.

1f. Code

This is <code>code</code> text.

1g. Link

This is <a href="https://storychief.io">link</a> text.

Alternatives
Link defined to open in a new browser

This is <a href="https://storychief.io" target="_blank" rel="noopener noreferrer">link</a> text.

Link defined with nofollow

This is <a href="https://storychief.io" rel="nofollow">link</a> text.

2. Block elements

2a. Image

<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
<picture>
<source srcset="https://images.storychief.com/.../image_800.jpg 1x, https://images.storychief.com/.../image_1600.jpg 2x" media="(max-width: 768px)">
<source srcset="https://images.storychief.com/.../image_800.jpg 1x, https://images.storychief.com/.../image_1600.jpg 2x" media="(min-width: 769px)">
<img alt="Alt text" src="https://images.storychief.com/.../image_800.jpg">
</picture>
<figcaption>Image caption</figcaption>
</figure>

2b. Video

<figure class="video strchf-type-video regular strchf-size-regular strchf-align-center">
<div class="embed-container">
<div style="max-width: 100%; position: relative; padding-top: 56.5%;">

<!-- The embed content -->
<iframe width="200" height="113" src="https://www.youtube.com/embed/QQiizdWAWw8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
<!-- The embed content -->

</div>
</div>
<figcaption>Optional video caption</figcaption>
</figure>

πŸ”” Note: The inline styling provides for responsive scaling of the video depending on your website's container width.

2c. Embed

<figure class="embed strchf-type-embed regular strchf-size-regular strchf-align-center">
<div class="embed-container">

<!-- The embed content -->
<div class="twitter-tweet twitter-tweet-rendered">
...
</div>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- The embed content -->

</div>
</figure>

2d. Divider

<hr />

3. Rich media alternatives

For media block items like image, gallery, video, embed there is alternative displaying available. These alternatives can be enabled/disabled. See the help article on how to disable it and examples of layouts.

3a. Sizing

  • regular (default)

    <figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
    ...
    </figure>
  • large

    <figure class="image strchf-type-image large strchf-size-large strchf-align-center">
    ...
    </figure>
  • full

    <figure class="image strchf-type-image full strchf-size-full strchf-align-center">
    ...
    </figure>

3b. Positioning

  • center (default)

    <figure class="image strchf-type-image regular strchf-size-regular strchf-align-center">
    ...
    </figure>
  • left

    <figure class="image strchf-type-image regular strchf-size-regular strchf-align-left">
    ...
    </figure>
  • right

    <figure class="image strchf-type-image regular strchf-size-regular strchf-align-right">
    ...
    </figure>
Did this answer your question?