Workarea Super Hero

Give your content super powers!

Super Hero plugin for the Workarea platform.

Super hero provides a fleshed out set of content tools that allows admin users to deliver beautiful content easily.

Media Modes offers a set of options that dictate how media will be rendered

Stretches/squishes media to fit the viewport or container.

automatically deteects and retains the aspect ratio of the chosen media

Allows the admin to select a 'crop to' location (left, center, right)

The image will maintain it's original height and crop to the designated location as the browser is resized

Allows the user to select up to 3 images which are rendered as a element

Provides the Admin user with a text area input to paste in a full embed code from Vimeo or Youtube

The full iframe embed code must be provided, this will be parsed in the view model and constructed into a responsive iframe on the store front.

Super hero provides a full color picker for both text and background colors. Brand colors can be configured on a per-installation basis inside the super_hero_tasks.rake file.

The background color picker also provides a range slider and text input to control opacity. This accepts values between 0 - 100 and is converted to an alpha channel in the view model.

Currently browser support for input type='color' is patchy, a polyfill is in the works to allow users on unsupported browsers to use this functionality.

The admin user is able to select from 9 content positions using a sweet SVG UI element. By default a position offset of 5% is defined, you can override the $positioning-offset scss variable in your host application to customize the space between content and the edge of the block.

Super hero includes a VideoEmbedder service which parses youtube and vimeo iframes and generates iframe parameters. The embedder accepts the iframe embed code and a set of options. Options are part of the advanced_video Content::Field and include: loop, autoplay, and mute functionality.

The plugin also includes js player API integrations for youtube and vimeo. This enables the mute functionality and fires events to Workarea analytics.js. In order to use those analytics events in your host application you will need to write analytics adapter callbacks for the service you wish to send the data to.

Example callbacks:

'vimeo': function (payload) {
    send('send', payload.eventCategory, payload.eventAction, payload.eventLabel, payload.eventValue);
},

'youtube': function (payload) {
    send('send', payload.eventCategory, payload.eventAction, payload.eventLabel, payload.eventValue);
},

Add the gem to your application's Gemfile:

# ...
gem 'workarea-super_hero'
# ...

Update your application's bundle.

cd path/to/application
bundle

Superhero implements a content block type which no longer requires any initial configuration. You may wish to override the config for the block type in order to change the preset colors for background and text color pickers.

See https://developer.workarea.com for Workarea Commerce documentation.

Workarea Super Hero is released under the Business Software License