The Power of Storytelling A demonstration of Aesop Story Engine and Journalistic

Journalistic is integrated with the Aesop Story Engine, a plugin for adding amazing content components to the WordPress platform. This allows writers to craft an experience for their readers instead of just writing about it. Creating an immersive reading experiences is just too easy with Journalistic. Include video, images, maps, galleries, multi-chapters posts, content groupings, audio, and more. Get Journalistic and start telling your story today!

What Can I Do With Journalistic?

There is so much you can do using Journalistic to tell your stories. Through the integration of the Aesop Story Engine the possibilities grow even greater. To demonstrate just how powerful this platform is, we’ve made this sample post to show off a little of that power. Below we show you just some of the cool features and how they can transform your publishing experience.

Images

Adding Galleries

There are several types of galleries you can create. One of the most interesting is the “Parallax” style gallery. This will flip through a series of images while a headline scrolls over each. Using these in sequence can act as a sort of flip-book to tell a short story. It can be quite powerful, just look a the example we’ve added below.

Another gallery style you can create is a “Photoset” which will arrange a set of images using a masonry composition as shown below.

These are just two of the many gallery types you can create. Other styles you can use include: Grid, Thumbnail, Sequence, and Hero gallery formats.

Integrating Images

Place images in your story at specific points. Arrange the images to the left, right or center. Make an image full width or set a custom size. Pull images to the side so they extend beyond the text and draw extra attention. Include captions, overly text and other effects. There is simply so much you can do with images. See our examples below for just a tiny example of the almost endless options for adding images into your stories.

Add Captions and Image Credits

Include a photo description with the caption, aligned left, right or center. Additionally credit the image to the original photographer.

Overlay Content

Use an image as the background for some text or HTML. This is a powerful way to bring extra attention to something in the image or the content.

Left Align Images

Donec id elit non mi porta grav ida at eget metus. Morbi leo risus, porta ac conse ctetur ac, vesti bulum at eros. Vesti bulum id ligula porta felis euis mod semper. Cras mattis conse ctetur purus sit amet fer mentum. Sed pos uere conse ctetur est at lobor tis. Aenean eu leo quam. Pell en tesque ornare sem lacinia quam vene natis vesti bulum. Prae sent commodo cursus magna, vel sceler isque nisl conse ctetur et. Cras justo odio, dapibus ac facil isis in, egestas eget quam. Prae sent commodo cursus magna, vel sceler isque nisl consec tetur et. Donec sed odio dui.

Right Align Images

Donec id elit non mi porta grav ida at eget metus. Morbi leo risus, porta ac conse ctetur ac, vesti bulum at eros. Vesti bulum id ligula porta felis euis mod semper. Cras mattis conse ctetur purus sit amet fer mentum. Sed pos uere conse ctetur est at lobor tis. Aenean eu leo quam. Pell en tesque ornare sem lacinia quam vene natis vesti bulum. Prae sent commodo cursus magna, vel sceler isque nisl conse ctetur et. Cras justo odio, dapibus ac facil isis in, egestas eget quam. Prae sent commodo cursus magna, vel sceler isque nisl consec tetur et. Donec sed odio dui.

Showing Character Profiles

A character component displays an avatar or other image, title, and short description. These can be used to remind readers of key characters or display a brief bio of an author or other writer.

Donec id elit non mi porta grav ida at eget metus. Morbi leo risus, porta ac conse ctetur ac, vesti bulum at eros. Vesti bulum id ligula porta felis euis mod semper. Cras mattis conse ctetur purus sit amet fer mentum. Sed pos uere conse ctetur est at lobor tis. Aenean eu leo quam. Pell en tesque ornare sem lacinia quam vene natis vesti bulum. Prae sent commodo cursus magna, vel sceler isque nisl conse ctetur et. Cras justo odio, dapibus ac facil isis in, egestas eget quam. Prae sent commodo cursus magna, vel sceler isque nisl consec tetur et. Donec sed odio dui. Prae sent commodo cursus magna, vel sceler isque nisl et.

Parallax Image Backgrounds

Images that stay still in the background, or move slightly, while the page continues to scroll produce a wonderful effect. These can draw attention to relevant images, serve as a placeholder, separator, section heading or footer.

Subtle Image Movement – The image moves subtly as you scroll to produce an eye-catching effect.

placeholder.png
The Eye of the Tiger

Static Image – The image remains still while the page scrolls over it. This effect has many benefits including a slow reveal of the image from top to bottom. Useful for a dramatic reveal for images that transition or tell a story from the bottom to the top.

Background Reveal

Multi-Parallax Effect – Move additional images or text over top of the background parallax image. These additional elements can slide up, down and even side to side to make some incredibly fun and interesting effects. If you thought your stories were fun before, this is an entirely new level.

placeholder.png

Videos

Adding Videos

Include videos from all the most popular formats: YouTube, Vimeo, Kickstarter, Viddler, Wistia, Instagram and Dailymotion. If that’s not enough selection, you can always upload a video to your website and include it with the ‘self hosted’ option. Set options to customize the placeholder image before the video starts, video size, auto play, loop at end and even more.

Vimeo

This video is hosted on Vimeo and included with the video ID. It’s a quick and super simple process. You can set the size of the video display. We applied a 1280px wide size here to make the video stand out by showing up wider than the default content width.

YouTube

Including videos from YouTube is quick and easy, simply set the video ID and it’s ready to go. Like images, videos can also be aligned to the left and right of the main content.

Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow. Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow. Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow. Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow.

Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow. Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow. Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow. Aligning a video to the right or left pulls it outside the flow of the content to the browser edge. The text and other content will wrap around the video without disrupting the natural flow.

Self-hosted Videos

Upload your own video directly to WordPress and add it to any page.

These are just a few examples of the many awesome ways you can integrate videos into your stories.

Music

Including Audio

Add music, podcasts and other audio formats directly into your stories. Auto-play a self-hosted audio file when the user scrolls into view, stop as they scroll away. Play music in the background and even hide the audio player.

Aesop Audio

Using the audio feature in the Aesop Story Engine.

More Music and Audio Sources

WordPress includes support for a number of music and audio sources which you can use with Journalistic for even greater flexibility.

SoundCloud – Simply copy and past a URL into your page and it will automatically appear as shown below.

Also supported: SoundCloud, Spotify and Mixcloud

Get Creative with Your Audio

There is never just one way you can do something. Add a background color to a content section and make your audio players stand out.

 

 

 

Quotes

Including Quotes

Insert your quotations into the content in a number of ways. Align the element left, right or centered. Set sizes for the container, fonts and include background colors or images. The presentation of quotes truly compliments your content the way you choose.

Quotes Left and Right

Align a quote to the left or right of the main content for a natural flowing text and quote presentation.

It's like everyone tells a story about themselves inside their own head. Always. All the time. That story makes you what you are. We build ourselves out of that story. Sarah Addison Allen

Phasellus magna. Nullam tincidunt adipiscing enim. Cras sagittis. Vestibulum volutpat pretium libero. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Etiam feugiat lorem non metus. Vivamus quis mi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.

Ut a nisl id ante tempus hendrerit. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Etiam ultricies nisi vel augue. Cras sagittis. Curabitur a felis in nunc fringilla tristique. Donec venenatis vulputate lorem. Donec sodales sagittis magna. Nam adipiscing. Sed hendrerit. Cras non dolor. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Maecenas egestas arcu quis ligula mattis placerat. Fusce vulputate eleifend sapien. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim.

The purpose of a storyteller is not to tell you how to think, but to give you questions to think upon. Brandon Sanderson

Etiam ultricies nisi vel augue. Cras sagittis. Curabitur a felis in nunc fringilla tristique. Donec venenatis vulputate lorem. Donec sodales sagittis magna. Nam adipiscing. Sed hendrerit. Cras non dolor. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Maecenas egestas arcu quis ligula mattis placerat. Fusce vulputate eleifend sapien. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.

Nullam tincidunt adipiscing enim. Cras sagittis. Vestibulum volutpat pretium libero. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Etiam feugiat lorem non metus. Vivamus quis mi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.

Full Width Quotes

Optionally set a width for quote container width. Specify the exact pixel size or use a percentage. The example below is set to 100% width.

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction. Albert Einstein

Content

Custom Content Blocks

Break your content into sections with multiple columns, backgrounds and other custom colors.

Specify a number of columns from 1-4 and add your content to be displayed. Examples below show the use of 2, 3 and 4 columns. Each has been set to use a different content area width making the columns wider or narrower.

Three Column Section

Content width for this column section set to 70% of the browser width.

Show Content in Multiple Columns

shoes-out-car-windowAutomatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size.

Simply Add Content

lazy-catLet Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated.

Content Adapts to Screen Size

man-in-dryerFor a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size. Your content adapts to the screen size for a beautiful display on any device. Show the content in multiple columns.

Two Column Section

Content width for this two column section set to 60% of the browser width.

Include Headings

Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you.

Set the Content Width

Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display.

Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer.

Assign Font and Background Colors

Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided simply add your content.

Four Column Section With Background Image

Content width for this four column section set to 90% of the browser width.

Automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device.

Let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated.

For a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size. Your content adapts to the screen size for a beautiful display on any device. Show the content in multiple columns.

Let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated from the text and content provided. Your content adapts to the screen size for a beautiful display on any device, be it a mobile phone, tablet or desktop computer. Simply add your content and let Journalistic do the rest of the work for you. Show the content in multiple columns, automatically generated.

Maps

Maps with Markers

Specify locations with markers, custom naming and even connect markers to index points in your story.

Files

Publishing Files

Include files, documents and other downloadable attachments. This is a great way to provide a file associated with a tutorial, travel guides, whitepapers and more.

Chapters

Stories with Chapters

Publish your story with chapters for each section. Include chapter titles, sub-titles and full screen background images. Chapter based stories include a navigation menu for moving between chapters quickly.

See a sample story with chapters

screenshot-story-w-chapters

About Actors Everywhere

We're a couple of mad scientists changing the arts world. Come in to our laboratory!

Please login to view comments.