Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(gatsby-plugin-image): Add support for backgroundColor in sharp #29141

Merged
merged 2 commits into from
Jan 22, 2021
Merged

feat(gatsby-plugin-image): Add support for backgroundColor in sharp #29141

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b2cf2f
feat(gatsby-plugin-image): Add support for backgroundColor in sharp
ascorbic Jan 22, 2021
cc3edd2
Changes from review
ascorbic Jan 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-image/src/babel-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const SHARP_ATTRIBUTES = new Set([
`placeholder`,
`tracedSVGOptions`,
`sizes`,
`background`,
`backgroundColor`,
])

export function normalizeProps(
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby-plugin-image/src/image-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface ISharpGatsbyImageArgs {
avifOptions?: Record<string, unknown>
blurredOptions?: { width?: number; toFormat?: ImageFormat }
breakpoints?: Array<number>
backgroundColor?: string
}

export interface IImageSizeArgs {
Expand Down
36 changes: 18 additions & 18 deletions packages/gatsby-plugin-sharp/src/image-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export async function generateImageData({
tracedSVGOptions = {},
transformOptions = {},
quality,
backgroundColor,
} = args

args.formats = args.formats || [`auto`, `webp`]
Expand All @@ -118,11 +119,11 @@ export async function generateImageData({
reporter.warn(
`Specifying fullWidth images will ignore the width and height arguments, you may want a constrained image instead. Otherwise, use the breakpoints argument.`
)
args.width = metadata.width
args.width = metadata?.width
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a scenario where metadata will be undefined entirely? It looks like in the worst case it's an empty object.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If sharp throws an error getting metadata it would be undefined

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll change it so it's an empty object though

args.height = undefined
}

if (!args.width && !args.height && metadata.width) {
if (!args.width && !args.height && metadata?.width) {
args.width = metadata.width
}

Expand Down Expand Up @@ -187,15 +188,19 @@ export async function generateImageData({
reporter,
})

const sharedOptions = {
quality,
...transformOptions,
fit,
cropFocus,
background: backgroundColor,
}

const transforms = imageSizes.sizes.map(outputWidth => {
const width = Math.round(outputWidth)
const transform = createTransformObject({
quality,
...transformOptions,
fit,
cropFocus,
...sharedOptions,
...options,
tracedSVGOptions,
width,
height: Math.round(width / imageSizes.aspectRatio),
toFormat: primaryFormat,
Expand Down Expand Up @@ -237,6 +242,7 @@ export async function generateImageData({
const imageProps: IGatsbyImageData = {
layout,
placeholder: undefined,
backgroundColor,
images: {
fallback: {
src: primaryImage.src,
Expand All @@ -251,10 +257,7 @@ export async function generateImageData({
const transforms = imageSizes.sizes.map(outputWidth => {
const width = Math.round(outputWidth)
const transform = createTransformObject({
quality,
...transformOptions,
fit,
cropFocus,
...sharedOptions,
...args.avifOptions,
width,
height: Math.round(width / imageSizes.aspectRatio),
Expand Down Expand Up @@ -283,14 +286,12 @@ export async function generateImageData({
const transforms = imageSizes.sizes.map(outputWidth => {
const width = Math.round(outputWidth)
const transform = createTransformObject({
quality,
...transformOptions,
fit,
cropFocus,
...sharedOptions,
...args.webpOptions,
width,
height: Math.round(width / imageSizes.aspectRatio),
toFormat: `webp`,
background: backgroundColor,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we passing this if we already have sharedOptions? That seems redundant.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops. Left that in after I refactored the others into sharedOptions

})
if (pathPrefix) {
transform.pathPrefix = pathPrefix
Expand All @@ -317,13 +318,12 @@ export async function generateImageData({
const { src: fallback } = await base64({
file,
args: {
...sharedOptions,
...options,
...transformOptions,
fit,
cropFocus,
toFormatBase64: args.blurredOptions?.toFormat,
width: placeholderWidth,
height: Math.round(placeholderWidth / imageSizes.aspectRatio),
background: backgroundColor,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above. sharedOptions is already passed.

},
reporter,
})
Expand Down
3 changes: 1 addition & 2 deletions packages/gatsby-transformer-sharp/src/customize-schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,9 +504,8 @@ const imageNodeType = ({
type: TransformOptionsType,
description: `Options to pass to sharp to control cropping and other image manipulations.`,
},
background: {
backgroundColor: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we have any other doc where this needs to be changed? I don't think so, but wanted to mention.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I don't think we mention it

type: GraphQLString,
defaultValue: `rgba(0,0,0,0)`,
description: `Background color applied to the wrapper. Also passed to sharp to use as a background when "letterboxing" an image to another aspect ratio.`,
},
},
Expand Down