misc: image sizes for other images

aaronczichon · Mar 11, 2024 · dc67f2a · dc67f2a
1 parent 2ea8a00
commit dc67f2a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/web-canada/src/components/Hero.astro b/web-canada/src/components/Hero.astro
@@ -8,6 +8,8 @@ const { url, alt, image } = Astro.props;
     <Image
       src={image}
       alt={alt}
+ 			widths={[240, 540, 720, image.width]}
+      sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${image.width}px`}
       style="height: 100%; width: 100%; object-fit: cover;"
     />
     :

diff --git a/web-canada/src/pages/index.astro b/web-canada/src/pages/index.astro
@@ -33,6 +33,8 @@ import image from '../resources/hero.jpeg';
       {allPosts.map((post) => 
         <a href={'/blog/' + post.slug} class="entry">
 					{post.data.image ? <Image
+ 					widths={[240, 540, 720, post.data.image.url.width]}
+          sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${post.data.image.url.width}px`}
           src={post.data.image.url}
           alt={post.data.image.alt}
           style="max-height: 400px; width: 100%; object-fit: cover;" /> : null }