Generate an image with "in-image-padding" for facebook og:image images

Question

We are in the last steps to go productive with a Gatsby 2.32.13 (on Netlify) site:

  System:
    OS: macOS 11.5.1
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 7.17.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2
    Safari: 14.1.2
  npmPackages:
    gatsby: ^2.32.13 => 2.32.13
    gatsby-background-image: ^1.5.3 => 1.5.3
    gatsby-image: ^3.5.0 => 3.7.1
    gatsby-plugin-feed: ^2.10.0 => 2.13.1
    gatsby-plugin-fontawesome-css: 1.0.0 => 1.0.0
    gatsby-plugin-google-gtag: ^2.9.0-next.0 => 2.9.0-next.0
    gatsby-plugin-manifest: ^2.9.1 => 2.12.1
    gatsby-plugin-mdx: ^1.7.1 => 1.10.1
    gatsby-plugin-offline: ^3.7.1 => 3.10.2
    gatsby-plugin-preload-fonts: 1.9.1 => 1.9.1
    gatsby-plugin-react-helmet: ^3.7.0 => 3.10.0
    gatsby-plugin-root-import: ^2.0.5 => 2.0.6
    gatsby-plugin-sass: ^2.8.0 => 2.8.0
    gatsby-plugin-sharp: ^2.14.4 => 2.14.4
    gatsby-plugin-sitemap: ^2.12.0 => 2.12.0
    gatsby-plugin-typography: ^2.9.0 => 2.12.0
    gatsby-remark-autolink-headers: ^2.8.0 => 2.11.0
    gatsby-remark-copy-linked-files: ^2.7.0 => 2.10.0
    gatsby-remark-images: ^3.8.1 => 3.11.1
    gatsby-remark-normalize-paths: ^1.1.0 => 1.1.0
    gatsby-remark-prismjs: ^3.10.0 => 3.13.0
    gatsby-remark-responsive-iframe: ^2.8.0 => 2.11.0
    gatsby-remark-smartypants: ^2.7.0 => 2.10.0
    gatsby-source-filesystem: ^2.8.1 => 2.11.1
    gatsby-transformer-json: ^2.8.0 => 2.11.0
    gatsby-transformer-sharp: ^2.9.0 => 2.12.1
    gatsby-transformer-yaml: ^2.8.0 => 2.11.0
  npmGlobalPackages:
    gatsby-cli: 3.11.0

Edit: shorter version of my question? Possibly, Sharps extend is a solution. (How) Does gatsby-plugin-sharp support Sharps extend parameter?

We have some hundred brand images (logotypes) and we should use them for og:image images. These are the recommended dimensions: 1200 pixels x 627 pixels. Successfully, we generate the images like this:

childImageSharp {
  fixed(quality: 100, width: 1200, height: 627, fit: CONTAIN) {
    ...GatsbyImageSharpFixed
  }
}

But they are ugly due to missing paddings. So, we should produce a 1200x627 white empty image and center a smaller logotype image inside. The smaller logotype is no problem. For example:

childImageSharp {
  fixed(quality: 100, width: 600, height: 313, fit: CONTAIN) {
    ...GatsbyImageSharpFixed
  }
}

But how to transform this smaller image with equal padding around to an 1200x627 image?

Is this possible with Gatsbys sharp support?

If it helps. Our development version is online https://sx.surface-world.de/ and shows some logotypes.

Thanks for spending your time!

Generate an image with "in-image-padding" for facebook og:image images

0 Answers0