skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2024-11-10 04:09:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Image to Picture tag

Browse source
This commit is contained in:
SkyfallWasTaken 2024-07-14 19:45:15 +01:00
parent 3102851edf
commit 13f693e918
2 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/layouts/BlogPost.astro
View file

@ -1,7 +1,7 @@
--- ---
import type { CollectionEntry } from "astro:content"; import type { CollectionEntry } from "astro:content";
import type { ImageMetadata } from "astro"; import type { ImageMetadata } from "astro";
import { Image } from "astro:assets"; import { Picture } from "astro:assets";
import BaseHead from "../components/BaseHead.astro"; import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro"; import Header from "../components/Header.astro";
@ -53,7 +53,7 @@ if (heroImage) {
<div class="w-[1/4] flex justify-center"> <div class="w-[1/4] flex justify-center">
{ {
heroImagePromise && ( heroImagePromise && (
<Image src={heroImagePromise()} loading="eager" alt="" /> <Picture src={heroImagePromise()} formats={['avif', 'webp']} loading="eager" alt="" />
) )
} }
</div> </div>

5
src/pages/blog/index.astro
View file

@ -5,7 +5,7 @@ import Footer from "../../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts"; import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import FormattedDate from "../../components/FormattedDate.astro"; import FormattedDate from "../../components/FormattedDate.astro";
import { Image } from "astro:assets"; import { Picture } from "astro:assets";
const posts = (await getCollection("blog")).sort( const posts = (await getCollection("blog")).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
@ -58,11 +58,12 @@ let imagesLoadedEagerly = 0;
{() => { {() => {
if (heroImagePromise) { if (heroImagePromise) {
return ( return (
<Image <Picture
width={720} width={720}
height={360} height={360}
src={heroImagePromise()} src={heroImagePromise()}
loading={shouldLoadEagerly ? "eager" : "lazy"} loading={shouldLoadEagerly ? "eager" : "lazy"}
formats={['avif', 'webp']}
class="rounded-md mb-3" class="rounded-md mb-3"
alt="" alt=""
/> />