skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2024-12-04 14:53:39 +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 { ImageMetadata } from "astro";
import { Image } from "astro:assets";
import { Picture } from "astro:assets";
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
@ -53,7 +53,7 @@ if (heroImage) {
<div class="w-[1/4] flex justify-center">
{
heroImagePromise && (
<Image src={heroImagePromise()} loading="eager" alt="" />
<Picture src={heroImagePromise()} formats={['avif', 'webp']} loading="eager" alt="" />
)
}
</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 { getCollection } from "astro:content";
import FormattedDate from "../../components/FormattedDate.astro";
import { Image } from "astro:assets";
import { Picture } from "astro:assets";
const posts = (await getCollection("blog")).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
@ -58,11 +58,12 @@ let imagesLoadedEagerly = 0;
{() => {
if (heroImagePromise) {
return (
<Image
<Picture
width={720}
height={360}
src={heroImagePromise()}
loading={shouldLoadEagerly ? "eager" : "lazy"}
formats={['avif', 'webp']}
class="rounded-md mb-3"
alt=""
/>