Skip to content

Commit

Permalink
Old pictureClass/pictureStyle props now control the <picture> tag…
Browse files Browse the repository at this point in the history 
… instead of the `<img>` tag. For the `<img>` tag, you can use the new props `imgClass/imgStyle`.
  • Loading branch information
@stefanoverna
stefanoverna committed Jun 23, 2024
1 parent e81afdd commit eeb412e
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 44 deletions.
6 changes: 4 additions & 2 deletions src/components/Image/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,8 +210,10 @@ Here's a complete recap of what `responsiveImage` offers:
| src-set-candidates | Array<number> | :x: | If `data` does not contain `srcSet`, the candidates for the `srcset` attribute of the image will be auto-generated based on these width multipliers | [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] |
| class | string | :x: | Additional CSS className for root node | null |
| style | CSS properties | :x: | Additional CSS rules to add to the root node | null |
| picture-class | string | :x: | Additional CSS class for the image inside the inner `<picture />` tag | null |
| picture-style | CSS properties | :x: | Additional CSS rules to add to the image inside the inner `<picture />` tag | null |
| picture-class | string | :x: | Additional CSS class for the inner `<picture />` tag | null |
| picture-style | CSS properties | :x: | Additional CSS rules to add to the inner `<picture />` tag | null |
| img-class | string | :x: | Additional CSS class for the image inside the `<picture />` tag | null |
| img-style | CSS properties | :x: | Additional CSS rules to add to the image inside the `<picture />` tag | null |
| placeholder-class | string | :x: | Additional CSS class for the placeholder image | null |
| placeholder-style | CSS properties | :x: | Additional CSS rules for the placeholder image | null |

Expand Down
10 changes: 5 additions & 5 deletions src/components/Image/__tests__/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@ exports[`Image visible layout property layout=responsive renders the image 1`] =
`;
exports[`Image visible passing class and/or style renders correctly 1`] = `
<div class="root-class-name" style="overflow: hidden; position: relative; width: 100%; max-width: 750px; border: 1px solid red;"><img class="picture-class-name" style="display: block; width: 100%; border: 1px solid yellow;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4=" aria-hidden="true"><img aria-hidden="true" src="data:image/jpeg;base64,<IMAGEDATA>" class="placeholder-class-name" style="transition: opacity 500ms; opacity: 1; position: absolute; left: -5%; top: -5%; width: 110%; height: auto; max-width: none; max-height: none; border: 1px solid green;">
<picture>
<div class="root-class-name" style="overflow: hidden; position: relative; width: 100%; max-width: 750px; border: 1px solid red;"><img class="img-class-name" style="display: block; width: 100%; border: 1px solid yellow;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4=" aria-hidden="true"><img aria-hidden="true" src="data:image/jpeg;base64,<IMAGEDATA>" class="placeholder-class-name" style="transition: opacity 500ms; opacity: 1; position: absolute; left: -5%; top: -5%; width: 110%; height: auto; max-width: none; max-height: none; border: 1px solid green;">
<picture class="picture-class-name" style="border: 1px solid pink;">
<!---->
<source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" class="picture-class-name" style="opacity: 0; transition: opacity 500ms; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 1px solid yellow;">
<source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w"><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" class="img-class-name" style="opacity: 0; transition: opacity 500ms; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 1px solid yellow;">
</picture><noscript>
<picture>
<source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w" /><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" class="picture-class-name" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 1px solid yellow ; " loading="lazy" />
<picture class="picture-class-name" style="border: 1px solid pink ; ">
<source srcset="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.25 187w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.5 375w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=0.75 562w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750 750w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=1.5 1125w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=2 1500w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=3 2250w,https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750&amp;dpr=4 3000w" /><img src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&amp;fit=crop&amp;w=750" class="img-class-name" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 1px solid yellow ; " loading="lazy" />
</picture>
</noscript>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/components/Image/__tests__/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,9 @@ describe('Image', () => {
class: 'root-class-name',
style: { border: '1px solid red' },
pictureClass: 'picture-class-name',
pictureStyle: { border: '1px solid yellow ' },
pictureStyle: { border: '1px solid pink ' },
imgClass: 'img-class-name',
imgStyle: { border: '1px solid yellow ' },
placeholderClass: 'placeholder-class-name',
placeholderStyle: { border: '1px solid green ' },
},
Expand Down
85 changes: 49 additions & 36 deletions src/components/Image/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,14 @@ export const Image = defineComponent({
type: Object as PropType<ResponsiveImageType>,
required: true,
},
/** Additional CSS class for the image inside the `<picture />` tag */
/** Additional CSS class for the `<picture />` tag */
pictureClass: {
type: String,
},
/** Additional CSS class for the image inside the `<picture />` tag */
imgClass: {
type: String,
},
/** Additional CSS class for the placeholder image */
placeholderClass: {
type: String,
Expand All @@ -116,11 +120,16 @@ export const Image = defineComponent({
type: String,
default: '0px 0px 0px 0px',
},
/** Additional CSS rules to add to the image inside the `<picture />` tag */
/** Additional CSS rules to add to the `<picture />` tag */
pictureStyle: {
type: Object,
default: () => ({}),
},
/** Additional CSS rules to add to the image inside the `<picture />` tag */
imgStyle: {
type: Object,
default: () => ({}),
},
/** Additional CSS rules to add to the placeholder image */
placeholderStyle: {
type: Object,
Expand Down Expand Up @@ -297,8 +306,8 @@ export const Image = defineComponent({
const sizer =
this.layout !== 'fill'
? h(Sizer, {
sizerClass: this.pictureClass,
sizerStyle: this.pictureStyle,
sizerClass: this.imgClass,
sizerStyle: this.imgStyle,
width,
height,
})
Expand All @@ -325,7 +334,7 @@ export const Image = defineComponent({
sizer,
placeholder,
addImage &&
h('picture', null, [
h('picture', { class: this.pictureClass, style: this.pictureStyle }, [
webpSource,
regularSource,
this.data.src &&
Expand All @@ -336,51 +345,55 @@ export const Image = defineComponent({
fetchpriority: this.priority ? 'high' : undefined,
onLoad: this.handleLoad,
ref: 'imageRef',
class: this.pictureClass,
class: this.imgClass,
style: {
opacity: showImage ? 1 : 0,
transition,
...absolutePositioning,
objectFit: this.objectFit,
objectPosition: this.objectPosition,
...this.pictureStyle,
...this.imgStyle,
},
}),
]),
h('noscript', {
innerHTML: tag('picture', {}, [
this.data.webpSrcSet &&
innerHTML: tag(
'picture',
{ class: this.pictureClass, style: toCss(this.pictureStyle) },
[
this.data.webpSrcSet &&
tag('source', {
srcset: this.data.webpSrcSet,
sizes: this.sizes ?? this.data.sizes ?? undefined,
type: 'image/webp',
}),

tag('source', {
srcset: this.data.webpSrcSet,
srcset:
this.data.srcSet ??
buildSrcSet(
this.data.src,
this.data.width,
this.srcSetCandidates as number[],
),
sizes: this.sizes ?? this.data.sizes ?? undefined,
type: 'image/webp',
}),

tag('source', {
srcset:
this.data.srcSet ??
buildSrcSet(
this.data.src,
this.data.width,
this.srcSetCandidates as number[],
),
sizes: this.sizes ?? this.data.sizes ?? undefined,
}),
tag('img', {
src: this.data.src,
alt: this.data.alt,
title: this.data.title,
class: this.pictureClass,
style: toCss({
...absolutePositioning,
objectFit: this.objectFit,
objectPosition: this.objectPosition,
...this.pictureStyle,
tag('img', {
src: this.data.src,
alt: this.data.alt,
title: this.data.title,
class: this.imgClass,
style: toCss({
...absolutePositioning,
objectFit: this.objectFit,
objectPosition: this.objectPosition,
...this.imgStyle,
}),
loading: this.priority ? undefined : 'lazy',
fetchpriority: this.priority ? 'high' : undefined,
}),
loading: this.priority ? undefined : 'lazy',
fetchpriority: this.priority ? 'high' : undefined,
}),
]),
],
),
}),
],
);
Expand Down

0 comments on commit eeb412e

Please sign in to comment.