How raise text in text written with intervention/image?

Hello!

In my laravel 5.8 app using “intervention/image”: “^2.4” libarary and css like :

    .banner_image {
        border-radius: 20%;
        border-style: outset;

        -webkit-border-radius: 20%;
        -moz-border-radius: 20%;
        -webkit-box-shadow: #000 0 2px 10px;
        -moz-box-shadow: #000 0 2px 10px;

        padding: 8px;
        box-shadow: 0px 0px 20px #b4b4b4;

        border-top:none;
        border-left:none;
        border-right:solid 2px #dddddd;
        border-bottom:solid 2px #dddddd;
    }

I generate banners based on rows in db with title, text and logo image :

I used text method like

        $img->text($banner_short_descr, 20 /* x */, 150 /* y */, function($font) use($text_color) {
            $font->file( public_path('fonts/roboto/Roboto_regular.ttf') );
            $font->size(24);
            $font->color($text_color);
        });

Now I need to add 2 features :

  1. Raise text of the banner and add some shadow to it.
  2. Raise border of the whole banner. If possible make sevaral external/internal borders

How can I do this ?

Thanks!

I’m not sure this has anything to do with PHP. It seems to be a CSS question.

For the text you just want text-shadow.

Note, you shouldn’t need the vendor prefixes for border-radius and box-shadow any longer.

1 Like

I suppose that text-shadow can modify text in html block, but how can it apply rendered text inside of the image ( “PHP site” inm y example)? Does intervention image library has possibility drawing text to raise it?

Are you saying that the text is part of the image? That would be a different matter.

I think more information could help.

How are you “generating” them?

What is $img ?

Yes, all image is php generated with intervention/image :
$img = \Image::make( public_path($background_image) );

But border around the image is css

Sorry, no ideas how to make what I want ?
I hope I explained what I need clearly.

  1. If there is a way to make text inside of image not so plain as it is now? Can it be done with intervention/image ?

One way of doing this without a specific “shadow” function is to draw the text twice, once in a darker colour (as your shadow), and a second time with a few pixels offset in both directions, in your “main” colour. So presuming that each time you draw text it goes over the previous text, something like:

       $img->text($banner_short_descr, 20 /* x */, 150 /* y */, function($font) use($shadow_color) {
            $font->file( public_path('fonts/roboto/Roboto_regular.ttf') );
            $font->size(24);
            $font->color($shadow_color);
        });
       $img->text($banner_short_descr, 23 /* x */, 153 /* y */, function($font) use($text_color) {
            $font->file( public_path('fonts/roboto/Roboto_regular.ttf') );
            $font->size(24);
            $font->color($text_color);
        });

might do something, though I don’t know where your origin point is.

2 Likes

Thank you for your feedbacks!
The best what I manages to make is : https://prnt.sc/ofqr1w
Do not think that is perfect…
Can you propose something to make it looks better?

Why not play around with making the offset 1, 2 or 3 pixels, and try grey or even white shadows? See which looks best to you.

2 Likes

Sure, if you can define “better”. It’s all subjective. You’re right though, it does look like it’s been knocked up with an old version of “Paint”, so now you need to experiment with different offsets, colour combinations and so on. Maybe use more than one “shadow” so you can have a graduated effect with the colours. You may be able to tell that graphic design is not my strong point.

Or, could you use a font that’s already got a shadow effect on it?

1 Like

Very smart point! Could you please some font with shadow effect (ttf preferable ).

Try https://www.fontsquirrel.com/fonts/list/find_fonts?q[term]=shadow&q[search_check]=Y

or https://www.myfonts.com/search/shadow/

1 Like