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

Jump to bottom

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 all commits
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
35 changes: 17 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 @@ -31,7 +31,7 @@ const metadataCache = new Map<string, IImageMetadata>()
export async function getImageMetadata(
file: FileNode,
getDominantColor?: boolean
): Promise<IImageMetadata | undefined> {
): Promise<IImageMetadata> {
if (!getDominantColor) {
// If we don't need the dominant color we can use the cheaper size function
const { width, height, type } = await getImageSizeAsync(file)
Expand All @@ -57,6 +57,7 @@ export async function getImageMetadata(
metadataCache.set(file.internal.contentDigest, metadata)
} catch (err) {
reportError(`Failed to process image ${file.absolutePath}`, err)
return {}
}

return metadata
Expand Down Expand Up @@ -97,6 +98,7 @@ export async function generateImageData({
tracedSVGOptions = {},
transformOptions = {},
quality,
backgroundColor,
} = args

args.formats = args.formats || [`auto`, `webp`]
Expand All @@ -118,7 +120,7 @@ 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
}

Expand Down Expand Up @@ -187,15 +189,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 +243,7 @@ export async function generateImageData({
const imageProps: IGatsbyImageData = {
layout,
placeholder: undefined,
backgroundColor,
images: {
fallback: {
src: primaryImage.src,
Expand All @@ -251,10 +258,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,10 +287,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.webpOptions,
width,
height: Math.round(width / imageSizes.aspectRatio),
Expand Down Expand Up @@ -317,10 +318,8 @@ 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),
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