Skip to main content

Adding a Stroke around text ...

Malcolm Hendeson
Edited

Hi. I have been able to add a Stroke (outline) to overlaid text in a Cloudinary URL, but can't find a way of doing it via the API in PHP.

I wish to add a black sroke to this text ...

array(
"overlay"=>array("font_family"=>"Victorian.ttf", "font_size"=>160, "text"=>$eventTxt), "y"=>340, "x"=>200, "w"=>1100, "h"=>150, "color"=>$colTxt),

where $eventTxt and $colTxt are PHP variables holding the text itself and the colour respectively.

This works. However I cannot seem to find a way of adding a Stroke in PHP,  whereas it works fine in this URL -

https://res.cloudinary.com/<myID>/image/upload/g_center/c_scale,e_distort:315:272:934:141:1246:610:479:815,g_center,h_1600,l_lbgs_insert,w_1600/c_scale,g_center,h_1600,l_sweet_box_mockup_basic,w_1600/c_scale,g_center,h_1600,l_sweet_box_mockup_watermark,o_75,w_1600/c_scale,g_center,h_1600,l_sweet_box_mockup_shipping,o_100,w_1600/l_text:Victorian.ttf_160_stroke:%20%0A%20Event%20Text,co_rgb:db049f,bo_25px_solid_black,x_200,y_340,w_1100,h_150/v1580828766/sweet_box_mockup_back.png

I'd be grateful if anyone could shed some light on this, thank you.

0

Comments

4 comments

Date Votes
  • Malcolm Hendeson
    Edited

    Further to my post above, for anyone having the same issues ...

    I managed to add the 'stroke' parameter to my PHP file. You need to add "stroke"=>"stroke" to turn it on and the stroke size and colour is determined by a border setting, such as "border"=>"25px_solid_black".

    Here is the complete section of PHP code from my post, with the stroke and border elements added -

    array(
    "overlay"=>array("font_family"=>"Victorian.ttf", "font_size"=>160, "text"=>"\n".$eventTxt, "stroke"=>"stroke"), "y"=>340, "x"=>200, "w"=>1100, "h"=>150, "color"=>$colTxt, "border"=>"25px_solid_black"),

     

    A further issue is that text is cropped very closely to a transparent bounding box. No worries for plain text, but when you try to add a stroke it's cut off in parts by the bounding box. My solution to this was to start the text one line down, hence the "\n" escaped newline in my code. The stroke can then be fully rendered around the text.

    Hope this helps anyone else struggling with this.

    0
  • Raz Ziv

    Hey Malcolm,

    I'm happy to see that you've already managed to find the solution for your use case.

    We truly appreciate you sharing your example here for any other members reaching this thread with the same question. Thank you for your contribution :)

    If you have any other questions, please do not hesitate to let us know.

    Kind regards,
    Raz

    0
  • Malcolm Hendeson

    Thank you Raz. Everything is working fine now.

    I use Cloudinary to produce product mockups that usually require image distortion transformations, or displacements, and Cloudinary has saved me hours (days, weeks!) of Photoshop work by allowing me to automate the process.

     

    I now have my own web apps that I can run anywhere without ever requiring Photoshop.

    0
  • Erwin Lukas

    Hi Malcolm,

    I'm glad it works for you now and happy to hear it saved you a lot of hours :)

    Regards,
    Erwin Lukas

    0

Post is closed for comments.

Didn't find what you were looking for?

New post