clickonmedia

<p>Interactive longform articles, with a fading scroll effect.</p>
<h3>Examples</h3>
<p>https://www.theversed.com/90435/life-preserver-meet-the-navy-airr-who-is-dedicating-his-life-to-helping-others/</p>
<p>https://www.theversed.com/91272/ascender-one-sailors-journey-reach-new-heights</p>
<p>https://www.theversed.com/88874/wavemaker-the-road-to-recovery</p>
<h3>Usage</h3>
<ol>
<li>Upload the unzipped plugin files to the <code>/wp-content/plugins/</code> directory, or install the plugin via WordPress CMS</li>
<li>Activate the plugin in Plugins section in WordPress CMS.</li>
<li>If using WP 5.0+, disable Gutenberg Editor (see instruction below)</li>
<li>Add a new post or page, and select “Interactive article” as the page template</li>
<li>Create an Interactive Article (see instruction below)</li>
<li>Publish article</li>
</ol>
<h3>How to disable the Gutenberg editor</h3>
<p>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</p>
<h3>How to create Interactive Articles</h3>
<p>https://github.com/clickonmedia/interactive-longform-articles/wiki/Instructions</p>
<h3>Settings</h3>
<ul>
<li>There are a few optional settings you can adjust in Settings > Interactive Longform Articles:
<ul>
<li>Enable Interactive Articles as a separate post type</li>
<li>Enable the “downloads” section</li>
<li>Enable iframe embedding in text editor</li>
<li>Add Google Analytics Event tracking</li>
<li>Adjust the progress indicator color</li>
</ul>
</li>
</ul>
<h3>Optional features</h3>
<h3>Custom logo</h3>
<ul>
<li>A custom logo can be added by enabling Custom Logo for the theme: https://developer.wordpress.org/themes/functionality/custom-logo</li>
</ul>
<h3>Header and footer</h3>
<ul>
<li>Default header and footer can be customized by including a header.php or footer.php template in a directory named “interactive” inside the theme</li>
</ul>
<h3>Shortcode</h3>
<ul>
<li>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.</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>WordPress 3.0 – 4.*</li>
<li>WordPress 5.* with Gutenberg disabled</li>
</ul>


Interactive Longform Articles

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

RylanH

<p>The Storyform plugin let’s you craft your story in a format that is more enticing to the reader. Utilizing rich full-bleed fullscreen magazine layouts that flip horizontally, Storyfom gets out of the way of your content. You can even selectively choose which posts to apply <a href="https://storyform.co" rel="nofollow ugc">Storyform</a> to. Storyform works great with longform articles, photo-essays, reports or the everyday blog.</p>
<p>The Storyform platform supports print-like features such as:</p>
<ul>
<li>fullscreen fullbleed magazine layouts</li>
<li>truly responsive across all your devices</li>
<li>touch, mouse and keyboard friendly pagination, no more scrolling</li>
<li>multi-column articles</li>
<li>high quality typography</li>
<li>drop-caps</li>
<li>pullquotes</li>
<li>large photography</li>
<li>animations</li>
<li>background video</li>
<li>captions</li>
</ul>
<p><iframe loading="lazy" title="How to create a great article / Storyform" src="https://player.vimeo.com/video/106440432?dnt=1&app_id=122963" width="750" height="422" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"></iframe></p>
<p><iframe loading="lazy" title="How to create a great article / Storyform" src="https://player.vimeo.com/video/106440432?dnt=1&app_id=122963" width="750" height="422" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"></iframe></p>
<h4>Docs, Support and Resources</h4>
<p>Visit the <a href="//storyform.co/docs/wordpress" rel="nofollow ugc">Official Storyform Plugin Homepage</a> for more detailed information or <a href="//storyform.co" rel="nofollow ugc">Storyform</a> to hear more about the platform.</p>
<h4>Using Storyform</h4>
<p>Storyform is built to work with mainly HTML5 standard semantic article content. It attempts to remove any inline styling or extraneous elements and simply uses the underlying semantic elements. It then applies it’s template layout and styling that you chose for the post. Storyform does not support:</p>
<ul>
<li><code><object></code> based videos or content</li>
<li><code><iframe></code> embedded elements other than YouTube, Vimeo videos</li>
<li>links or alignment attributes on embedded media</li>
</ul>


Storyform

The Storyform plugin let's you create engaging, fullscreen magazine stories with just one click.

Interactive Longform Articles vs Storyform