Getting Started

Within these docs you'll find detailed descriptions as far as what each option does within each of the story components. But first, let's start by installing Aesop Story Engine and adding our first story component!

• Head to the plugins tab within your WordPress administration area. Click on "add new". Once here, search for Aesop Story Engine, and press "search." Install Aesop Story Engine, and you're set! Hint: you can also install through FTP if you know that that is.

  

• Go to any post, and locate the "Add Component" button. It sits right above the post editor. Once you toggle this, you'll be able to select the component, adjust any options, and insert it anywhere within your story. Galleries are managed with the "Galleries" tab within WordPress.

  

tip Download the playground demo content, and import under Tools-->Import to instantly create the content that the demo has.

Gallery

Galleries are created and managed under the "Galleries" tab located on the left side within WordPress admin, and uses normal WordPress galleries. This means you can add and remove images, and even add captions. The gallery component creates a gallery of images, available in multiple formats, and are inserted into a story with a shortcode. Each story can have unlimited galleries.

Refer to the "help" tab in WordPress admin, in the Galleries post type, for additional help on how to create the gallery.

note Some gallery types may not appear correctly, as themes are responsible for what the galleries look like.

Quote

Draws a full width quote component with large text, colored background, optional background image and parallax effect.

tip The Parallax, Offset, and Direction properties are all used with the Parallax option. Refer to the illustration above for a visual guide on how the offset is applied.

Image

Draws an image with the option to have the image open into a lightbox. Image component can also display a caption, and photo credit..

Character

Draws a character with avatar, name, and bio.

Content

This component transforms the content that is put between the tags, and can run a background image, as well as magazine style columns. This component can also run a column of text that is offset to the left or right.

To use this component, start with the opening component tag, then continue writing. Close the component tag when you’re ready to close that section..

tip Some components allow you to pass the word "content" as an option for the width. This will only work if the theme is built to support this feature. Click here if you're a developer and interested on how to make this happen.

Chapters

This component provides a scroll-to point for the story. We call them “Chapters.” Each chapter point can have an image as a cover, or a video bg as a cover. Can also have a title, and subtitle.

Adding this component will create a scroll-to point, and will also append a scrollnav to .aesop-story-header. As with all components, the markup comes unstyled.

note This component will not function unless your theme has provided support for it. If you're a developer and interested in building in support, click here.

Parallax

Draws a fullwidth image component with parallax, lightbox, and captions. Also features a “floater” media item that can float from left to right, right to left, top to bottom, or bottom to top, over-layed on top of the image component.

tip The Offset, and Direction properties are all used with the Parallax option. Refer to the illustration above for a visual guide on how the offsets are applied.

Audio

Draws an audio player with the ability to have it automatically start once the audio player comes into view.

Video

Draws a fullwidth video component with optional caption.

note vidwidth and vidheight can be obtained by getting the width and height values from your embed. Because all videos are different, these will be different based on your video. These hidden attributes are also not located in the automatic generator.

Map

Draws a fullwidth map component with custom location markers.Only one map is allowed per story at this time.

Map Markers

The maps component is pretty versatile when it comes to adding markers, and even custom map tiles (ASE 1.0.3). The location markers are added with post meta inside the story screen, to the right of the story. Locations are entered with Latitude and Longitude coordinates.

Map Tiles (1.0.3)

Maps utilize Open Maps. These maps work with "map tiles" that come together like a puzzle to provide the image of the roads, lakes, etc. We provide a free map tile account, however, it's important to know that this is limited to 10k views a month.

For this reason, it's highly recommended to create your own free account with Mapbox, and provide your own map id. It's super simple, and here's how you do it

• Head to http://mapbox.com and create a free account. Should you exceed their 10k map tile view limit, you can upgrade for a nominal fee.

  

• Once you have created an account, locate the default map that has been created for you, and click the clipboard icon to copy to your clipboard.

  

• Now go to your site, and head to Appearence-->Customize. Paste the ID under Aesop Story Engine tab in the Mapbox Map ID location. Your map should now be using your tiles.

  

note New map features such as custom tiles are available in ASE 1.0.3 and up.

Timeline

Draws a scroll-to type navigation that we call a ‘Timeline.’ It acts similar to the chapter component, in that it creates a scroll-to point. Ideal labels include Months, or years. Each component creates a scroll-to point in the form of an h2 tag.

This component can be used in pages as well, to create a one-page scrolling website.

Document

Draws a small Document heading, and when clicked will slide down to reveal the document/image. Ideally used to reference documents such as a PDF.

Collections

This component creates a collection of stories. For example, if you placed stories within a collection called Art, you could display those in a grid form on, say, the home page of your story site.