[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
id of the gallery
a_type
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.

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

img
the source path of the image
imgwidth
width of the image
offset
distance offset from the post - ex -150px
alt
image alt
align
left or right - alignment in relation to the main story text
caption
image caption
credit
credit typically used as image credit
captionposition
bottom or top - position of the caption in relation to the image
lightbox
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.

img
path to image
name
character name
caption
the character caption
align
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..

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

label
this is what is displayed in the chapter navigation element appended to .aesop-entry-header
title
displayed as chapter title
subtitle
optional chapter subtitle
bgtype
img or video
img
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.

img
path to image
height
height of the parallax component
parallaxbg
on or off - turn the parallax effect on or off
floater
on or false - enable an additional floater item to site above the parallax image
floatermedia
path to the floater item (could be an image)
floaterposition
left or right - what side should the floater item be aligned to
floaterdirection
up or down - when you scroll, should the floater travel up, or down (parallax)
floateroffset
distance offset. enter whole integers like 400 or -400
caption
optional caption
captionposition
bottom-left, top-left, top-right, or bottom-right - position of the caption
lightbox
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.

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

Draws a fullwidth video component with optional caption.

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

num
any word or number to be displayed in navigation
title
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.

type
pdf or image - use an image or display an embedded PDF
src
path to image or document
caption
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.

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