Creates images suitable for social sharing

v0.1.1 2019-03-15 18:09 UTC

This package is auto-updated.

Last update: 2024-06-29 04:40:10 UTC


Example Image

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

Travis (.org)


composer require crazko/post-social-images



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('', 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

Example Image


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

Creates new Image instance.

  • $width - width of the image in px, height is calculated proportionaly 16:9
  • $background - HEX color of the image background, e.g.: ff8800 or #ff8800
  • $fontPath - path to the font used in the image
  • $padding - free space around the image in px

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

Adds text to the image. Can be used multiple times. First one is always centered, wrapped when the text is too long and resized to always fit the image - considered as a main title.

  • $text - given text
  • $size - size of the text in px
  • $color - HEX color of the text, e.g.: ff8800 or #ff8800
  • $position - position of the text in the image, use combination of Position::TOP, Position::BOTTOM, Position::LEFT, Position::RIGHT, e.g.: Position::TOP | Position::RIGHT

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

Saves generated image to the $destination with given (webalized) $name and returns resulting path.


Returns generated image.


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

Resulting success message:

Image was created in ./assets/img/my-amazing-post.png

Composer command

You can also define a new command in your composer.json to avoid constantly typing every option:

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

and use it to create new images more easily:

composer image "My amazing post"

Available options

Type vendor/bin/create-image --help to see all available options.

  Creates a new social image.

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

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

  -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

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


Fork and clone the repository, install dependencies.

git clone<your-name>/post-social-images.git
cd post-social-images
composer install

Testing commands:

  • composer ecs - checks coding standards with EasyCodingStandard library
  • composer phpstan - runs static analysis with phpstan
  • composer tester - runs tests from ./tests with nette/tester
  • composer test - runs all above together
  • composer fix - fixes coding standard violations automatically


How to add image to the site

Add following meta tags to the <head> element of your page:

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

All recommended tags:

<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="">
<meta property="og:image" content="/assets/img/my-amazing-post.png">

See The Open Graph protocol and Twitter Cards for more info about other meta tags.


Try to add your page to the to see how would it look like with your amazing new social image when shared on Facebook, Twitter, Linkedin and others.