Create image from text

Hi there,

is there already an easy solution to create an image from a text field. Backgrund is that some employes do not want to have their name on the website and the easiest way would be to create an image from the name field and place that in the webpage.

Thanks in advance!

P.S: kirby2 solutions only :slight_smile: )

So the image is supposed to show the name rather than it being printed in the page? If so, what about accessibility?

I guess you could use GD to burn the persons name on to the photo of them and then use their initials in the alt tag alt="Photo of JS, Office Manager" . Atleast that way you dont have an unnecessary image and some sort of label for accesability

Not such a bad idea, but still to me that seems unfair to let those with eyesight see the names while those without are left in the dark (in the real and the figural sense of the word)

:man_shrugging: its a tricky one. Which ever way you go with this one, someone ends up at a disadvantage.

Hi there,

thanks for your thoughts. Yes somebody will be left behind, but the most important thing is the person who does not want to be on the internet.

What I was asking for is if there is already an kirbytext to create an image from a text field, so I will not output it as i heading but as an image .

Greetings

I don’t think so, but have you already searched this forum for a solution?

Yes, this would be the preferred way :slight_smile:

Something like in the screenshot - Name of the person, position

On the new getkirby.com website you can find a class with a method that generate social media images, maybe you can use that as a starting point:

1 Like

There are a number of posts on StackOverflow about creating an Image with GD from a string of text. You could probably do that in a custom Kirby tag.

I would have bet this question has been asked and answered here before as well, but can’t find it.

Hey Tobi,
I wanted to do something similar a while ago, but didn’t need it in the end. So my solution is not finished, but proberly it can give you a starting point. It’s a Field with hook, that creates and saves the image in the contentfolder. Here is my plugin code:

?php

kirby()->hook('panel.page.update', function($page) {

  $name = $page->content()->get('name');
  if($name != ''){

    $slug = strtolower($name);
    $slug = preg_replace("/[\s_]/", "-", $slug);
    $uml = array("ä", "ö", "ü", "ß", "´");
    $nouml = array("ae", "oe", "ue", "ss", "");
    $slug = str_replace($uml, $nouml, $slug);

    $filename = $page->uid() . '_' . $slug;

    $font = __DIR__ . '/arial.ttf'; // Your Fontfile
    $fontsize = 25;
    $im = @imagecreatetruecolor(strlen($name) * $fontsize / 1.5, $fontsize);
    imagesavealpha($im, true);
    imagealphablending($im, false);
    $white = imagecolorallocatealpha($im, 255, 255, 255, 127);
    imagefill($im, 0, 0, $white);
    $color = imagecolorallocate($im, 204, 55, 51);
    $outputImage = $page->root() . '/' . $filename . '.png';
    imagettftext($im, $fontsize, 0, 0, $fontsize - 3, $color, $font, $name);
    imagepng($im, $outputImage, 0);
    imagedestroy($im);

  }
});

Like @jimbobrjames said, most of the code is from stackoverflow :sweat_smile: but it should do the trick.

cheers
tom

2 Likes

Genuine question: why don’t you just fill the same space that is usually occupied by the picture with a normal div with the same text in it? You can save a bunch of extra http requests that way and you can have the same result.
And it’s accessible since it is actual text.

I want to replace the text with an image, so search engines can not find the name.

Thanks to @doldenroller I could exactly do what I wanted to!

Even the different languagues create automatically now the image :slight_smile:

Thank you all for your thoughts!

Just a side note: If you save your images with a filename which corresponds to the name of the person, your intention to protect the name from finding it is diminished to zero…

@Adspectus good eye :slight_smile: After I posted the image I changed the route for the folder, the image name is not corresponding to the name of the person. Greetings