Skip to content

Commit 9b61b92

Browse files
matthewlow-dwamatthewlow-dwa
committed
Adds asc-stem3/staging page, and image captions and lightbox to gallery
Signed-off-by: Matthew Low <Matthew.Low@dreamworks.com>
1 parent b0bc550 commit 9b61b92

5 files changed

Lines changed: 561 additions & 199 deletions

File tree

‎src/component/GalleryImage.astro‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
import { BASE_URL } from "../utils/constants";
3+
4+
const { src, caption, captionStyle, ...attrs } = Astro.props;
5+
const isOverlay = captionStyle === 'overlay';
6+
const hasCaption = Boolean(caption);
7+
const showOverlay = isOverlay && hasCaption;
8+
const showCaption = !isOverlay && hasCaption;
9+
const galleryIdx = attrs['data-gallery'];
10+
const imageIdx = attrs['data-index'];
11+
---
12+
13+
<div class:list={["gallery-item", { "gallery-item--overlay": isOverlay, "gallery-item--below": !isOverlay }]} data-gallery={galleryIdx} data-index={imageIdx}>
14+
<div class="gallery-item-img-wrapper">
15+
<img class="gallery-scroll-img" src={`${BASE_URL}${src}`} />
16+
{showOverlay && <span class="gallery-caption-overlay">{caption}</span>}
17+
</div>
18+
{showCaption && <p class="gallery-caption-below">{caption}</p>}
19+
</div>
20+
21+
<style>
22+
.gallery-item {
23+
flex-shrink: 0;
24+
}
25+
26+
.gallery-item-img-wrapper {
27+
position: relative;
28+
overflow: hidden;
29+
}
30+
31+
.gallery-scroll-img {
32+
height: 300px;
33+
width: auto;
34+
object-fit: contain;
35+
flex-shrink: 0;
36+
}
37+
38+
/* Overlay style: white text on black gradient at bottom of image */
39+
.gallery-caption-overlay {
40+
position: absolute;
41+
bottom: 0;
42+
left: 0;
43+
right: 0;
44+
padding: 15px 16px 15px;
45+
background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 1));
46+
color: #ffffff;
47+
font-family: "Titillium Web", "Open Sans", sans-serif;
48+
font-size: 16px;
49+
font-weight: 600;
50+
letter-spacing: 0.5px;
51+
text-align: center;
52+
}
53+
54+
/* Below style: traditional caption underneath the image */
55+
.gallery-caption-below {
56+
margin-top: 8px;
57+
color: #555555;
58+
font-family: "Titillium Web", "Open Sans", sans-serif;
59+
font-size: 14px;
60+
font-weight: 400;
61+
text-align: center;
62+
}
63+
</style>

‎src/content/articles/asc-stem3-staging.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
---
2+
############################################################
3+
# Card view on home page
4+
############################################################
5+
# Should the project show up on the home page
6+
show: false
7+
# The order the project card will show up on the home page
8+
order: 12
9+
# Image for the project card
10+
cardImage: {
11+
src: "../images/StEM3/hero.jpg",
12+
alt: "Stem 3 still image",
13+
}
14+
# The buttons that will show up on the project card
15+
buttons: [
16+
{
17+
text: "DOWNLOADS PAGE",
18+
url: "asc-stem3",
19+
type: "primary"
20+
},
21+
{
22+
text: "PROJECT HOME",
23+
url: "https://theasc.com/society/stem3",
24+
type: "primary"
25+
}
26+
]
27+
# The description of the project card
28+
description: "The American Society of Cinematographers Motion Imaging Technology Council introduces the next phase of the ASC Standard Evaluation Material projects: ASC MITC StEM3-VP, the third StEM project specifically for in-camera visual effects virtual production LED wall/volume technology. For more information, visit the"
29+
descriptionLinks: {
30+
text: "ASC StEM3 website.",
31+
url: "https://theasc.com/society/stem3"
32+
}
33+
34+
############################################################
35+
# Article / Blog View
36+
############################################################
37+
# The layout file the blog page is using
38+
layout: "../../layout/ASCStem3Layout.astro"
39+
# Title of the blog page
40+
title: "ASC StEM3 - Standard Evaluation Material 3"
41+
# Used mainly for the Breadcrumbs
42+
titleAlt: "Standard Evaluation Material 3"
43+
# The url of the blog page
44+
url: "asc-stem3"
45+
# The cover image at the top of the blog
46+
coverImage: {
47+
src: "../images/StEM3/hero.jpg",
48+
alt: "ASC Stem 3",
49+
}
50+
# The image caption under the cover image
51+
imageCaption: {
52+
# Text is separated by sections to allow links to be added in. <text> <link> <text>
53+
text: [
54+
"The American Society of Cinematographers Motion Imaging Technology Council introduces the next phase of the ASC Standard Evaluation Material projects: ASC MITC StEM3-VP, the third StEM project specifically for in-camera visual effects virtual production LED wall/volume technology.",
55+
"Created by the ASC's MITC under the leadership of the Virtual Production committee, the StEM3-VP is a suite of donated assets that will be available to download from the Academy Software Foundation's Digital Production Library shortly, in summer 2026. The suite features multiple Epic Games Unreal Engine pre-built environments donated by top virtual production companies around the world, 2D driving plates, and 2D test elements that a cinematographer may use to test and evaluate a stage before shooting their production on it. The StEM3-VP assets can be used to check the performance and integrity of the LED panels and system functions.",
56+
"In addition, among the assets is a short scene shot by David Klein, ASC, written by Michael Goi, ASC, ISC and ASC associate member Jay Holben and directed by Holben. \"Warped: CyberCity\" showcases the capabilities of the ICVFX volume technology and provides a visual example using one of the donated assets.",
57+
"For more information, visit the "
58+
],
59+
# Sample text links that would go in the caption if any. If not remove them like this:
60+
# {
61+
# text: "",
62+
# link: ""
63+
# }
64+
textLinks: [
65+
{
66+
text: "",
67+
link: ""
68+
},
69+
{
70+
text: "",
71+
link: ""
72+
},
73+
{
74+
text: "",
75+
link: ""
76+
},
77+
{
78+
text: "ASC StEM3 website.",
79+
link: "https://theasc.com/society/stem3"
80+
}]
81+
}
82+
83+
# The extra image gallery
84+
# [] []
85+
# [] []
86+
otherImages: [
87+
{
88+
title: "Asset Gallery",
89+
captionStyle: "overlay",
90+
images: [
91+
{ src: "../images/StEM3/gallery1.jpg", caption: "Cybercity" },
92+
{ src: "../images/StEM3/gallery2.jpg", caption: "Base Camp" },
93+
{ src: "../images/StEM3/gallery3.jpg", caption: "Back Alley" },
94+
{ src: "../images/StEM3/gallery4.jpg", caption: "Saloon" },
95+
{ src: "../images/StEM3/gallery5.jpg", caption: "Forest" },
96+
{ src: "../images/StEM3/gallery6.jpg", caption: "Subway Station" },
97+
{ src: "../images/StEM3/gallery7.jpg", caption: "LA Driving Plate" },
98+
{ src: "../images/StEM3/gallery8.jpg", caption: "Soda Cans" },
99+
{ src: "../images/StEM3/gallery9.jpg", caption: "Lightning" },
100+
]
101+
},
102+
{
103+
title: '"Warped : Cybercity" short film',
104+
images: [
105+
"../images/StEM3/warped1.jpg",
106+
"../images/StEM3/warped2.jpg",
107+
"../images/StEM3/warped3.jpg",
108+
"../images/StEM3/warped4.jpg",
109+
]
110+
}
111+
]
112+
113+
# The download section of the blog
114+
downloadSection: {
115+
title: "Downloadable Packages:",
116+
subtext: "By downloading any of these files, you agree to the terms of this license:",
117+
licenseButtonText: "ASWF Asset License",
118+
# This header is only if the table needs a header < Please see Intel page for example of that >
119+
downloadTableHeader: "",
120+
# The download links and button setup for the download table.
121+
downloads: [{
122+
tableHeader: '"Warped : Cybercity"',
123+
downloadsList: [{
124+
buttons: [{
125+
text: "DOWNLOAD - COMING SOON",
126+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
127+
type: "primary",
128+
}],
129+
size: "XX.X GB",
130+
description: "",
131+
descriptionBold: '"Warped : Cybercity" short film',
132+
extraDescription: "Add technical information here",
133+
},
134+
{
135+
buttons: [{
136+
text: "DOWNLOAD - COMING SOON",
137+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
138+
type: "primary",
139+
}],
140+
size: "XX.X GB",
141+
description: "",
142+
descriptionBold: '"Warped : Cybercity" behind the scene',
143+
extraDescription: "Add technical information here",
144+
}
145+
]
146+
},
147+
{
148+
tableHeader: 'StEM3 Assets : 3D Scenes',
149+
downloadsList: [{
150+
buttons: [{
151+
text: "DOWNLOAD - COMING SOON",
152+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
153+
type: "primary",
154+
}],
155+
size: "XX.X GB",
156+
description: "",
157+
descriptionBold: "StEM3 Cybercity",
158+
extraDescription: "Add technical information here",
159+
},
160+
{
161+
buttons: [{
162+
text: "DOWNLOAD - COMING SOON",
163+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
164+
type: "primary",
165+
}],
166+
size: "XX.X GB",
167+
description: "",
168+
descriptionBold: "StEM3 Forest",
169+
extraDescription: "Add technical information here",
170+
},
171+
{
172+
buttons: [{
173+
text: "DOWNLOAD - COMING SOON",
174+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
175+
type: "primary",
176+
}],
177+
size: "XX.X GB",
178+
description: "",
179+
descriptionBold: "StEM3 Base Camp",
180+
extraDescription: "Add technical information here",
181+
},
182+
{
183+
buttons: [{
184+
text: "DOWNLOAD - COMING SOON",
185+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
186+
type: "primary",
187+
}],
188+
size: "XX.X GB",
189+
description: "",
190+
descriptionBold: "StEM3 Subway Station",
191+
extraDescription: "Add technical information here",
192+
},
193+
{
194+
buttons: [{
195+
text: "DOWNLOAD - COMING SOON",
196+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
197+
type: "primary",
198+
}],
199+
size: "XX.X GB",
200+
description: "",
201+
descriptionBold: "StEM3 Back Alley",
202+
extraDescription: "Add technical information here",
203+
},
204+
{
205+
buttons: [{
206+
text: "DOWNLOAD - COMING SOON",
207+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
208+
type: "primary",
209+
}],
210+
size: "XX.X GB",
211+
description: "",
212+
descriptionBold: "StEM3 Saloon",
213+
extraDescription: "Add technical information here",
214+
}
215+
]
216+
},
217+
{
218+
tableHeader: 'StEM3 Assets : 2D Plates',
219+
downloadsList: [
220+
{
221+
buttons: [{
222+
text: "DOWNLOAD - COMING SOON",
223+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
224+
type: "primary",
225+
}],
226+
size: "XX.X GB",
227+
description: "",
228+
descriptionBold: "StEM3 Los Angeles Driving plate",
229+
extraDescription: "Add technical information here",
230+
},
231+
{
232+
buttons: [{
233+
text: "DOWNLOAD - COMING SOON",
234+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
235+
type: "primary",
236+
}],
237+
size: "XX.X GB",
238+
description: "",
239+
descriptionBold: "StEM3 Soda cans plates",
240+
extraDescription: "Add technical information here",
241+
},
242+
{
243+
buttons: [{
244+
text: "DOWNLOAD - COMING SOON",
245+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
246+
type: "primary",
247+
}],
248+
size: "XX.X GB",
249+
description: "",
250+
descriptionBold: "StEM3 Lightning plate",
251+
extraDescription: "Add technical information here",
252+
},
253+
{
254+
buttons: [{
255+
text: "DOWNLOAD - COMING SOON",
256+
url: "https://dpel-assets.aswf.io/asc-stem3/coming-soon",
257+
type: "primary",
258+
}],
259+
size: "XX.X GB",
260+
description: "",
261+
descriptionBold: "StEM3 Charts",
262+
extraDescription: "Add technical information here",
263+
},
264+
]
265+
}
266+
]
267+
}
268+
269+
hideButtons: true
270+
licenseContent: [
271+
"ASWF Digital Assets License v1.1",
272+
"StEM3 -- Copyright 2026 -- American Society of Cinematographers -- All rights reserved.",
273+
"Redistribution and use of these digital assets, with or without modification, solely for education, training, research, software and hardware development, performance benchmarking (including publication of benchmark results and permitting reproducibility of the benchmark results by third parties), or software and hardware product demonstrations, are permitted provided that the following conditions are met:"
274+
]
275+
276+
licenseConditions: [
277+
"Redistributions of these digital assets or any part of them must include the above copyright notice, this list of conditions and the disclaimer below, and if applicable, a description of how the redistributed versions of the digital assets differ from the originals.",
278+
"Publications showing images derived from these digital assets must include the above copyright notice.",
279+
"The names of copyright holder or the names of its contributors may NOT be used to promote or to imply endorsement, sponsorship, or affiliation with products developed or tested utilizing these digital assets or benchmarking results obtained from these digital assets, without prior written permission from copyright holder.",
280+
"The assets and their output may only be referred to as the Asset Name listed above, and your use of the Asset Name shall be solely to identify the digital assets. Other than as expressly permitted by this License, you may NOT use any trade names, trademarks, service marks, or product names of the copyright holder for any purpose."
281+
]
282+
283+
licenseDisclaimer: 'DISCLAIMER: THESE DIGITAL ASSETS ARE PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, ARE DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THESE DIGITAL ASSETS, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.'
284+
---

0 commit comments

Comments
 (0)