Skip to content

clickonmedia/interactive-longform-articles

Repository files navigation

Interactive Longform Articles

Interactive multimedia articles, with a background scroll effect. Wordpress plugin for for longform journalism.

Screencast

Examples

https://www.theversed.com/90435/life-preserver-meet-the-navy-airr-who-is-dedicating-his-life-to-helping-others/

https://www.theversed.com/91272/ascender-one-sailors-journey-reach-new-heights

https://www.theversed.com/88874/wavemaker-the-road-to-recovery

Usage

  1. Upload the unzipped plugin files to the /wp-content/plugins/ directory, or install the plugin via Wordpress CMS
  2. Activate the plugin in Plugins section in Wordpress CMS.
  3. If using WP 5.0+, disable Gutenberg Editor (see instruction below)
  4. Add a new post or page, and select "Interactive article" as the page template
  5. Create an Interactive Article (see instruction below)
  6. Publish article

How to disable the Gutenberg editor

Interactive Longform Articles doesn't currently support the Gutenberg Editor. Please see your options on disabling the editor at: https://kinsta.com/blog/disable-gutenberg-wordpress-editor

How to create Interactive Articles

https://github.com/clickonmedia/interactive-longform-articles/wiki/Instructions

Settings

  • There are a few optional settings you can adjust in Settings > Interactive Longform Articles:
    • Enable Interactive Articles as a separate post type
    • Enable the "downloads" section
    • Add Google Analytics Event tracking
    • Adjust the progress indicator color

Optional features

Custom logo

Header and footer

  • Default header and footer can be customized by including a header.php or footer.php template in a directory named "interactive" inside the theme

Shortcode

  • A carousel list of interactive articles can be added by using shortcode [interactive-list max="3"]. "Max" parameter indicates the maximum amount of articles listed. Requires that featured images are set for all articles.

Requirements

  • Wordpress 3.0 - 4.*
  • Wordpress 5.* with Gutenberg disabled

Wordpress Plugin page

https://wordpress.org/plugins/interactive-longform-articles/

Development

Use Node 8.*

npm install
npx gulp default
npx gulp watch

The plugin uses SASS for styling. The files can be found at the /sass directory.

https://sass-lang.com/guide

License

Licensed under GNU General Public License v3.0. See LICENSE for details

Acknowledgements

Authored by the tech team at CLICKON Media Ltd https://www.clickon.co