[aesop_timeline_stop num="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.

[aesop_timeline_stop num="Gallery" title="Gallery Component"]

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.

id of the gallery
thumbnail, grid, stacked, or sequence

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

[aesop_timeline_stop num="Quote" title="Quote Component"]

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

controls master width of the component. pass 'content' to make content width*
color of the quote background
background image
color of the quote text
height of the component. default is auto. quote will always center vertically
quote alignment
quote size. enter whole numbers like 1, 2, or 3.
enable parallax effect on the quote
if parallax is enabled, which direction should the quote travel from. left | right | top | bottom
speed of parallax item. smaller numbers are faster
if using parallax, the distance offset from the top. enter whole numbers like 500.
the actual quote to be used.
aesop quote offset how to

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.

[aesop_timeline_stop num="Image" title="Image Component"]

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

the source path of the image
width of the image
distance offset from the post - ex -150px
image alt
left or right - alignment in relation to the main story text
image caption
credit typically used as image credit
bottom or top - position of the caption in relation to the image
on or off - enables image to click open into lightbox
[aesop_timeline_stop num="Character" title="Character Component"]

Draws a character with avatar, name, and bio.

path to image
character name
the character caption
left or right - in relation to the main story text
[aesop_timeline_stop num="Content" title="Content Component"]

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..

optional height - default is auto
master width of the component
number of columns to break the content into
left, center, or right - position of one column of text
determines floating text position - example - 20px, 20px, auto, auto (see below)
background image
repeat-x, repeat-y, or no-repeat - controls the repeating of the background is using a tiled image
position of the background image, if using img repeat
path to the floater item (could be an image)
up or down - when you scroll, should the floater travel up, or down (parallax)
distance offset. enter whole integers like 400 or -400
color of the text. helpful when using colored or image background
color of the background
content component inner position

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.

[aesop_timeline_stop num="Chapters" title="Chapter Component"]

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.

this is what is displayed in the chapter navigation element appended to .aesop-entry-header
displayed as chapter title
optional chapter subtitle
img or video
path to the image, OR video , IF using video

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.

[aesop_timeline_stop num="Parallax" title="Parallax Component"]

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.

path to image
height of the parallax component
on or off - turn the parallax effect on or off
on or false - enable an additional floater item to site above the parallax image
path to the floater item (could be an image)
left or right - what side should the floater item be aligned to
up or down - when you scroll, should the floater travel up, or down (parallax)
distance offset. enter whole integers like 400 or -400
optional caption
bottom-left, top-left, top-right, or bottom-right - position of the caption
on or false - set to 'on' to enable the image to click open into a lightbox
aesop quote offset how to

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.

[aesop_timeline_stop num="Audio" title="Audio Component"]

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

optional title
path to the mp3
automatically start the audio once in view | default is off
end the audio once out of view | default is off
automatically loop the audio
hides the audio player
[aesop_timeline_stop num="Video" title="Video Component"]

Draws a fullwidth video component with optional caption.

width of the component - pass 'content' to use as content width
left or right - hint, choose 400px as a video width and align right
vimeo, dailymotion, youtube, kickstarter, viddler, vine, instagram, or self - self is for self hosted video
source of the hosted video, if using hosted video option
id of the video from vimeo, youtube, etc. use the entire URL for kickstarter
for self hosted videos, should the video loop - on or off | default is on
for self hosted videos, should the video automatically start playing - on or off | default is on
for self hosted videos, should the controls be visible - on or off | default is off
for self hosted videos, automatically start the video playing once scrolled into view - on or off | default is off
end the video once out of view | default is off
optional caption for this video
set to preserve aspect ratio of the video
set to preserve aspect ratio of the video

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.

[aesop_timeline_stop num="Map" title="Map Component"]

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

height of the map component

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.

[aesop_timeline_stop num="Timeline" title="Timeline Component"]

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.

any word or number to be displayed in navigation
text to be displayed for page heading
[aesop_timeline_stop num="Document" title="Document Component"]

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.

pdf or image - use an image or display an embedded PDF
path to image or document
caption for the document
[aesop_timeline_stop num="Collections" title="Collections Component"]

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.

id of the collection
display an optional title for this collection
how many columns of results shoudl there be - default is 2
limit the number of posts shown - default is -1, or all posts
enable splash mode, which pulls in the specific categories on your site, that in turn link to stories in that category