README

A simple command line tool to generate images suitable for sharing on social media sites.

安装

composer require crazko/post-social-images

使用方法

<?php

use Crazko\PostSocialImage\Image;
use Crazko\PostSocialImage\Position;

$title = 'My amazing post';

$image = new Image(1600, '#1E9682', '/ubuntu.ttf', 80);
$image->text($title, 120, '#E6FAFF'); // First text is always wrapped and centered
$image->text('example.com', 25, '#33F88A', Position::BOTTOM | Position::RIGHT);

// More texts can be placed into image
$image->text('John Doe', 50, '#660012', Position::TOP | Position::LEFT);

$path = $image->save($title, './assests/img'); // ./assets/img/my-amazing-post.png

API

`new Image(int $width, string $background, string $font, int $padding)`

创建新的 Image 实例。

$width - 图像的宽度（px），高度按16:9比例计算
$background - 图像背景的十六进制颜色，例如：ff8800 或 #ff8800
$fontPath - 图像中使用的字体路径
$padding - 图像周围的空闲空间（px）

`Image::text(string $text, int $size, string $color, ?int $position = null)`

向图像添加文本。可以使用多次。第一个总是居中，文本过长时自动换行并调整大小以始终适合图像 - 被视为主要标题。

$text - 给定文本
$size - 文本的大小（px）
$color - 文本的十六进制颜色，例如：ff8800 或 #ff8800
$position - 文本在图像中的位置，使用组合 Position::TOP、Position::BOTTOM、Position::LEFT、Position::RIGHT，例如：Position::TOP | Position::RIGHT

`Image::save(string $name, string $destination)`

将生成的图像保存到 $destination 的指定 $name，并返回结果路径。

`Image::get()`

返回生成的图像。

命令行界面

vendor/bin/create-image -o example.com ./assets/img "My amazing post"

成功消息

图像已创建在 ./assets/img/my-amazing-post.png

Composer 命令

您还可以在 composer.json 中定义新命令以避免不断输入每个选项

{
    "scripts": {
        "image": "vendor/bin/create-image --ansi -b E6FAFF -f 1E9682 -c E1738A -o example.com ./assets/img"
    },
}

并使用它更轻松地创建新图像

composer image "My amazing post"

可用选项

输入 vendor/bin/create-image --help 以查看所有可用选项。

Description:
  Creates a new social image.

Usage:
  create [options] [--] <destination> <title>

Arguments:
  destination                            Where to save the image?
  title                                  Title of the post the image should be generated for.

Options:
  -w, --width=WIDTH                      The width of the image in px. Height is calculated proportionaly 16:9. [default: 1200]
  -p, --padding=PADDING                  The padding of the image in px. [default: 50]
  -s, --size=SIZE                        The size of the image title in px. [default: 100]
  -b, --colorBackground=COLORBACKGROUND  HEX color of the title. [default: "ffffff"]
  -f, --colorForeground=COLORFOREGROUND  HEX color of the image background. [default: "000000"]
  -o, --origin=ORIGIN                    E.g. your name or the name of your blog.
  -c, --colorOrigin=COLORORIGIN          HEX color of the origin. [default: "000000"]
  -h, --help                             Display this help message
  -q, --quiet                            Do not output any message
  -V, --version                          Display this application version
      --ansi                             Force ANSI output
      --no-ansi                          Disable ANSI output
  -n, --no-interaction                   Do not ask any interactive question
  -v|vv|vvv, --verbose                   Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Help:
  Creates a new social image with a defined title and optional signature.

开发

分叉并克隆仓库，安装依赖项。

git clone git@github.com:<your-name>/post-social-images.git
cd post-social-images
composer install

测试命令

composer ecs - 使用 EasyCodingStandard 库检查编码规范
composer phpstan - 使用 phpstan 运行静态分析
composer tester - 使用 nette/tester 运行 ./tests 中的测试

composer test - 一起运行所有以上操作
composer fix - 自动修复编码规范违规

提示

如何将图片添加到网站

将以下元标签添加到页面 <head> 元素中

<meta name="twitter:image" content="/assets/img/my-amazing-post.png">
<meta property="og:image" content="/assets/img/my-amazing-post.png">

所有推荐标签

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@twitter_handle">
<meta name="twitter:title" content="My amazing post">
<meta name="twitter:description" content="My amazing post introduction for visitors and crawlers.">
<meta name="twitter:image" content="/assets/img/my-amazing-post.png">

<meta property="og:type" content="article">
<meta property="og:title" content="My amazing post">
<meta property="og:description" content="My amazing post introduction for visitors and crawlers.">
<meta property="og:url" content="https://example.com/my-amazing-post">
<meta property="og:image" content="/assets/img/my-amazing-post.png">

有关其他元标签的更多信息，请参阅 The Open Graph protocol 和 Twitter Cards

预览

尝试将您的页面添加到 https://metatags.io/ 以查看当您的新社交图像在 Facebook、Twitter、Linkedin 等上分享时的外观。

疯狂科/ post-social-image

维护者

详细信息