https://haho.me го бях правил преди месеци, сайта е препродаден след като го бях правил за човек от тук, бая неща са изпочупили, но идеята на вицовете си стои като хората.
Пример за OG Image
Като може да се избира да се реже където решиш с цел вирален ефект и да не се вижда целия виц. Изрязването е лесно, слагаш [end] по вица, и след това се кропва всичко след него, проблемите идват после....
Това е с Ларвел + Intervention\Image + Imagick за писане текст по image.
Бая general purpose е направен, защото имаш Pool от шрифтове, освен това имаш Pool от font size, font weight от админ панела + изображения за ФОН, като може да се избира да генерира random от всички тези.
С Wordpress забрави да стане, поне не съм виждал, не че не е невъзможно, но някой трябва бая сериозно да пипа из нещата за да стане като хората, просто е кофти самия Imagick , че нямаш готово решение да знае кога да сменя на нов ред + как да ескейпне определени символи от едитора, за пример - повечето вицове се копи пействат от друг сайт, и се пействат в WYSIWYG, ама като се пейстнат изглеждат окей в едитора, но реално в кода на едитора стоят 100 <p> , стоят <\n> , <r> и една камара неща, дето впоследствие ще се фиксват когато излязат.
Щото ако решите да ескейпнете всичко в началото, как ще знаете кога да пишете на нов ред след като сте ескейпнали <p>-тата. Като цяло едно е да се напише, после да се фикснат определените бъгове, а такива бая излизат.
Понеже като го бях правил бях разделен дали да се ползва DIVtoImage.js или канвас, но там мисля, че излизат проблеми с респонсив нещата, не че е невъзможно да се измести на фронт енда цялото нещо, просто с бекенда се оправям по-добре и реших да е с Intervention\Image + Imagick. Проблеми при риспонсив имам предвид, че ако двама души с различни монитори пишат въпросния контент, има шанс изображенията да им излизат различни, спрямо това кой ги създава, заради front end JS-a. Другото, което е заради php bakend-a може да си позволиш да го направиш general purpose, тоест да си избират от различен pool от шрифтове, имиджи за фон, цвят за фон, цвят на шрифта, ширина на шрифта и т.н... -> което ако го няма, е много кофти, после трудно се чете, камо ли променя код като този, особено ако не си го писал ти.
Ето и малко код от подобен проект, ако някой си мисли, че е лесно с php, аз го чета лесно, защото съм го писал from scratch, но предполагам друг да чете подобен код е cancer.
PHP:
if(strpos($requesttext, '[end]') !== false) {
$textprepared = explode("<br />", $requesttext);
foreach ($textprepared as $k => $line) {
$line = strip_tags($line);
$line = str_replace(['<p>', '</p>'], '', $line);
$line = str_replace('…', '...', $line); //replace [end] with ...
$line = str_replace(' ', '', $line); // escape another buggy symbol from tinymce
и т.н.. още 5-6 реда за бъгове от tinymce редактора....
$textprepared [$k] = $line;
}
$y = $center_y - ((count($textprepared ) - 1) * $font_height);
foreach ($textprepared as $linetext) {
$ogimage->text($linetext,$center_x,$y,function ($ogfont) use (&$color,&$image,&$font,&$font_size) {
$ogfont->file(public_path('uploads/'.$font->path));
$ogfont->size($font_size);
$ogfont->color($color->value);
$ogfont->valign('top');
});
$y += $font_height * 2; // jump on a new line
}
Формулата за нов ред е ясна :
$y = $center_y - ((count($textprepared ) - 1) * $font_height);
И след това във форийча : $y += $font_height * 2; // jump on a new line
Пък заради valign = top, някъде горе трябва да имате нещо като:
$width = 120;
$height = 50;
$center_x = $width / 2;
$center_y = $height / 2;
Но преди това се генерира бланк изображение с ogimage сайза:
$ogimage = Image::make(public_path('yourpath/'.$image->path))->fit(1200,630);
Малка част от код, ако някой си мисли, че е нещо което се пише на 2 реда, поне с бекенда е толкова.
