Authoring a story

Now that you've set up Storyform on your site it's time to discuss how to create a post and format your content to work with Storyform. We'll discuss how you can get the most out of your article by utilizing our various authoring features: from controlling layout, to customizing styles and adjusting the behavior of different content types, etc.

Content editor

Storyform is split into two parts, a content editor, focused on creating and entering content in the form of text and media and a preview layout and style editor, focused on getting the visual layout and styles right.

Formatting content

The Storyform editor is a minimalist editor letting you focus on the content and reduces distrations. In order to format content, select the content and choose from the toolbar that pops up. You can format content in several ways: Format text

Drop-caps

By selecting the first character of a paragraph, you can add a drop-cap. Format drop-cap

Headers

H2-H4 can be selected for creating typographic hierarchy. H1's are reserved for the title.

Bold and italics

Bold and italics add strength and emphasis to snippets of text

Blockquotes

Blockquotes are a great way to add quotes directly inline to content. Format blockquote

Links can be added to short snippets of text. You can even add a link to email someone by entering mailto:insertemail@address.com

Pullquotes

Pull-quotes are a fantastic way to really add emphasis to a particular bit of text. Unlike blockquotes, pull-quotes duplicate the content and pull it out of the flow of the story. Pull-quotes are indicated in the content editor by a highlight. Pull-quotes can be stylized differently than the rest of the content and are typically large and bold. Pullquotes

Setting a cover image

In order to assign your cover image / video, place the image or video at the very top of your content. Storyform will then automatically format this image to fit with your selected template.

It's important to note that while Storyform does an excellent job at limiting any cropping with your media, cover media is automatically sized to fill the entire screen. So make sure that you use a high resolution image (at least 1600px wide by 960px tall).

Adding a subtitle

You can optionally insert a subtitle by adding a H2 at the beginning of the content.

Inserting images

Media, such as images and video can be added by creating a blank line in the text and selecting from the controls that pop up beside the blank line. You can select multiple files for upload. Add media

Several sizes of images are automatically generated in order to reduce download size for smaller devices. It is highly recommended to upload high resolution images (at least 1600px wide or 960px tall) so they can be display in greater detail on larger screens.

Smart cropping

In order to maximize the impact of images no matter what device or orientation the user is on, Storyform needs to know what part of an image can be cropped. After choosing media to upload, the subject of the photo can be identified in the popup that appears. It is recommended to choose the smallest possible area of the photo, so Storyform can present a fullscreen or fullbleed image on more devices. Storyform will attempt to keep as much of the photo from being cropped as possible, but still keep the image full bleed. The cropping can be adjusted again by clicking on the media and choosing the cropping icon in the upper right. Smart cropping

Captions

Adding a caption to an image is a great way to describe the photo to the reader and ensures the text and photo will appear on the same page together.

Embedding Video

Storyform supports Youtube, Vimeo, and HTML5 video, which can all be used as both a background and as a major element within your story. To insert a Youtube or Vimeo video, simply paste the link into a new paragraph and hit enter. You can enter just a link to the video on youtube.com or vimeo.com or enter an <iframe> embed. At times, the YouTube or Vimeo embed may insert at a lower resolution than is preferred (and thus may not be used in fullscreen layouts). In order to fix this, we recommend using the <iframe> embed feature of YouTube, typically found in the advanced options of the Share section.

Note: When using a video as a background video for your title page, we recommend using HTML5 video instead of YouTube or Vimeo. Just be sure to insert it at the top of the content.

If you'd like to use HTML5 video you'll need to provide all of the required HTML5 elements and follow the instructions below.

  1. First, convert your original video into both a mp4 and a webm format. For an easy video encoder, download the VLC player.
  2. Upload both videos (mp4 & webm) with the Wordpress Media uploader.
  3. Upload a cover image for your video (preferably the first frame).
  4. Select one of the videos and insert it into your post.
  5. Then, select the "poster" image for the video (the image to use when video hasn't played yet).

Note: If you have trouble uploading video because it is too large, consider following these instructions. The FAQ refers to WXR files, but the instructions still pertain to all types of files being uploaded. If you are still unable to upload your large video file, consider using YouTube or Vimeo instead.

Other Embeds

At this time, Storyform does not support any embedding other than YouTube or Vimeo. Please feel free to email us with requests at hello@storyform.co.

Layout

Storyform automatically matches your content to various layouts in order create a beautiful design no matter what size device the user is viewing it on. Storyform, by default, chooses the layout of each page based on a set of criteria. The layout engine:

  1. optimizes for full bleed media to create the most visual impact for your images and video
  2. tries to ensure body text has no more than a one page gap to keep the narrative of the story feeling continuous.
  3. presents content in the order it was authored or, for media, on an immediately subsequent page.
  4. prefers to cover more of the page with content than leave it empty. (i.e. a portrait image and text side-by-side instead of just a portrait image with space on either side).

Default Storyform layout

While Storyform automatically generates the layout of the story for you, there are three mechanisms you can use to control the layout of a story yourself.

Layout preference

A layout preference is a list of specific layouts that are preferred for displaying a particular part of the story. It is called a preference since it is not guaranteed to work for the given screen size. For example, a photo side-by-side with some text may not work on a portrait smartphone. Layouts are specified as a list to still give control even when the first layout doesn’t match. Preferences are specified on media, pull-quotes, and stand-alone pieces of text like titles. They are not specified on body text as it is fluid and may span multiple pages on smaller devices. Use a layout preference when you want a different placement for your titles or sizing of your media.

Layout preferences can be specified by clicking on particular page in the “Preview” view and choosing a layout in the sidebar. The sidebar can be brought up again by clicking the layout icon.

Storyform layout preference

Pinned media

Media can be pinned to a specific place in a story. It tells the layout engine to not display any text after that piece of media until that pinned media has been placed on the page. Pinning can cause pages to feel empty as a page may only contain a small amount of text to maintain a large image on the next page or the media is scaled down to fit onto the page. This is why pinning is not on by default to promote full pages of text and large full bleed images. Pinning is best used when text directly references the media and it would be confusing to the reader to start the next bit of text.

You can “pin” media by selecting it in the “Editor” and clicking the pin icon in the corner of the media.

Pinned media

Page breaks/sections

A story can be broken up into several sections, where each section always starts on a new page and is never on the same page as the previous section’s content. The page break is useful when you want to reset the user to a whole new part of the story. Often, sections should start with a new heading (i.e. H3).

You can create a page break/new section in the “Editor” by clicking the create section icon on a blank paragraph. You can create a heading like an H3 by selecting some text in the Editor and clicking “H3”.

Layout page break

Preview

The preview layout and style editor enables authors to really customize the look and feel of their stories. The preview page enables you to view your story across several different types of devices all on one screen.

Setting your template

When first previewing your story you can set the template to use for the story. Templates are a set of layouts, colors, font choices and styles. You can choose from a set of pre-built templates to adjust, or re-use templates from previous stories. Adjustments to styles are saved automatically with the template.

Setting the template

Setting preferred layout

You can view individual pages by clicking on them. From there, you can set your preferred layout on by choosing matched templates from the layout list.

Choose a layout

Changing fonts, colors and styles

Templates can be further customized to use specific fonts, text styles, colors, shadows and other styling. Click on individual components (captions, body text, pull-quotes, etc.) to adjust their styles. Components in the flow, such as headers, drop-caps and blockquotes may need to be clicked twice to select.

Change styling

Positioning and styling captions

Captions can sized and positioned manually by selecting them and dragging them around the layout. The caption width may also be adjusted using the blue adjustment handles.

Positioning captions