Skip to content

Added Jekyll template for more readable feature descriptions #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 27, 2025
Merged

Added Jekyll template for more readable feature descriptions #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6956a4
Added Jekyll template for more readable feature descriptions
Songtech-0912 May 27, 2025
6d25e3d
Escape double quotes (which broke github action builds)
Songtech-0912 May 27, 2025
f7fc33c
Correct alignment of images on feature page cards
Songtech-0912 May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions _includes/feature-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{% if include.justify | downcase == "right" %}
<section class="features-reversedsection">
{% else %}
<section>
{% endif %}
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="{{ include.img }}" alt="{{ include.img_alt }}" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">{{ include.title }}</h3>
{{ include.detail | strip | markdownify }}
</div>
</div>
</section>
9 changes: 9 additions & 0 deletions _sass/_features.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,15 @@
width: 100%;
max-width: 530px;
flex-shrink: 1;

a {
@extend .intext-link;
@extend .intext-link-glow;
}

p {
@extend .p-body;
}
}

.features-reversedsection {
Expand Down
103 changes: 28 additions & 75 deletions site_collections/_features/2d-compositing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,34 @@
excerpt: text
collection: features
---
<section>
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">2D Tracking</h3>
<p class="p-body">
Track difficult movements with ease!
<br />
<br />
Natron's tracker can handle and correct a variety of footage types with single point or perspective tracking. Luminance variation correction and manual keyframes ensure get solid tracks even in tricky shots.
</p>
</div>
</div>
</section>

<section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="../../img/feature-images/feature-roto.jpg" alt="A soldier firing a rifle, in half the image the soldier has been isolated from the background." class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Rotoscoping</h3>
<p class="p-body">
Mask, feather, repeat!
<br />
<br />
Natronʼs rotoscope node allows you to capture sub-pixel details. Each roto point has individual controls for feathering, allowing compositors to capture plate motion blur in different areas of each roto-shape. Roto shapes can be tracked for faster results.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="2D Tracking"
img="https://picsum.photos/1280/720"
img_alt=""
detail="
Track difficult movements with ease!
<br />
<br />
Natron's tracker can handle and correct a variety of footage types with single point or perspective tracking. Luminance variation correction and manual keyframes ensure get solid tracks even in tricky shots."
%}

<section>
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Keying</h3>
<p class="p-body">
Natron provides a wide range of keyers to assist in extracting mattes from images. The familiar Additive, Chroma, and Hue keyers are built-in, as well as Natron's own powerful PIK keyer. Tools for refining matte edges and color edges allow you you to achieve professional results.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="Paint"
img="https://picsum.photos/1280/720"
img_alt=""
justify="right"
detail="
Remove objects, clone backgrounds, and fix it in post!
<br />
<br />
Natron features a vector-based RotoPaint node, making tasks like object removal, dust removal, and creating garbage mattes a breeze. Paint strokes are available for a variety of brushes. Additionally, per-point and global feather, motion blur, blending modes and individual or hierarchical 2D transformations are fully supported."
%}

<!-- <section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Paint</h3>
<p class="p-body">
Remove objects, clone backgrounds, and fix it in post!
<br />
<br />
Natron features a vector-based RotoPaint node, making tasks like object removal, dust removal, and creating garbage mattes a breeze. Paint strokes are available for a variety of brushes. Additionally, per-point and global feather, motion blur, blending modes and individual or hierarchical 2D transformations are fully supported.
</p>
</div>
</div>
</section> -->

<section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Animation</h3>
<p class="p-body">
Natron offers a simple and efficient way to manage keyframes with an accurate and intuitive curve editor. You can set expressions on animation curves to create fluid, believable motion for objects. Natron also incorporates a fully featured dope-sheet to view all animations at a glance, or to quickly edit clips and keyframes.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="Animation"
img="https://picsum.photos/1280/720"
img_alt=""
detail="
Natron offers a simple and efficient way to manage keyframes with an accurate and intuitive curve editor. You can set expressions on animation curves to create fluid, believable motion for objects. Natron also incorporates a fully featured dope-sheet to view all animations at a glance, or to quickly edit clips and keyframes."
%}
48 changes: 19 additions & 29 deletions site_collections/_features/cg-compositing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,23 @@
excerpt: text
collection: features
---
<section>
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Multi-Channel EXR Support</h3>
<p class="p-body">
Take advantage of nearly every pass that comes out of your renderer of choice! Tweak certian chanels from your renders to match plates, or use them to create unique stylized looks as part of your CG compositing process.
</p>
<p class="p-body">
Natron does not currently support deep image compositing.
</p>
</div>
</div>
</section>

<section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Stereo compositing</h3>
<p class="p-body">
Make eye-popping visual effects with Natron's built-in stereoscopic tools. You get all of Natron's 200+ typical nodes in a stereoscopic project, plus a variety of tools for working with multiple views and previewing stereo live in Natron.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="Multi-Channel EXR Support"
img="https://picsum.photos/1280/720"
img_alt=""
detail="
Take advantage of nearly every pass that comes out of your renderer of choice! Tweak certian chanels from your renders to match plates, or use them to create unique stylized looks as part of your CG compositing process.
<br />
<br />
Natron does not currently support deep image compositing."
%}

{% include feature-detail.html
title="Stereo compositing"
img="https://picsum.photos/1280/720"
img_alt=""
justify="right"
detail="
Make eye-popping visual effects with Natron's built-in stereoscopic tools. You get all of Natron's 200+ typical nodes in a stereoscopic project, plus a variety of tools for working with multiple views and previewing stereo live in Natron."
%}
130 changes: 49 additions & 81 deletions site_collections/_features/extensibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,89 +4,57 @@
excerpt: text
collection: features
---
<section>
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Expressions</h3>
<p class="p-body">
Link just about any two parameters with Natron's broad support for expressions. Automate your nodes with mathematical functions, and extend expressions with Python. Programmic commands not appealing to you? Natron also offers a GUI-based system for quickly linking any two controls, and expressions are visible within the curve editor.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="Expressions"
img="https://picsum.photos/1280/720"
img_alt=""
detail="
Link just about any two parameters with Natron's broad support for expressions. Automate your nodes with mathematical functions, and extend expressions with Python. Programmic commands not appealing to you? Natron also offers a GUI-based system for quickly linking any two controls, and expressions are visible within the curve editor."
%}

<section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Python API</h3>
<p class="p-body">
Make Natron your own with Natron's powerful scripting support. The Python API can be used for full pipeline integration and automating common tasks and procedures. PySide is also included to allow users to build custom user interfaces via Python and the Qt framework.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="Python API"
img="https://picsum.photos/1280/720"
img_alt=""
justify="right"
detail="
Make Natron your own with Natron's powerful scripting support. The Python API can be used for full pipeline integration and automating common tasks and procedures. PySide is also included to allow users to build custom user interfaces via Python and the Qt framework."
%}

<section>
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="../../img/feature-images/feature-ofx.png" alt="OpenFX Association logo" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">OpenFX Support</h3>
<p class="p-body">
Natron is compliant with the OpenFX standard, allowing you to tap into the vast ecosystem of commercial OFX plugins. Never worry about missing the functionality of your OFX plugins, with Natron's support for <a href="http://www.revisionfx.com" class="intext-link intext-link-glow">RevisionFX products</a>, <a href="https://www.neatvideo.com" class="intext-link intext-link-glow">NeatVideo denoiser</a>, <a href="http://www.thefoundry.co.uk/products/furnace/" class="intext-link intext-link-glow">Furnace by The Foundry</a>, <a href="http://www.thefoundry.co.uk/products/plugins/keylight/" class="intext-link intext-link-glow">KeyLight</a>, <a href="http://www.genarts.com/software/sapphire/overview" class="intext-link intext-link-glow">GenArts Sapphire</a>, <a href="http://www.redgiant.com/universe/" class="intext-link intext-link-glow">Red Giant Universe</a>, <a href="https://hitfilm.com/ignite" class="intext-link intext-link-glow">Ignite by HitFilm</a>, and many more!
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="OpenFX Support"
img="../../img/feature-images/feature-ofx.png"
img_alt="OpenFX plugin standard logo"
detail="
Natron is compliant with the OpenFX standard, allowing you to tap into the vast ecosystem of commercial OFX plugins. Never worry about missing the functionality of your OFX plugins, with Natron's support for
[RevisionFX products](http://www.revisionfx.com), [NeatVideo denoiser](https://www.neatvideo.com), [Furnace by The Foundry](http://www.thefoundry.co.uk/products/furnace/), [KeyLight](http://www.thefoundry.co.uk/products/plugins/keylight/), [GenArts Sapphire](http://www.genarts.com/software/sapphire/overview), [Red Giant Universe](http://www.redgiant.com/universe/), [Ignite by HitFilm](https://hitfilm.com/ignite), and many more!"
%}

<section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">PyPlugs</h3>
<p class="p-body">
User-created custom nodes can be created visually within Natron by grouping existing nodes and exported with the "PyPlug" exporter.
</p>
<p class="p-body">
Various tools created by the commuity can be found in <a href="https://github.com/NatronGitHub/natron-plugins" class="intext-link intext-link-glow">Natron's community plugins repository</a> on GitHub.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="PyPlugs"
img="https://picsum.photos/1280/720"
img_alt=""
justify="right"
detail="
User-created custom nodes can be created visually within Natron by grouping existing nodes and exported with the \"PyPlug\" exporter.
<br />
<br />
Various tools created by the commuity can be found in [Natron's community plugins repository](https://github.com/NatronGitHub/natron-plugins) on GitHub."
%}

<section>
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="../../img/feature-images/feature-shadertoy.png" alt="Shadertoy logo" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">Shadertoy Integration</h3>
<p class="p-body">
Make cinematic, high-performance, real-time effects with Natron's support for Shadertoy shaders. Create generative art and procedural effects using shadertoys, or use any shader found on <a href="https://www.shadertoy.com/" class="intext-link intext-link-glow">shadertoy.com</a> or <a href="https://cineshader.com/gallery" class="intext-link intext-link-glow">Cineshader</a>. Natron optimizes your shadertoys by outputting as 2D images to the graph, enabling you to use proxies for better performance.
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="Shadertoy Integration"
img="../../img/feature-images/feature-shadertoy.png"
img_alt="Shadertoy WebGL shaders logo"
detail="
Make cinematic, high-performance, real-time effects with Natron's support for Shadertoy shaders. Create generative art and procedural effects using shadertoys, or use any shader found on [shadertoy.com](https://www.shadertoy.com/) or [Cineshader](https://cineshader.com/gallery). Natron optimizes your shadertoys by outputting as 2D images to the graph, enabling you to use proxies for better performance."
%}

<section class="features-reversedsection">
<div class="features-featurecontainer">
<div class="features-imagecontainer">
<img src="../../img/feature-images/feature-gmic.png" alt="GMIC logo" class="features-featureimage"/>
</div>
<div class="features-textcontainer">
<h3 class="h3">GMIC Integration</h3>
<p class="p-body">
Natron integrates with the G'MIC library, providing full-featured open-source image processing capabilities to Natron. More than 500 filters, effects, and retouching tools from G'MIC can be directly accessible from Natron, including color grades, artistic filters, deformations, patterns, shadows, and more!
</p>
</div>
</div>
</section>
{% include feature-detail.html
title="GMIC Integration"
img="../../img/feature-images/feature-gmic.png"
img_alt="GMIC image-processing plugins logo"
justify="right"
detail="
Natron integrates with the G'MIC library, providing full-featured open-source image processing capabilities to Natron. More than 500 filters, effects, and retouching tools from G'MIC can be directly accessible from Natron, including color grades, artistic filters, deformations, patterns, shadows, and more!"
%}
Loading
Loading