mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 19:22:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix photos

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-20 18:08:25 -07:00
parent 296d8c8874
commit 394f6a834b
3 changed files with 17 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/Photo.astro
View file

@ -1,25 +0,0 @@
---
import { Image } from "astro:assets";
interface Props {
photo: any;
width?: number;
height?: number;
class?: string;
}
const { photo, width, height, class: className } = Astro.props;
---
<Image
src={photo}
alt=""
{width}
{height}
densities={[1, 2]}
quality="mid"
class={"object-contain rounded " + (className ?? "")}
decoding="sync"
loading="eager"
transition:name={photo.src}
/>

10
src/pages/photography/[photo].astro
View file

@ -1,5 +1,6 @@
--- ---
import type { GetStaticPaths } from "astro"; import type { GetStaticPaths } from "astro";
import { Image } from "astro:assets";
import { getFileNameFromPath } from "./index.astro"; import { getFileNameFromPath } from "./index.astro";
import RootLayout from "@layouts/RootLayout.astro"; import RootLayout from "@layouts/RootLayout.astro";
import Photo from "@components/Photo.astro"; import Photo from "@components/Photo.astro";
@ -27,6 +28,13 @@ const { photo } = Astro.props;
history.back() history.back()
" "
> >
<Photo photo={photo.default} height={1000} class="w-auto h-full" /> <Image
src={photo.default}
alt=""
height={2000}
quality="high"
class="object-contain rounded w-auto h-full"
transition:name={photo.default.src}
/>
</div> </div>
</RootLayout> </RootLayout>

10
src/pages/photography/index.astro
View file

@ -4,7 +4,6 @@ import ContainerLayout from "@layouts/ContainerLayout.astro";
import BaseLayout from "@layouts/BaseLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro"; import TextContentLayout from "@layouts/TextContentLayout.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import Photo from "@components/Photo.astro";
const photos = await Astro.glob("../../assets/photos/*"); const photos = await Astro.glob("../../assets/photos/*");
@ -48,7 +47,14 @@ export const getFileNameFromPath = (path: string) => {
class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg" class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg"
> >
<div class="bg-gray-200 rounded"> <div class="bg-gray-200 rounded">
<Photo photo={photo.default} width={400} /> <Image
src={photo.default}
alt=""
width={1000}
quality="mid"
class="object-contain rounded"
transition:name={photo.default.src}
/>
</div> </div>
</a> </a>
)) ))