mirror of
https://github.com/SkyfallWasTaken/skyfalldev.git
synced 2024-12-04 22:57:32 +00:00
Image to Picture tag
This commit is contained in:
parent
3102851edf
commit
13f693e918
2 changed files with 5 additions and 4 deletions
|
@ -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,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=""
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue