troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: include videos in masonry style gallery
All checks were successful
Docker / build-and-push-image (push) Successful in 2m26s
Details

Browse source
This commit is contained in:
Troy 2025-08-15 15:54:38 +01:00
parent 5a4bbae7fa
commit 77bb9580ca
Signed by: troy
GPG key ID: DFC06C02ED3B4711
5 changed files with 254 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/components/Gallery.astro
View file

@ -2,9 +2,12 @@
import { Image } from "astro:assets";
import type { ImageMetadata } from "astro";
type ContentSource = ImageMetadata | string;
interface Item {
src: ImageMetadata;
src: ContentSource;
alt: string;
type?: "image" | "video";
}
interface Props {
@ -12,21 +15,75 @@ interface Props {
}
const { items } = Astro.props as Props;
const group1: Item[] = [];
const group2: Item[] = [];
items.forEach((item: Item, index: number) => {
if (index % 2 === 0) {
group1.push(item);
} else {
group2.push(item);
}
});
---
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
{
items.map((item: Item) => (
<div class="aspect-square flex-col overflow-hidden rounded-sm">
{item.src && (
<Image
src={item.src}
alt={item.alt}
loading="lazy"
class="mt-0 mb-0 aspect-square h-full w-full object-cover"
/>
)}
</div>
))
}
<div class="grid grid-cols-2 gap-3">
<div class="flex flex-col gap-3">
{
group1.map((item: Item) => (
<div class="flex-col overflow-hidden rounded-sm">
{item.src && item.type === "video" ? (
<video
src={item.src as string}
class="mt-0 mb-0 h-full w-full object-cover"
muted
autoplay
loop
preload="metadata"
aria-label={item.alt}
>
Your browser does not support the video tag.
</video>
) : (
<Image
src={item.src as ImageMetadata}
alt={item.alt}
loading="lazy"
class="mt-0 mb-0 h-full w-full object-cover"
/>
)}
</div>
))
}
</div>
<div class="flex flex-col gap-3">
{
group2.map((item: Item) => (
<div class="flex-col overflow-hidden rounded-sm">
{item.src && item.type === "video" ? (
<video
src={item.src as string}
class="mt-0 mb-0 h-full w-full object-cover"
muted
autoplay
loop
preload="metadata"
aria-label={item.alt}
>
Your browser does not support the video tag.
</video>
) : (
<Image
src={item.src as ImageMetadata}
alt={item.alt}
loading="lazy"
class="mt-0 mb-0 h-full w-full object-cover"
/>
)}
</div>
))
}
</div>
</div>

47
src/content/projects/archive/index.mdx
View file

@ -29,45 +29,6 @@ import video2023_02_08 from "./2023-02-08.webm";
import video2023_01_08 from "./2023-01-08.webm";
import video2023_07_19 from "./2023-07-19.webm";
<div class="mb-3 grid grid-cols-1 gap-3 md:grid-cols-2">
<video
preload="metadata"
autoplay
muted
loop
class="mt-0 mb-0 aspect-square h-full max-h-[90svh] w-full object-cover"
>
<source src={video2023_04_08} type="video/webm" />
</video>
<video
preload="metadata"
autoplay
muted
loop
class="mt-0 mb-0 aspect-square h-full max-h-[90svh] w-full object-cover"
>
<source src={video2023_02_08} type="video/webm" />
</video>
<video
preload="metadata"
autoplay
muted
loop
class="mt-0 mb-0 aspect-square h-full max-h-[90svh] w-full object-cover"
>
<source src={video2023_01_08} type="video/webm" />
</video>
<video
preload="metadata"
autoplay
muted
loop
class="mt-0 mb-0 aspect-square h-full max-h-[90svh] w-full object-cover"
>
<source src={video2023_07_19} type="video/webm" />
</video>
</div>
import image2024_04_01 from "./2024-04-01.jpg";
import image2022_01_27 from "./2022-01-27.jpg";
import image2023_11_23 from "./2023-11-23.jpg";
@ -91,6 +52,11 @@ import imagelovesongs from "./lovesongs-2-2153-P.jpg";
<Gallery
items={[
{ src: video2023_04_08, alt: "Cinematic Lighting in Blender course result", type: "video" },
{ src: video2023_02_08, alt: "Houdini pillows", type: "video" },
{ src: video2023_01_08, alt: "Houdini particles", type: "video" },
{ src: video2023_07_19, alt: "Car passing light concept", type: "video" },
{ src: image2024_04_01, alt: "224 Torquay Road" },
{ src: image2022_01_27, alt: "Studying Spider" },
{ src: image2023_11_23, alt: "Ugolino and His Sons lighting" },
@ -111,5 +77,6 @@ import imagelovesongs from "./lovesongs-2-2153-P.jpg";
{ src: imagelovesongs, alt: "Love Songs record cover" },
{ src: image2023_044_18, alt: "Abstract swirl" },
{ src: imageedit, alt: "Little Nightmares" },
]}
]}
/>

29
src/content/projects/university-dissertation/index.mdx
View file

@ -9,13 +9,6 @@ featured: true
rank: 6
---
import Gallery from "@components/Gallery.astro";
import tomb from "./tomb.jpg";
import tomb_remake from "./15.jpg";
import mango from "./ExportRender.jpg";
import mango_remake from "./7.jpg";
Tomb was originally posted on 14 Jul 2021, with Terry's Mango Juice on 10 Sept 2021. These pieces were chosen due to their differences from one another in terms of subject matter and goals.
Tomb was created as one of my first experiments utilising Blender's EEVEE real-time rendering engine on an environment. Whereas Terry's Mango Juice was made more to expand my work out into something other than environmental art.
@ -24,18 +17,16 @@ _More information regarding the thought process, research, and dissertation done
## Tomb
<Gallery
items={[
{ src: tomb, alt: "Tomb" },
{ src: tomb_remake, alt: "Tomb remake" },
]}
/>
![Tomb remake](15.jpg)
_Remade piece_
![Tomb](tomb.jpg)
_Original work_
## Terry's Mango Juice
<Gallery
items={[
{ src: mango, alt: "Terry's Mango Juice" },
{ src: mango_remake, alt: "Terry's Mango Juice remake" },
]}
/>
![Terry's Mango Juice remake](7.jpg)
_Remade piece_
![Terry's Mango Juice](ExportRender.jpg)
_Original work_