Skip to content

Commit

Permalink
feat(gatsby-plugin-image): Add support for backgroundColor in sharp (#…
Browse files Browse the repository at this point in the history
…29141)

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

* Changes from review
  • Loading branch information
ascorbic authored Jan 22, 2021
1 parent 76be221 commit eb2bede
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 21 deletions.
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-image/src/babel-helpers.ts
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
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
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
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
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: {
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

0 comments on commit eb2bede

Please sign in to comment.