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.
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.
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:
By selecting the first character of a paragraph, you can add a drop-cap.
H2-H4 can be selected for creating typographic hierarchy. H1's are reserved for the title.
Bold and italics add strength and emphasis to snippets of text
Blockquotes are a great way to add quotes directly inline to content.
Links can be added to short snippets of text. You can even add a link to email someone by entering mailto:firstname.lastname@example.org
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.
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).
You can optionally insert a subtitle by adding a H2 at the beginning of the content.
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.
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.
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.
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.
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.
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.
At this time, Storyform does not support any embedding other than YouTube or Vimeo. Please feel free to email us with requests at email@example.com.
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:
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.
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.
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.
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”.
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.
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.
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.
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.
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.