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

Load low-res thumbnails

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-18 18:28:09 -07:00
parent 0bbf92455f
commit 1b81a7bcf4
3 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Photo.astro
View file

@ -3,16 +3,19 @@ import { Image } from "astro:assets";
interface Props { interface Props {
photo: any; photo: any;
width?: number;
height?: number;
class?: string; class?: string;
} }
const { photo, class: className } = Astro.props; const { photo, width, height, class: className } = Astro.props;
--- ---
<Image <Image
src={photo} src={photo}
alt="" alt=""
height={1000} {width}
{height}
densities={[1, 2]} densities={[1, 2]}
quality="mid" quality="mid"
class={"object-contain rounded " + (className ?? "")} class={"object-contain rounded " + (className ?? "")}

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

@ -27,6 +27,6 @@ const { photo } = Astro.props;
history.back() history.back()
" "
> >
<Photo photo={photo.default} class="w-auto" /> <Photo photo={photo.default} height={1000} class="w-auto h-full" />
</div> </div>
</RootLayout> </RootLayout>

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

@ -48,7 +48,7 @@ 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} /> <Photo photo={photo.default} width={400} />
</div> </div>
</a> </a>
)) ))