自动生成的社交媒体图片 | CSS-Tricks

我一直都在思考社交媒体图片再次。你知道，当你在 Twitter、Facebook 或 iMessage 等地方分享链接时，会显示（可能）的图片。你实际上是在浪费钱，因为它们可以让一个带有链接的普通帖子变成一个带有醒目图片的帖子，并且有一个巨大的可点击区域。在网站上的所有图片中，社交媒体图片可能是网站上访问量最大、最令人难忘、网络请求次数最多的图片。

它本质上是这部分 HTML 代码让它们出现

<meta property="og:image" content="/images/social-media-image.jpg" />

但是请务必阅读相关内容，因为还有很多其他 HTML 标签需要设置正确。

我认为我之所以再次思考这个问题，是因为 GitHub 似乎有新的社交媒体卡片。这些是新的，对吧？

这些 GitHub 社交媒体图片显然是通过编程生成的。查看示例 URL。

自动化

虽然我认为你可以从完全手工制作的定制设计社交媒体图片中获得很多好处，但这对于拥有大量页面的网站来说并不实用：博客、电子商务……你懂我的意思。对于这样的网站，诀窍是通过模板以某种方式自动化它们的创建。我在过去提到过其他人的做法，但让我们回顾一下

你知道所有这些有什么共同点吗？ Puppeteer。

Puppeteer 是一种启动和控制 Chrome 无头副本的方法。它有一个非常有用的功能，可以截取浏览器窗口的截图：await page.screenshot({path: 'screenshot.png'});。这就是我们的编码字体网站如何进行截图。截图的想法让人们开始思考。为什么不使用 HTML 和 CSS 设计一个社交媒体模板，然后让 Puppeteer 对其进行截图，并将其用作社交媒体图片呢？

我喜欢这个想法，但这意味着必须访问一个 Node 服务器（Puppeteer 运行在 Node 上），该服务器要么一直运行，要么可以作为无服务器函数访问。因此，难怪这个想法引起了 Jamstack 人群的共鸣，他们已经习惯了执行构建过程和利用无服务器函数等操作。

我认为在 URL 中“托管”无服务器函数，并通过 URL 参数传递要包含在截图中的动态值的想法也很聪明。

SVG 路线

我有点喜欢使用 SVG 作为社交媒体图片模板的想法，部分原因是它具有固定坐标，可以在其中进行设计，这与我对创建社交媒体图片所需精确尺寸的思维模式相匹配。我喜欢 SVG 的可组合性。

George Francis 在博客中写道 “创建您自己的生成式 SVG 社交图片”，这是一个非常棒的例子，所有这些都很好地融合在一起，并带有一丝随机性和奇思妙想。我也喜欢 contenteditable 技巧，这使得它成为一次性截图的实用工具。

我也尝试过动态 SVG 创建：查看我们会议网站上的这个会议页面。

不幸的是，SVG 不是社交媒体图片支持的图片格式。以下是 Twitter 的具体说明

卡片中要使用的图片的 URL。图片大小必须小于 5MB。支持 JPG、PNG、WEBP 和 GIF 格式。仅使用动画 GIF 的第一帧。不支持 SVG。
Twitter 文档

尽管如此，在 SVG 中进行组合/模板化仍然很酷。你可以将其转换为另一种格式以进行最终使用。拥有 SVG 后，将 SVG 转换为 PNG 非常简单。就我而言，我使用了 svg2png 和一个非常小的 Gulp 任务，该任务在构建过程中运行。

WordPress 呢？

我的 WordPress 网站没有构建过程，至少没有每次发布或更新帖子时都会运行的构建过程。但在（我）的认知中，WordPress 最需要动态社交媒体图片。

并不是说我现在没有这些。 Jetpack 在很大程度上使其顺利运行。它将帖子的“特色图片”设为社交媒体图片，允许我预览它，并自动发布到社交网络。这是我制作的一个关于此的视频。这将使我达到一个将特色图片附加并良好显示的位置。

但它不会自动化它们的创建。有时候，单独的定制图形是最好的选择（上面的图形可能就是很好的例子），但可能更常见的情况是，使用一个精心设计的模板卡片是最好的选择。

幸运的是，我从 Daniel Post 那儿了解到 Social Image Generator for WordPress。看起来多漂亮

这正是 WordPress 所需要的！

Daniel 本人帮助我创建了一个专门针对 CSS-Tricks 的自定义模板。我曾梦想着可以从众多模板中进行选择，这些模板包含标题、作者、选定的引用、特色图片和其他内容。到目前为止，我们只确定了两个模板，一个包含标题和作者的模板，另一个包含特色图片、标题和作者的模板。图片是根据这些元数据动态创建的

这不是 Puppeteer。这甚至不是 PhantomJS 支持的 svgtopng。这是 PHP 生成的图片！而且甚至不是 ImageMagick，而是直接使用 GD，这是 PHP 中内置的功能。因此，这些图片不是在任何可能让前端开发人员感到舒适的语法中创建的。你最好使用其中一个模板，但如果你想了解我的自定义模板是如何编码的（由 Daniel 编码），请告诉我，我会将代码发布到公共位置。

结果很不错，对吧？

我知道为什么必须以这种方式构建：它使用的是在 WordPress 可以运行的任何地方都能运行的技术。这非常符合 WordPress 的精神。但这确实让我想，如果模板的创建方式更现代化就好了。就像，如果你的社交媒体图片的模板就像主题根目录下的 social-image.php 一样，就像其他任何模板文件一样，那不是很好吗？然后，你使用所有正常的 WordPress API 对这个页面进行模板化和设计？就像一个 ACF 块吗？然后它被截取并使用？我来帮你回答：是的，这会很酷。

Arley McBlain

# 2021年5月14日

打开文章，阅读第一段，然后键入 ⌘+f 搜索“wordpress”

但是如果你想了解我的自定义模板是如何编码的（由 Daniel 编码），请告诉我，我会将代码发布到公共位置。

请务必！

Chris Coyier

# 2021年5月14日

当然，这对于我想要的这些卡片的设计来说非常具体，但它让你对 GD 提供的设计环境有了一些了解。

add_filter( 'sig_generated_image', function ( $image, $generator, $post_id ) {
    $author_id     = get_post_field( 'post_author', $post_id );
    $avatar        = get_avatar_url( $author_id );
    $author        = get_the_author_meta( 'display_name', $author_id );
    $bg            = plugin_dir_path( __FILE__ ) . '/images/background.png';
    $bg_with_image = plugin_dir_path( __FILE__ ) . '/images/background_with_image.png';
    $title_font    = plugin_dir_path( __FILE__ ) . '/fonts/GothamCondensed-Bold.ttf';
    $avatar_font   = plugin_dir_path( __FILE__ ) . '/fonts/Sentinel-Bold.ttf';
    $has_image     = has_post_thumbnail( $post_id );

    // Avatar
    $generator->image( [
        'image'  => $avatar,
        'width'  => $has_image ? 60 : 100,
        'height' => $has_image ? 60 : 100,
        'x'      => $has_image ? 31 : 80,
        'y'      => $has_image ? 556 : 380,
    ] );

    // Featured image
    if ( $has_image ) {
        $generator->image( [
            'height' => 630 - 88,
            'width'  => 600,
            'x'      => -50,
        ] );
    }

    // Background
    $generator->image( [
        'image'  => $has_image ? $bg_with_image : $bg,
        'width'  => 1200,
        'height' => 630,
    ] );

    // Title
    $text_args = [
        'text'        => strtoupper( $generator->text ),
        'color'       => '#fff',
        'size'        => 94,
        'line_height' => 0.9,
        'max_width'   => $has_image ? 590 : 750,
        'max_height'  => $has_image ? 350 : 280,
        'x'           => $has_image ? 560 : 80,
        'y'           => $has_image ? 271 : 80,
        'valign'      => $has_image ? 'center' : 'top',
    ];
    $generator->use_font( $title_font );
    $generator->text( array_merge( $text_args, [
        'x'     => $text_args['x'] + 5,
        'y'     => $text_args['y'] + 5,
        'color' => 'rgba(0, 0, 0, 0.3)',
    ] ) );
    $generator->text( $text_args );

    // Author
    $author_text_args = [
        'text'        => $author,
        'color'       => '#fff',
        'size'        => 28,
        'line_height' => 1,
        'x'           => $has_image ? 120 : 210,
        'y'           => $has_image ? 575 : 415,
    ];
    $generator->use_font( $avatar_font );
    $generator->text( array_merge( $author_text_args, [
        'x'     => $author_text_args['x'] + 2,
        'y'     => $author_text_args['y'] + 2,
        'color' => 'rgba(0, 0, 0, 0.1)',
    ] ) );
    $generator->text( $author_text_args );

    return $generator->image;
}, 10, 3 );

Daniel Post

评论永久链接# 2021年5月16日

如果你需要帮助来编码自定义模板，我总是很乐意提供帮助，尤其是考虑到我还没有在任何地方记录过这个过程。

Burni

# 2021年5月14日

是的！！代码！

谢谢

Trevor

# 2021年5月14日

那些已经在 Node 中构建时生成 SVG 的人：使用 Sharp。我在构建我的实现时遇到了一些障碍，但除此之外，一切都很顺利。 https://github.com/eyelidlessness/eyelidlessness.github.io/blob/main/src/lib/art/raster.ts

我 lib 目录下的任何内容都可以随意使用，当我带宽充足时，我会将它们开源，尽情使用吧！

Dustin

# 2021 年 5 月 14 日

大约 15-20 年前，我使用大约 100 行 Python 代码为论坛生成签名图像，这些图像显示了我们 IRC 频道中的最新文本，据我回忆。

现在，我们使用数百万行代码启动无头浏览器。

我不知道该作何感想。

Joz

# 2021 年 5 月 15 日

我认为你可能会从这个网站中获得很多价值，它可以让你从模板生成社交媒体帖子。然后，你可以生成 HTML 元标签来引用其中的图像……所有这些都在你最喜欢的框架中。

https://make.cm/

sgolubev

# 2021 年 5 月 15 日

非常感谢你，Chris！

我最近遇到了一个方便的 API 服务，它可以获取链接预览——embed.ly。

Birgit Pauli-Haack

# 2021 年 5 月 15 日

感谢你分享模板代码！

这已经非常酷了。

我可以看到未来通过 WordPress 模板编辑器使用块构建的自定义模板。

Kumar Abhishek

# 2021 年 5 月 16 日

感谢你分享所有这些有趣的方法！我真的很喜欢 css-trick 的社交媒体图像。

我为 11ty 写了一个插件，它使用 SVG 生成社交媒体图像。

https://github.com/manustays/eleventy-plugin-generate-social-images

Patricio Lopez

# 2021 年 5 月 17 日

有一些服务，例如 https://flayyer.io，你可以在其中使用 React 和 Vue 创建图像。

Chris

# 2021 年 5 月 17 日

“没有它们，你实际上是在亏钱，因为它们将一个带有小链接的普通帖子变成了一个带有巨大的引人注目的图像和一个巨大的可点击区域的帖子。”

同意，Chris。我亲身经历了这些缩略图对流量的影响有多大。所以我现在正在开发 https://thumbnail.ai 来让这个过程只需要 5 秒。

Zach

# 2021 年 5 月 18 日

如果你使用的是 Node.js 后端或 lamda 函数，你可以使用 node-canvas (https://github.com/Automattic/node-canvas) 创建 PNG 数据！

Chris Coyier

# 2021 年 5 月 27 日

https://www.simeongriggs.dev/dynamic-social-share-images-with-gatsby-and-tailwind-css/

Chris Coyier

# 2021 年 5 月 27 日

https://www.leereamsnyder.com/blog/dynamic-social-media-images-with-puppeteer-and-netlify

Oskar Ahlroth

# 2021 年 6 月 2 日

我也正在开发一个 API 来实现这一点（如果你想试用，可以享受大量的免费套餐）。

https://www.glitterly.app/

Ryan Distartin

# 2021 年 9 月 26 日

很棒的教程，我正在构建一个 Web 应用程序，它可以自动创建这种横幅，无需代码，只需使用 URL 即可。
https://duply.co

Vladimir

# 2022 年 1 月 8 日

感谢你的文章。
我已经构建了类似的图像生成服务。如果你有兴趣，可以查看一下。
https://supportivekoala.com/

Virgile Donadieu

# 2022 年 1 月 17 日

嗨！很棒的文章，我发现它非常深入和详细。

由于你更喜欢“SVG 构建”，我想分享这个网站：https://www.abyssale.com/

他们正在构建一个 SaaS，通过在 SVG 中构建然后根据模板中是否存在透明度以 .jpeg 或 .png 的格式提供服务来自动化视觉创建。

你还可以使用动态图像在 WordPress 中动态生成图像，方法是使用 URL 参数。

希望你发现它有用：）

Philips Reyes

# 2022 年 11 月 18 日

如果你想试用，我还在开发一个 API，它提供了开放图形生成器，并提供大量的免费套餐。

自动化

SVG 路线

WordPress 呢？

评论

发表评论 取消回复

发表评论取消回复