Skip to content

Commit 34a4b4a

Browse files
ramonfigueiredoramonfigueiredo
authored
[docs] Add OpenCue walkthrough video to documentation pages (#1837)
- Add embedded walkthrough video to homepage with tutorial topic cards - Include video in documentation overview page (_docs/index.md) - Reorganize ASWF video section within stats bar - Add section titles for better content organization **Link the Issue(s) this Pull Request is related to.** - #1800
1 parent 6862b6f commit 34a4b4a

File tree

2 files changed

+103
-26
lines changed

2 files changed

+103
-26
lines changed

‎docs/_docs/index.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,23 @@ permalink: /docs/
4141

4242
---
4343

44+
<!-- OpenCue Walkthrough Video Section -->
45+
<section class="video-section" aria-labelledby="walkthrough-video-heading">
46+
<div class="video-container">
47+
<h2 id="walkthrough-video-heading" class="section-title">OpenCue Walkthrough Tutorial</h2>
48+
<div class="video-wrapper">
49+
<iframe
50+
src="https://www.youtube-nocookie.com/embed/v4i83ccrz5w"
51+
title="OpenCue Walkthrough - Submitting and Monitoring Render Jobs"
52+
frameborder="0"
53+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
54+
allowfullscreen
55+
loading="lazy">
56+
</iframe>
57+
</div>
58+
</div>
59+
</section>
60+
4461
### [Quick starts](quick-starts)
4562

4663
Try OpenCue in the sandbox environment on different operating systems

‎docs/index.md‎

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -60,38 +60,98 @@ permalink: /
6060
</section>
6161

6262
<!-- Production Scale Stats Bar -->
63-
<div class="stats-bar">
64-
<div class="stats-container">
65-
<div class="stat-item">
66-
<div class="stat-icon">
67-
<i class="fa-solid fa-rocket" aria-hidden="true"></i>
68-
</div>
69-
<div class="stat-text">High-scale rendering</div>
70-
<div class="stat-label">OpenCue provides features to manage rendering jobs at high-scale</div>
71-
</div>
72-
<div class="stat-item">
73-
<div class="stat-icon">
74-
<i class="fa-solid fa-film" aria-hidden="true"></i>
63+
<section class="stats-section" aria-labelledby="stats-heading">
64+
<div class="stats-header">
65+
<h2 id="stats-heading" class="section-title">Why Choose OpenCue</h2>
66+
<p class="section-subtitle">Production-proven render management at any scale</p>
67+
</div>
68+
<div class="stats-bar">
69+
<div class="stats-container">
70+
<div class="stat-item">
71+
<div class="stat-icon">
72+
<i class="fa-solid fa-rocket" aria-hidden="true"></i>
73+
</div>
74+
<div class="stat-text">High-scale rendering</div>
75+
<div class="stat-label">OpenCue provides features to manage rendering jobs at high-scale</div>
7576
</div>
76-
<div class="stat-text">Built for visual effects and animation</div>
77-
<div class="stat-label">Sony Pictures Imageworks in-house render manager used on hundreds of films</div>
78-
</div>
79-
<div class="stat-item">
80-
<div class="stat-icon">
81-
<i class="fa-solid fa-server" aria-hidden="true"></i>
77+
<div class="stat-item">
78+
<div class="stat-icon">
79+
<i class="fa-solid fa-film" aria-hidden="true"></i>
80+
</div>
81+
<div class="stat-text">Built for visual effects and animation</div>
82+
<div class="stat-label">Sony Pictures Imageworks in-house render manager used on hundreds of films</div>
83+
</div>
84+
<div class="stat-item">
85+
<div class="stat-icon">
86+
<i class="fa-solid fa-server" aria-hidden="true"></i>
87+
</div>
88+
<div class="stat-text">Render at scale</div>
89+
<div class="stat-label">Highly-scalable architecture supporting numerous concurrent machines</div>
90+
</div>
91+
<div class="stat-item">
92+
<div class="stat-icon">
93+
<i class="fa-solid fa-cloud" aria-hidden="true"></i>
94+
</div>
95+
<div class="stat-text">Flexible deployment</div>
96+
<div class="stat-label">Support for multi facility, on-premise, cloud, and hybrid deployments</div>
8297
</div>
83-
<div class="stat-text">Render at scale</div>
84-
<div class="stat-label">Highly-scalable architecture supporting numerous concurrent machines</div>
8598
</div>
86-
<div class="stat-item">
87-
<div class="stat-icon">
88-
<i class="fa-solid fa-cloud" aria-hidden="true"></i>
99+
</div>
100+
</section>
101+
102+
<!-- OpenCue Walkthrough Section -->
103+
<section class="features-section" aria-labelledby="walkthrough-heading" style="padding-top: 2rem;">
104+
<div class="features-container">
105+
<h2 id="walkthrough-heading" class="section-title">OpenCue Walkthrough Tutorial</h2>
106+
<p class="section-subtitle">Learn how to use OpenCue with this quick guide</p>
107+
108+
<div class="features-grid">
109+
<!-- Walkthrough Video -->
110+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
111+
<iframe
112+
src="https://www.youtube-nocookie.com/embed/v4i83ccrz5w"
113+
title="OpenCue Walkthrough - Submitting and Monitoring Render Jobs"
114+
frameborder="0"
115+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
116+
allowfullscreen
117+
style="position: absolute; top:0; left:0; width:100%; height:100%;">
118+
</iframe>
119+
</div>
120+
121+
<div class="feature-card" tabindex="0">
122+
<div class="feature-icon">
123+
<i class="fa-solid fa-cube" aria-hidden="true"></i>
124+
</div>
125+
<h3 class="feature-title">Submitting Jobs</h3>
126+
<p class="feature-description">Launch the OpenCue submission form, configure job details (name, shot, layer), and set job types and services for your render.</p>
127+
</div>
128+
129+
<div class="feature-card" tabindex="0">
130+
<div class="feature-icon">
131+
<i class="fa-solid fa-sitemap" aria-hidden="true"></i>
132+
</div>
133+
<h3 class="feature-title">Setting up Dependencies</h3>
134+
<p class="feature-description">Configure relationships between render jobs to control execution order and manage complex multi-stage workflows.</p>
135+
</div>
136+
137+
<div class="feature-card" tabindex="0">
138+
<div class="feature-icon">
139+
<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
140+
</div>
141+
<h3 class="feature-title">Job Hierarchy</h3>
142+
<p class="feature-description">Learn how OpenCue organizes work into Jobs, Layers, and Frames for efficient render management.</p>
143+
</div>
144+
145+
<div class="feature-card" tabindex="0">
146+
<div class="feature-icon">
147+
<i class="fa-solid fa-desktop" aria-hidden="true"></i>
148+
</div>
149+
<h3 class="feature-title">Monitoring with CueGUI or CueWeb</h3>
150+
<p class="feature-description">Navigate the different interfaces including Shows, Allocations, Subscriptions, Monitor Host, Services, and Log views for comprehensive job tracking.</p>
89151
</div>
90-
<div class="stat-text">Flexible deployment</div>
91-
<div class="stat-label">Support for multi facility, on-premise, cloud, and hybrid deployments</div>
92152
</div>
93153
</div>
94-
</div>
154+
</section>
95155

96156
<!-- Feature Cards Grid -->
97157
<section class="features-section" aria-labelledby="features-heading">

0 commit comments

Comments
 (0)