时间戳

首页 > 解决方案 > 为 facebook og:image images 生成带有“in-image-padding”的图像

gatsby - 为 facebook og:image images 生成带有“in-image-padding”的图像

问题描述

我们正处于使用 Gatsby 2.32.13（在 Netlify 上）网站的最后一步：

  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

编辑：我的问题的简短版本？可能，Sharpsextend是一个解决方案。（如何）gatsby-plugin-sharp是否支持Sharps 扩展参数？

我们有数百个品牌图像（标识），我们应该将它们用于og:image图像。这些是推荐的尺寸：1200 pixels x 627 pixels。成功地，我们生成这样的图像：

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

但是由于缺少填充，它们很难看。因此，我们应该生成一个1200x627白色的空图像，并在其中居中放置一个较小的标识图像。较小的标识没有问题。例如：

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

但是如何将这个具有相等填充的较小图像转换为1200x627图像呢？

在盖茨比的大力支持下，这可能吗？

如果有帮助。我们的开发版本在线https://sx.surface-world.de/并显示了一些标识。

感谢您花时间！

标签： gatsbysharpgatsby-image

解决方案

推荐阅读