We make beautiful thumbnails for the site
Today I would like to talk about my bike. If you are a web designer, you know about such a thing as meta property = "og: image" . Today I will tell you how I made such a thumbnail for my site.
Open Graph protocol is the ability to connect your content with social networks, the ability to present it there correctly.
Open graph gives us the opportunity to control the appearance of articles that users send to social networks, “like” and “plus” our articles.
The picture for the article is chosen according to some strange principle - probably randomly. Of course, it is possible to choose another illustration, but who will do it? Usually like: clicked like, “share” - and everything. I do it myself.
')
And here og: image comes to our rescue.
Colors:
| â–‰rgb (250, 250, 250) |
| â–‰rgb (158, 158, 158) |
| â–‰rgb (4, 125, 252) |
| â–‰rgb (0, 65, 132) |
Everything is so simple here that it's just a shame to explain. $ param - it was in the script, the page id.
Everything, now we share the site.
And rejoice!
Here is a preview:
Thanks for attention!
Open Graph protocol is the ability to connect your content with social networks, the ability to present it there correctly.
Open graph gives us the opportunity to control the appearance of articles that users send to social networks, “like” and “plus” our articles.
The picture for the article is chosen according to some strange principle - probably randomly. Of course, it is possible to choose another illustration, but who will do it? Usually like: clicked like, “share” - and everything. I do it myself.
')
And here og: image comes to our rescue.
Step one - placeholder.php
<?php error_reporting(0); function gettitle($param){ return $title; // } function getdes($param){ return $description;// } $param = $_GET['p'];//param - $param = urldecode($param); $param = base64_decode($param);// base64 $im = imagecreatetruecolor(800, 400); $textsize = 40; $font = dirname(__FILE__).'/../fonts/1.TTF'; $color[0] = ImageColorAllocate($im,250, 250, 250);// $color[1] = ImageColorAllocate($im,158, 158, 158); $color[2] = ImageColorAllocate($im,4, 125, 252); $color[3] = ImageColorAllocate($im,0, 65, 132); imagefilledrectangle($im,0,0,800,800,$color[1]); imagefilledrectangle($im,0,0,800,120,$color[2]); Imagettftext($im, 80, 0, 32, 100, $color[0], $font, 'Blast.ORQ'); imagefilledrectangle($im,0,120,800,130,$color[3]); if(gettitle($param)){ $txt = gettitle($param); }else{ $txt = 'Error 404: Not found'; } Imagettftext($im, 48, 0, 24, 200, $color[0], $font, $txt); if(getdes($param)){ $str = getdes($param); $str = str_replace(["\r","\n"],"\r\n", $str); $str = wordwrap($str, 75, "\r\n"); $pieces = explode("\r\n", $str); $s = 248; foreach ($pieces as $a){ if($a){ Imagettftext($im, 24, 0, 24, $s, $color[0], $font, $a); $s += 45;// } } }else{ Imagettftext($im, 24, 0, 24, 248, $color[0], $font, 'Page, image or file was not found :('); } Header ('Content-type: image/png'); imagepng($im); imagedestroy($im); ?> Colors:
| â–‰rgb (250, 250, 250) |
| â–‰rgb (158, 158, 158) |
| â–‰rgb (4, 125, 252) |
| â–‰rgb (0, 65, 132) |
Step two - paste on the site
<meta property="og:image" content="http://▉▉▉▉▉/placeholder.png?p=<?=urlencode(base64_encode($param));?>"/> Everything is so simple here that it's just a shame to explain. $ param - it was in the script, the page id.
Everything, now we share the site.
And rejoice!
Bonus!
Here is a preview:
Code
<?php function gettitle($param){ return $title; // } function getdes($param){ return $description;// } $param = $_GET['p']; $param = urldecode($param); $param = base64_decode($param); $param = mb_convert_case($param, MB_CASE_LOWER, "UTF-8"); $ttl = gettitle($param); $des = getdes($param); $font = dirname(__FILE__) . '/fonts/10.TTF'; $bigtextsize = 35; $smalltextsize = 25; $tilt = 0; $width = 600; $height = 500; $im = imagecreatetruecolor($width, $height); imagecopy($im, imagecreatefromjpeg(dirname(__FILE__) . '/backgrounds/' . rand(1, 12) . '.jpg'), 0, 0, rand(0, 400), rand(0, 400), $width, $height); $gaussian = array( array( 1.0, 2.0, 1.0 ), array( 2.0, 4.0, 2.0 ), array( 1.0, 2.0, 1.0 ) ); imageconvolution($im, $gaussian, 20, 25); imageconvolution($im, $gaussian, 20, 25); imageconvolution($im, $gaussian, 20, 25); imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR); imagefilter($im, IMG_FILTER_SELECTIVE_BLUR); $color = ImageColorAllocatealpha($im, 255, 255, 255, 80); $X = $width / 2 - strlen($ttl) * (($bigtextsize * 0.5)) / 2; $Y = $bigtextsize * 1.5; Imagettftext($im, $bigtextsize, $tilt, $X, $Y, $color, $font, $ttl); if (strlen($des) < 35) {// $X = $width / 2 - 35 * (($smalltextsize * 0.5)) / 2; $des = wordwrap($des, 35, "\r\n", true);// } else { $X = $width / 2 - strlen($des) * (($smalltextsize * 0.5)) / 2; } $Y = $smalltextsize * 4; Imagettftext($im, $smalltextsize, $tilt, $X, $Y, $color, $font, $des); imagepng($im); Header('Content-type: image/png'); imagedestroy($im); ?> Thanks for attention!
Source: https://habr.com/ru/post/277151/
All Articles