rendering in 1:1 aspect ratio. looks strange

This commit is contained in:
2026-03-01 21:34:24 +01:00
parent 33cbf95d5d
commit a308ea5609

View File

@@ -97,7 +97,7 @@ final class Ruady_OG_Head {
$post_url = get_permalink( $post );
$post_title = get_the_title( $post );
$excerpt = get_the_excerpt( $post );
$excerpt = get_the_excerpt( $post );
$site_title = get_bloginfo( 'name' );
$site_url = site_url();
$site_url_p = parse_url($site_url);
@@ -155,6 +155,33 @@ final class Ruady_OG_Head {
self::render_png_for_post( $post );
}
private static function wrap_text_ttf(string $text, int $maxWidth, string $fontFile, float $size): array {
$words = preg_split('/\s+/', trim($text));
$lines = [];
$current = '';
foreach ($words as $word) {
$test = $current === '' ? $word : $current . ' ' . $word;
$box = imagettfbbox($size, 0, $fontFile, $test);
$width = $box[2] - $box[0];
if ($width <= $maxWidth) {
$current = $test;
} else {
if ($current !== '') {
$lines[] = $current;
}
$current = $word;
}
}
if ($current !== '') {
$lines[] = $current;
}
return $lines;
}
private static function render_png_for_post( WP_Post $post ): void {
if ( ! function_exists( 'imagecreatetruecolor' ) ) {
self::render_text_error( 500, 'GD extension not available' );
@@ -168,13 +195,13 @@ final class Ruady_OG_Head {
self::render_text_error( 500, 'Could not create image' );
}
$bg = imagecolorallocate( $image, 224, 241, 212 ); // theme background (light green)
$fg = imagecolorallocate( $image, 0, 0, 0 ); // theme foreground (black)
$tt = imagecolorallocate( $image, 72, 119, 40 ); // theme primary (dark green)
$accent = imagecolorallocate( $image, 204, 235, 235 ); // theme tertiary (light blue)
$bg = imagecolorallocate( $image, 224, 241, 212 ); // theme background (light green)
$fg = imagecolorallocate( $image, 0, 0, 0 ); // theme foreground (black)
$tt = imagecolorallocate( $image, 72, 119, 40 ); // theme primary (dark green)
//$accent = imagecolorallocate( $image, 204, 235, 235 ); // theme tertiary (light blue)
imagefilledrectangle( $image, 0, 0, $width, $height, $bg );
imagefilledrectangle( $image, 0, 0, $width, 12, $accent );
//imagefilledrectangle( $image, 0, 0, $width, 12, $accent );
$title = wp_strip_all_tags( get_the_title( $post ) );
$site = wp_strip_all_tags( get_bloginfo( 'name' ) );
@@ -184,9 +211,37 @@ final class Ruady_OG_Head {
$title = self::truncate( $title, 90 );
$site = self::truncate( $site, 90 );
/*
imagestring( $image, 5, 40, 60, $title, $tt );
imagestring( $image, 3, 40, 110, $site, $fg );
imagestring( $image, 2, 40, 580, 'Post ID: ' . (string) $post->ID, $accent );
*/
//////////////////////////////////
$excerpt = get_the_excerpt( $post );
$description = html_entity_decode(wp_strip_all_tags( $excerpt ));
$fontFile = __DIR__ . '/fonts/EBGaramond-VariableFont_wght.ttf';
//$size = 28;
$size = 36;
//$x = 60;
$x = (int) (($width - $height) / 2 + 30);
$y = 120;
$lineHeight = (int) ($size * 1.9);
//$maxWidth = 1080;
$maxWidth = $height - 2*60; // prepare text for 1:1 ratio cropping
$maxHeight = $height - 60;
// wrap_text_ttf(string $text, int $maxWidth, string $fontFile, float $size)
$lines = self::wrap_text_ttf($description, $maxWidth, $fontFile, $size);
foreach ($lines as $line) {
imagettftext($image, $size, 0, $x, $y, $fg, $fontFile, $line);
$y += $lineHeight;
if ($y > $maxHeight) break;
}
//////////////////////////////////
status_header( 200 );
header( 'Content-Type: image/png' );