Евгений Галиев

Когда вы делитесь ссылкой в Телеграм, ВКонтакте WhatsApp или другой социальной сети, к вашей ссылке подгружается превью-изображение.

Я нашел простой PHP-скрипт который автоматически генерирует изображение на основе заголовка страницы или других данных, которые вы можете передать в URL. В зависимости от CMS и уровня знаний, вы можете подключить скрипт к своему сайту. Он не обращается к CDN, все выполняется на вашем сервере/хостинге.

Далее перевод инструкции и сам скрипт.

1. Сначала скопируйте код отсюда
2. Сохраните код в файл и назовите его gen.php.
3. После загрузки вам необходимо установить пару настроек.
4. Сначала вам нужно создать фоновое изображение и сохранить его где-нибудь.

размер изображения должен быть 1200 x 630 пикселей. Ничего страшного, если ваше изображение немного больше или меньше, скрипт позаботится о том, чтобы оно было правильного размера. Оставьте место в центре изображения для заголовка страницы! Изображение должно быть в формате PNG.

5. Теперь вы можете выбрать шрифт, в котором будет отображаться текст. Сначала выберите шрифт из Google Fonts , а затем загрузите его локально. Затем воспользуйтесь этим сайтом , чтобы преобразовать его в формат TTF.

Ваш шрифт должен быть в формате TTF .

6. Теперь у вас есть фоновое изображение и шрифт, и вы можете настроить скрипт.
7. В основной папке вашего веб-сайта, где сохраняются веб-страницы, загрузите скрипт в отдельную папку и назовите ее как хотите.
8. В эту же папку загрузите файлы фона и шрифтов.
9. Откройте файл Gen.php и под переменными вверху страницы измените их, указав расположение ваших файлов.

Для $imageURL используйте полный путь к фоновому изображению, например https://example.com/opengraph/background.png. Для $font вы можете просто указать ./YourFontName.ttf, но если это не сработает, используйте точный путь к шрифту на вашем сервере. Свяжитесь с вашим хостером, если вы не знаете точный путь.

10. Затем создайте еще одну папку внутри, где будет сохранен скрипт, назовите ее generated.

Папка generatedиспользуется для кэширования уже сгенерированных изображений. Если изображение уже создано, скрипт автоматически обработает его, а не создаст новое изображение. Изображения в этой папке старше 1 минуты удаляются автоматически.

11. Сценарий теперь настроен, чтобы использовать его на своих HTML-страницах, просто откройте файл, в метаданных og:imageи twitter:imageукажите местоположение сценария gen.php, добавив в конец ссылки ?title=после =вставки заголовка, который вы хотите. показывать.

ПРИМЕР
<meta name="twitter:image" content="https://example.com/opengraph/gen.php?title=Webpage%20Title">
<meta property="og:image" content="https://example.com/opengraph/gen.php?title=Webpage520Title">
Помните, что вы должны использовать кодировку URL-адреса . Пространства будут %20 использовать этот сайт для преобразования текста в кодировку URL-адреса .

12. Теперь вы настроили свой сайт для создания пользовательских изображений для встраивания в социальные сети! Надеюсь, это будет полезно и сэкономит вам время.

Любые вопросы или проблемы, пожалуйста, прокомментируйте ниже. Помните, что у вас должен быть хостинг, позволяющий запускать PHP V7+.

Исходный код

<?php

/**
 * This script inserts text over an image using ImageMagick library.
 * The image URL, font, and title are fetched from variables.
 * The text is drawn over the center of the image in white color.
 *
 * Script written by Catkin, BlackFox IT (https://blackfox.it/)
 *
 */

// Background image location
$imageUrl = "Your Image URL";
// Path to the custom font, must be in ttf format
$font = "./Your Font File";
// Get the text from the URL link.com/?title=text
$title = $_GET['title'];

/**
 * Inserts text over an image using ImageMagick library.
 *
 * @param string $imageUrl The URL of the image
 * @param string $font The font to be used
 * @param string $title The text to be inserted
 * @return string The path of the modified image
 */
function insertTextOverImage($imageUrl, $font, $title) {
    try {
        // Check if ImageMagick extension is installed
        if (!extension_loaded('imagick')) {
            throw new Exception("ImageMagick extension is not installed");
        }

        // Create new Imagick object
        $image = new Imagick($imageUrl);

        // Get the image dimensions
        $imageWidth = $image->getImageWidth();
        $imageHeight = $image->getImageHeight();

        // Create a new drawing object
        $draw = new ImagickDraw();

        // Set the text color to white
        $draw->setFillColor('white');

        // Set the font size and font family, size based on the image dimensions
        $fontSize = min($imageWidth, $imageHeight) * 0.1;
        $draw->setFontSize($fontSize);
        $draw->setFont($font);

        // Set the gravity to center
        $draw->setTextAlignment(Imagick::ALIGN_CENTER);
        $draw->setGravity(Imagick::GRAVITY_CENTER);

        // Calculate the position to draw the text
        $textX = $imageWidth / 2;
        $textY = $imageHeight / 2;

        // Draw the text on the image
        $image->annotateImage($draw, $textX, $textY, 0, $title);

        // Resize the image to 1200 x 630 pixels
        $image->resizeImage(1200, 630, Imagick::FILTER_LANCZOS, 1);

        // Save the modified image
        $outputPath = 'generated/' . sanitizeFileName($title) . '.jpg';
        $image->writeImage($outputPath);

        // Destroy the image objects
        $image->clear();
        $image->destroy();

        return $outputPath;
    } catch (Exception $e) {
        // Log the error
        error_log("Error: " . $e->getMessage());

        return "";
    }
}

/**
 * Sanitizes a file name by removing special characters and limiting the length to 25 characters.
 *
 * @param string $fileName The file name to be sanitized
 * @return string The sanitized file name
 */
function sanitizeFileName($fileName) {
    // Remove special characters
    $sanitizedFileName = preg_replace('/[^A-Za-z0-9\-]/', '', $fileName);

    // Limit the length to 25 characters
    $sanitizedFileName = substr($sanitizedFileName, 0, 25);

    return $sanitizedFileName;
}

// Check if the generated folder exists, create it if not
if (!is_dir('generated')) {
    mkdir('generated');
}

// Check if there are any images older than 1 minute in the generated folder and delete them
$files = glob('generated/*');
foreach ($files as $file) {
    if (time() - filemtime($file) > 60) {
        unlink($file);
    }
}

// Generate the modified image and output it
$result = insertTextOverImage($imageUrl, $font, $title);
header('Content-type: image/png');
readfile($result);

Источник:
forum.bootstrapstudio.io/t/automatic...

Благодарность: