Create your own shiny Open Graph images with Imagine PHP

You might not have noticed, but we use our own custom Open Graph preview images for our articles. Some of you asked us how we did it, so here you go ! In this article we will explain how to use the php-imagine/Imagine library to create some preview images suited to your needs like we did:

For this article, we will pretend that our company is named “Square Corp” and that our company’s logo is a purple square. Our preview images will be constituted of this logo, the title of the article, the date of publication, the author, and a purple footer. Oh, and to spice things up, we will use a photo of Nicolas Cage as a background image. Why not?

Section intitulée first-things-first-setting-up-the-libraryFirst things first: setting up the library

All our code will be located in a single class named ArticlePreviewRenderer. A gist of this class is available at the end of the article.

The only thing we will need before starting is to require the library:

Then you need to choose the driver Imagine will use. In this article we will use Gd, but you could also use Imagick or Gmagick if you prefer. You might have to install some php extensions to use them however. Once you choice is made, instantiate the Imagine instance corresponding to your driver:

Then we are all set up ! We are ready to head towards the first step of our work of art: the purple footer.

Section intitulée drawing-shapes-and-filling-them-with-colorDrawing shapes and filling them with color

The footer is basically a rectangle at the bottom of a base image. We will use the previous Imagine instance to create the first element needed to draw a rectangle: an Image. This Image will be the support on which we will draw. We could compare it to a sheet of paper. We will give it a width of 1200 pixels and a height of 600 pixels thanks ...
[Courte citation de 8% de l'article original]