From 13e83df2bd150f75bd5c1d291abda9ba96df41f7 Mon Sep 17 00:00:00 2001
From: Emmanuel Chucks <31349069+emmanuelchucks@users.noreply.github.com>
Date: Mon, 10 Oct 2022 10:17:19 +0000
Subject: [PATCH 1/6] fix: also pass attrs to underlying img
`class` for direct img styling, `width` & `height` to prevent layout shift, etc need to be passed to the underlying img tag to work.
---
packages/integrations/image/components/Picture.astro | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index e86ccc65d4b4..838fd7ec3689 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/packages/integrations/image/components/Picture.astro
@@ -67,7 +67,7 @@ delete image.height;
<picture {...attrs}>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
- <img {...image} {loading} {decoding} {alt} />
+ <img {...image} {loading} {decoding} {alt} {...attrs} />
</picture>
<style>
From e9daca66e374de7e300863815b9a86d0667f5fcc Mon Sep 17 00:00:00 2001
From: Emmanuel Chucks <31349069+emmanuelchucks@users.noreply.github.com>
Date: Sat, 15 Oct 2022 10:29:26 +0000
Subject: [PATCH 2/6] remove redundant attr from picture tag
---
packages/integrations/image/components/Picture.astro | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index 838fd7ec3689..7cd71d6004a5 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/packages/integrations/image/components/Picture.astro
@@ -65,7 +65,7 @@ delete image.width;
delete image.height;
---
-<picture {...attrs}>
+<picture>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} {...attrs} />
</picture>
From 99f94b65f3db1a3af9107bdd0c3cee4237b8eb51 Mon Sep 17 00:00:00 2001
From: Emmanuel Chucks <31349069+emmanuelchucks@users.noreply.github.com>
Date: Sat, 15 Oct 2022 11:17:46 +0000
Subject: [PATCH 3/6] revert to previous commit
- seemed to break some tests
- can't deal with fixing that right now, maybe later
---
packages/integrations/image/components/Picture.astro | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index 7cd71d6004a5..838fd7ec3689 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/packages/integrations/image/components/Picture.astro
@@ -65,7 +65,7 @@ delete image.width;
delete image.height;
---
-<picture>
+<picture {...attrs}>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} {...attrs} />
</picture>
From 76836bc4cd28ff784ae3c6c56c2f735441c1f11f Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 18 Oct 2022 13:38:04 -0500
Subject: [PATCH 4/6] only passing attributes to the img
---
.../image/components/Picture.astro | 2 +-
.../basic-picture/src/pages/index.astro | 2 +-
.../image/test/picture-ssg.test.js | 28 +++++++++++--------
.../image/test/picture-ssr-build.test.js | 12 ++++----
.../image/test/picture-ssr-dev.test.js | 12 ++++----
5 files changed, 30 insertions(+), 26 deletions(-)
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index 838fd7ec3689..7cd71d6004a5 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/packages/integrations/image/components/Picture.astro
@@ -65,7 +65,7 @@ delete image.width;
delete image.height;
---
-<picture {...attrs}>
+<picture>
{sources.map((attrs) => <source {...attrs} {sizes} />)}
<img {...image} {loading} {decoding} {alt} {...attrs} />
</picture>
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
index 7cc20d65f09d..e05f878d4a22 100644
--- a/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
@@ -20,7 +20,7 @@ import { Picture } from '@astrojs/image/components';
<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Inline social image" />
<br />
<Picture id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" background="rgb(51, 51, 51)" formats={['avif', 'jpeg']} />
- <br />
+ <br />
<Picture id="ipsum" src="https://dummyimage.com/200x300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
<br />
<Picture id="query" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?token=abc" sizes="100vw" widths={[544]} aspectRatio={544/184} alt="query" />
diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
index 55134a154ce7..9f0074b17d9c 100644
--- a/packages/integrations/image/test/picture-ssg.test.js
+++ b/packages/integrations/image/test/picture-ssg.test.js
@@ -78,10 +78,11 @@ describe('SSG pictures - dev', function () {
},
].forEach(({ title, id, url, query, alt }) => {
it(title, () => {
- const sources = $(`${id} source`);
- expect(sources.length).to.equal(3);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
- const image = $(`${id} img`);
+ const sources = picture.children('source');
+ expect(sources.length).to.equal(3);
const src = image.attr('src');
const [route, params] = src.split('?');
@@ -158,10 +159,11 @@ describe('SSG pictures with subpath - dev', function () {
},
].forEach(({ title, id, url, query, alt }) => {
it(title, () => {
- const sources = $(`${id} source`);
- expect(sources.length).to.equal(3);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
- const image = $(`${id} img`);
+ const sources = picture.children('source');
+ expect(sources.length).to.equal(3);
const src = image.attr('src');
const [route, params] = src.split('?');
@@ -250,10 +252,11 @@ describe('SSG pictures - build', function () {
},
].forEach(({ title, id, regex, size, alt }) => {
it(title, () => {
- const sources = $(`${id} source`);
- expect(sources.length).to.equal(3);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
- const image = $(`${id} img`);
+ const sources = picture.children('source');
+ expect(sources.length).to.equal(3);
expect(image.attr('src')).to.match(regex);
expect(image.attr('alt')).to.equal(alt);
@@ -349,10 +352,11 @@ describe('SSG pictures with subpath - build', function () {
},
].forEach(({ title, id, regex, size, alt }) => {
it(title, () => {
- const sources = $(`${id} source`);
- expect(sources.length).to.equal(3);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
- const image = $(`${id} img`);
+ const sources = picture.children('source');
+ expect(sources.length).to.equal(3);
expect(image.attr('src')).to.match(regex);
expect(image.attr('alt')).to.equal(alt);
diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js
index b765852402e3..aa3bdfc3ea91 100644
--- a/packages/integrations/image/test/picture-ssr-build.test.js
+++ b/packages/integrations/image/test/picture-ssr-build.test.js
@@ -89,12 +89,12 @@ describe('SSR pictures - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
- const sources = $(`${id} source`);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
+ const sources = picture.children('source');
expect(sources.length).to.equal(3);
- const image = $(`${id} img`);
-
const src = image.attr('src');
const [route, params] = src.split('?');
@@ -200,12 +200,12 @@ describe('SSR pictures with subpath - build', function () {
const html = await response.text();
const $ = cheerio.load(html);
- const sources = $(`${id} source`);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
+ const sources = picture.children('source');
expect(sources.length).to.equal(3);
- const image = $(`${id} img`);
-
const src = image.attr('src');
const [route, params] = src.split('?');
diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js
index 10d8f65cdf5b..b21ee202a1eb 100644
--- a/packages/integrations/image/test/picture-ssr-dev.test.js
+++ b/packages/integrations/image/test/picture-ssr-dev.test.js
@@ -104,12 +104,12 @@ describe('SSR pictures - dev', function () {
},
].forEach(({ title, id, url, query, alt, contentType }) => {
it(title, async () => {
- const sources = $(`${id} source`);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
+ const sources = picture.children('source');
expect(sources.length).to.equal(3);
- const image = $(`${id} img`);
-
const src = image.attr('src');
const [route, params] = src.split('?');
@@ -220,12 +220,12 @@ describe('SSR pictures with subpath - dev', function () {
},
].forEach(({ title, id, url, query, alt, contentType }) => {
it(title, async () => {
- const sources = $(`${id} source`);
+ const image = $(`${id}`);
+ const picture = image.closest('picture');
+ const sources = picture.children('source');
expect(sources.length).to.equal(3);
- const image = $(`${id} img`);
-
const src = image.attr('src');
const [route, params] = src.split('?');
From 586dcc7acb540ae399b76414e8778970d606ba2f Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 18 Oct 2022 13:58:48 -0500
Subject: [PATCH 5/6] adding a note to the README
---
packages/integrations/image/README.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
index e573311248e2..70c6bbcd08de 100644
--- a/packages/integrations/image/README.md
+++ b/packages/integrations/image/README.md
@@ -260,6 +260,10 @@ Position of the crop when fit is `cover` or `contain`.
### `<Picture />`
+The built-in `<Picture />` component is used to create an optimized `<picture />` for both remote images hosted on other domains as well as local images imported from your project's `src` directory.
+
+In addition to the component-specific properties, any valid HTML attribute for the `<img />` included in the `<Picture />` component will be included in the built `<img />`.
+
#### src
<p>
From f730b48ea578932dfab611db58211992c32dc727 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 18 Oct 2022 14:06:04 -0500
Subject: [PATCH 6/6] chore: add changeset
---
.changeset/wicked-laws-heal.md | 11 +++++++++++
1 file changed, 11 insertions(+)
create mode 100644 .changeset/wicked-laws-heal.md
diff --git a/.changeset/wicked-laws-heal.md b/.changeset/wicked-laws-heal.md
new file mode 100644
index 000000000000..bcaac613266e
--- /dev/null
+++ b/.changeset/wicked-laws-heal.md
@@ -0,0 +1,11 @@
+---
+'@astrojs/image': minor
+---
+
+HTML attributes included on the `<Picture />` component are now passed down to the underlying `<img />` element.
+
+**Why?**
+
+- when styling a `<picture>` the `class` and `style` attributes belong on the `<img>` itself
+- `<picture>` elements [should not](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#attributes) actually provide any `aria-` attributes
+- `width` and `height` can be added to the `<img>` to help prevent layout shift