We want your feedback! http://aesopstories.com/poll
ASE is an open-sourced suite of tools that empowers developers to build feature-rich, interactive, long-form storytelling themes for WordPress.
12 Storytelling Components
At the heart of ASE are 12 components designed for rich storytelling experiences. The components can be used multiple times throughout the story. Components are built on the fly with a generator provided directly inside the story editor.
- Display an audio player with support for MP3. This is great for showcasing audio interviews.
- Showcase a fullscreen video with support for Kickstarter, Viddler, YouTube, Vimeo, Daily Motion, and Blip.TV.
- The content component is a multi-purpose component that can display a background image, background color, or can split the content into multiple magazine type columns.
- Display a character avatar, title, and small bio to help readers be reminded of key story characters.
- The ASE Gallery component allows you to create and manage unlimited story galleries. Each gallery can be displayed as a grid, a thumbnail gallery, or a stacked type gallery, all with caption support.
- This component allows you to create a map for your story. You can add markers to the map with custom messages. This is a great component for showcasing a characters travels.
- The image component displays an image and caption, with optional lightbox. Also allows you to align the image, as well as offset the image so it hangs outside of the content column.
- A fullwidth image component with caption and lightbox. As you scroll, the image moves slightly to provide a parallax effect.
- Show a fullwidth quote with large text. Control the color and background of the quote component.
- Create a story with a timeline that sticks to the bottom. The timeline works a bit like chapters.
- This component allows you to upload a PDF or image, that is shown to the user once they click the component.
- The 13th component is meant to be used on a page of your site, and allows you to display stories from a specific collection (category).
With the technology in ASE, each story can be designed independently from one another. Not only can each story have a different cover, in a different design, but each stories colors can be completely changed to reflect the theme of the story.
WordPress Theme Implementation
The Story Engine can be used within any WordPress theme. If you would like to utilize the hybrid-width capabilities, *very* little work is required to take advantage of that within any WordPress theme.
ASE components are designed full-width, and can be restricted. This means that a theme that sets a width on a main column won’t work. The best way to get started with ASE in your own theme, is by applying the sites width to the paragraph element within an article. If the user passes ‘content’ as a width variable, the css class
.aesop-content is applied to the component. You can then use this to set the content width on.We’ll have a sample WordPress child theme with basic implementation ready soon.
ASE loads two files with a combined weight of about 33kb (un-compressed). The CSS file loads only the necessary core styles for the components. The rest of the styling is completely up to the WordPress theme. We’ll have a sample WordPress theme ready soon. The JS file is what provides the interactivity for the components, and loads a number of different MIT licensed JS libraries including FitVids, Swipebox, Waypoints, Fotoroma, ScrollNav, Wookmark, ImagesLoaded, PDF OBject, Slabtext, and our own Parallax script that utilizes 3D transforms.
All JS methods are called from within the theme, with the exception of FitVids. Use the class
.aesop-video-container on any div containing a video to make the video responsive.
Download Version 1.0 on WordPress.org! Follow Aesop on Twitter and Facebook.