Делаем красивые превьюшки для сайта

от автора

Сегодня я хотел бы рассказать о своем велосипеде. Если ты — веб-дизайнер, ты знаешь о такой штуке как meta property=»og: image». Сегодня я расскажу как я сделал такую превьюшку для своего сайта.


Шаг первый — 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); ?> 

Цвета:

|▉rgb(250, 250, 250)|
|▉rgb(158, 158, 158)|
|▉rgb(4, 125, 252)|
|▉rgb(0, 65, 132)|

Шаг второй — вставляем на сайт

<meta property="og: image" content="http://▉▉▉▉▉/placeholder.png?p=<?=urlencode(base64_encode($param));?>"/> <meta property="og:image" content="http://▉▉▉▉▉/placeholder.png?p=<?=urlencode(base64_encode($param));?>"/> 

Здесь все так просто что просто стыдно объяснять. $param — он был в скрипте, идентификатор страницы.

Все, теперь делимся сайтом.

И радуемся!

Бонус!

Вот такая превьюшка:

Код

<?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); ?> 

Спасибо за внимание!

ссылка на оригинал статьи https://habrahabr.ru/post/277151/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *