Skip to content

Commit ec40e0d

Browse files
Added Jekyll template for more readable feature descriptions (#18)
* Added Jekyll template for more readable feature descriptions * Escape double quotes (which broke github action builds) * Correct alignment of images on feature page cards
1 parent a9c14ab commit ec40e0d

File tree

6 files changed

+156
-239
lines changed

6 files changed

+156
-239
lines changed

_includes/feature-detail.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% if include.justify | downcase == "right" %}
2+
<section class="features-reversedsection">
3+
{% else %}
4+
<section>
5+
{% endif %}
6+
<div class="features-featurecontainer">
7+
<div class="features-imagecontainer">
8+
<img src="{{ include.img }}" alt="{{ include.img_alt }}" class="features-featureimage"/>
9+
</div>
10+
<div class="features-textcontainer">
11+
<h3 class="h3">{{ include.title }}</h3>
12+
{{ include.detail | strip | markdownify }}
13+
</div>
14+
</div>
15+
</section>

_sass/_features.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,15 @@
8989
width: 100%;
9090
max-width: 530px;
9191
flex-shrink: 1;
92+
93+
a {
94+
@extend .intext-link;
95+
@extend .intext-link-glow;
96+
}
97+
98+
p {
99+
@extend .p-body;
100+
}
92101
}
93102

94103
.features-reversedsection {

site_collections/_features/2d-compositing.html

Lines changed: 28 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,81 +4,34 @@
44
excerpt: text
55
collection: features
66
---
7-
<section>
8-
<div class="features-featurecontainer">
9-
<div class="features-imagecontainer">
10-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
11-
</div>
12-
<div class="features-textcontainer">
13-
<h3 class="h3">2D Tracking</h3>
14-
<p class="p-body">
15-
Track difficult movements with ease!
16-
<br />
17-
<br />
18-
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.
19-
</p>
20-
</div>
21-
</div>
22-
</section>
237

24-
<section class="features-reversedsection">
25-
<div class="features-featurecontainer">
26-
<div class="features-imagecontainer">
27-
<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"/>
28-
</div>
29-
<div class="features-textcontainer">
30-
<h3 class="h3">Rotoscoping</h3>
31-
<p class="p-body">
32-
Mask, feather, repeat!
33-
<br />
34-
<br />
35-
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.
36-
</p>
37-
</div>
38-
</div>
39-
</section>
8+
{% include feature-detail.html
9+
title="2D Tracking"
10+
img="https://picsum.photos/1280/720"
11+
img_alt=""
12+
detail="
13+
Track difficult movements with ease!
14+
<br />
15+
<br />
16+
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."
17+
%}
4018

41-
<section>
42-
<div class="features-featurecontainer">
43-
<div class="features-imagecontainer">
44-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
45-
</div>
46-
<div class="features-textcontainer">
47-
<h3 class="h3">Keying</h3>
48-
<p class="p-body">
49-
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.
50-
</p>
51-
</div>
52-
</div>
53-
</section>
19+
{% include feature-detail.html
20+
title="Paint"
21+
img="https://picsum.photos/1280/720"
22+
img_alt=""
23+
justify="right"
24+
detail="
25+
Remove objects, clone backgrounds, and fix it in post!
26+
<br />
27+
<br />
28+
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."
29+
%}
5430

55-
<!-- <section class="features-reversedsection">
56-
<div class="features-featurecontainer">
57-
<div class="features-imagecontainer">
58-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
59-
</div>
60-
<div class="features-textcontainer">
61-
<h3 class="h3">Paint</h3>
62-
<p class="p-body">
63-
Remove objects, clone backgrounds, and fix it in post!
64-
<br />
65-
<br />
66-
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.
67-
</p>
68-
</div>
69-
</div>
70-
</section> -->
71-
72-
<section class="features-reversedsection">
73-
<div class="features-featurecontainer">
74-
<div class="features-imagecontainer">
75-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
76-
</div>
77-
<div class="features-textcontainer">
78-
<h3 class="h3">Animation</h3>
79-
<p class="p-body">
80-
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.
81-
</p>
82-
</div>
83-
</div>
84-
</section>
31+
{% include feature-detail.html
32+
title="Animation"
33+
img="https://picsum.photos/1280/720"
34+
img_alt=""
35+
detail="
36+
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."
37+
%}

site_collections/_features/cg-compositing.html

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,23 @@
44
excerpt: text
55
collection: features
66
---
7-
<section>
8-
<div class="features-featurecontainer">
9-
<div class="features-imagecontainer">
10-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
11-
</div>
12-
<div class="features-textcontainer">
13-
<h3 class="h3">Multi-Channel EXR Support</h3>
14-
<p class="p-body">
15-
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.
16-
</p>
17-
<p class="p-body">
18-
Natron does not currently support deep image compositing.
19-
</p>
20-
</div>
21-
</div>
22-
</section>
237

24-
<section class="features-reversedsection">
25-
<div class="features-featurecontainer">
26-
<div class="features-imagecontainer">
27-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
28-
</div>
29-
<div class="features-textcontainer">
30-
<h3 class="h3">Stereo compositing</h3>
31-
<p class="p-body">
32-
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.
33-
</p>
34-
</div>
35-
</div>
36-
</section>
8+
{% include feature-detail.html
9+
title="Multi-Channel EXR Support"
10+
img="https://picsum.photos/1280/720"
11+
img_alt=""
12+
detail="
13+
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.
14+
<br />
15+
<br />
16+
Natron does not currently support deep image compositing."
17+
%}
18+
19+
{% include feature-detail.html
20+
title="Stereo compositing"
21+
img="https://picsum.photos/1280/720"
22+
img_alt=""
23+
justify="right"
24+
detail="
25+
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."
26+
%}

site_collections/_features/extensibility.html

Lines changed: 49 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -4,89 +4,57 @@
44
excerpt: text
55
collection: features
66
---
7-
<section>
8-
<div class="features-featurecontainer">
9-
<div class="features-imagecontainer">
10-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
11-
</div>
12-
<div class="features-textcontainer">
13-
<h3 class="h3">Expressions</h3>
14-
<p class="p-body">
15-
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.
16-
</p>
17-
</div>
18-
</div>
19-
</section>
7+
{% include feature-detail.html
8+
title="Expressions"
9+
img="https://picsum.photos/1280/720"
10+
img_alt=""
11+
detail="
12+
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."
13+
%}
2014

21-
<section class="features-reversedsection">
22-
<div class="features-featurecontainer">
23-
<div class="features-imagecontainer">
24-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
25-
</div>
26-
<div class="features-textcontainer">
27-
<h3 class="h3">Python API</h3>
28-
<p class="p-body">
29-
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.
30-
</p>
31-
</div>
32-
</div>
33-
</section>
15+
{% include feature-detail.html
16+
title="Python API"
17+
img="https://picsum.photos/1280/720"
18+
img_alt=""
19+
justify="right"
20+
detail="
21+
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."
22+
%}
3423

35-
<section>
36-
<div class="features-featurecontainer">
37-
<div class="features-imagecontainer">
38-
<img src="../../img/feature-images/feature-ofx.png" alt="OpenFX Association logo" class="features-featureimage"/>
39-
</div>
40-
<div class="features-textcontainer">
41-
<h3 class="h3">OpenFX Support</h3>
42-
<p class="p-body">
43-
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!
44-
</p>
45-
</div>
46-
</div>
47-
</section>
24+
{% include feature-detail.html
25+
title="OpenFX Support"
26+
img="../../img/feature-images/feature-ofx.png"
27+
img_alt="OpenFX plugin standard logo"
28+
detail="
29+
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
30+
[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!"
31+
%}
4832

49-
<section class="features-reversedsection">
50-
<div class="features-featurecontainer">
51-
<div class="features-imagecontainer">
52-
<img src="https://picsum.photos/1280/720" alt="" class="features-featureimage"/>
53-
</div>
54-
<div class="features-textcontainer">
55-
<h3 class="h3">PyPlugs</h3>
56-
<p class="p-body">
57-
User-created custom nodes can be created visually within Natron by grouping existing nodes and exported with the "PyPlug" exporter.
58-
</p>
59-
<p class="p-body">
60-
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.
61-
</p>
62-
</div>
63-
</div>
64-
</section>
33+
{% include feature-detail.html
34+
title="PyPlugs"
35+
img="https://picsum.photos/1280/720"
36+
img_alt=""
37+
justify="right"
38+
detail="
39+
User-created custom nodes can be created visually within Natron by grouping existing nodes and exported with the \"PyPlug\" exporter.
40+
<br />
41+
<br />
42+
Various tools created by the commuity can be found in [Natron's community plugins repository](https://github.com/NatronGitHub/natron-plugins) on GitHub."
43+
%}
6544

66-
<section>
67-
<div class="features-featurecontainer">
68-
<div class="features-imagecontainer">
69-
<img src="../../img/feature-images/feature-shadertoy.png" alt="Shadertoy logo" class="features-featureimage"/>
70-
</div>
71-
<div class="features-textcontainer">
72-
<h3 class="h3">Shadertoy Integration</h3>
73-
<p class="p-body">
74-
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.
75-
</p>
76-
</div>
77-
</div>
78-
</section>
45+
{% include feature-detail.html
46+
title="Shadertoy Integration"
47+
img="../../img/feature-images/feature-shadertoy.png"
48+
img_alt="Shadertoy WebGL shaders logo"
49+
detail="
50+
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."
51+
%}
7952

80-
<section class="features-reversedsection">
81-
<div class="features-featurecontainer">
82-
<div class="features-imagecontainer">
83-
<img src="../../img/feature-images/feature-gmic.png" alt="GMIC logo" class="features-featureimage"/>
84-
</div>
85-
<div class="features-textcontainer">
86-
<h3 class="h3">GMIC Integration</h3>
87-
<p class="p-body">
88-
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!
89-
</p>
90-
</div>
91-
</div>
92-
</section>
53+
{% include feature-detail.html
54+
title="GMIC Integration"
55+
img="../../img/feature-images/feature-gmic.png"
56+
img_alt="GMIC image-processing plugins logo"
57+
justify="right"
58+
detail="
59+
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!"
60+
%}

0 commit comments

Comments
 (0)