13 abr. 2020

La creación de una biblioteca PHP para imágenes de OpenGraph con un título del artículo

Recientemente, a menudo yo noto una tendencia de poner título de artículo en imágenes usadas en el og:image o twitter:image meta-tag. Decidí escribir una biblioteca pequeña pero flexible para trabajar con estos objetivos.

En tales imágenes, el texto por lo general se escribe en una fuente más grande que el texto que rodea esta imagen. Esto permite que usted llame la atención del lector al título de la publicación, que se compartió en Facebook, en Twitter or en otro lugar que apoya etiquetas de opengraph.

Aquí está un ejemplo de tal imagen tomada esta mañana de Twitter:

Y por tanto mira en una red social:

Tengo varios proyectos que necesitan este rasgo. Por lo tanto, decidí escribir una biblioteca universal que no tiene dependencias externas (excepto la biblioteca de gráfica PHP-GD, por supuesto) y puede cubrir totalmente las necesidades de mis clientes.

De este modo, conseguí la lista de parámetros que necesito configurar:

• imagen de fondo;
• el texto que se reviste encima de la imagen;
• fuente (en formato de TTF);
• la posición del texto a la imagen a lo largo de los ejes X y Y;
• talla de la fuente, color de la fuente y espacio entre líneas.

Decidí poner la posición del texto, talla de la fuente y espacio entre líneas como un porcentaje de la anchura y la altura de la imagen, esto permitirá que el texto se coloque aproximadamente en el mismo lugar en imágenes de tallas diferentes - lo teóricamente puede ser necesario. También, en mi opinión, la biblioteca debería manejar correctamente las «preposiciones» al final de línea, transfiriéndolos a la siguiente línea, si lo es posible.

Después de examinar el tema, he llegado a la conclusión de que la mejor opción del módulo de API es: : Debe transferir la ruta de la imagen de fondo al diseñador de clase. : Utilice los setadores para especificar las opciones necesarias. : Permite transferir la ruta de la imagen resultante al método generate() para guardar el resultado.

Como resultado, he hecho un buen módulo que funciona así:

use floor12\imagenator\Imagenator;

$imagenator = new Imagenator('/path/to/image.png');     // Create object and pass the file path to class constructor;
$imagenator
   ->setColor('FF04AB')                    // Font color in HEX format;
    ->setFont('/fonts/SomeFont.ttf')        // Path to custom font;
    ->setFontSize(3)                        // Font size in percent of image height;
    ->setPadding(5)                         // Horizontal padding in percent of image width;
    ->setMarginTopInPercents(50)            // Margin from top image edge in percent of image height;
    ->setRowHeight(7)                       // Row height in percent of image height;
    ->setText('This is an article title.'); // Text to put over the image;
    ->generate('/path/to/save.png');        // Save result image as PNG

Como consiguiente, podemos generar imágenes de aproximadamente los contenidos siguientes:

Puede encontrar esta biblioteca en mi GitHub