Add padding to text overlay with a background

Chris Garaffa

February 21, 2018 14:52

I'm overlaying text on an image and have a custom background color on the text overlay. Is it possible to add some padding to the overlay itself, so that there is spacing between the sides of the overlay itself and the area where the text starts.

Here's my (PHP) code - sorry, I can't figure out how to format it any better in this editor! The second transformation is the one in question.

<?= cl_image_tag($blogpost->image->cloudinary_id, [
    'class' => 'img-responsive',
    'transformation' => [
        [
            'width' => 1200,
            'crop' => 'crop',
            'aspect_ratio' => 1.9047619048
        ],
        [
            'overlay' => 'text:rohnroundedmedium.ttf_80:' . $blogpost->title,
            'color' => '#FFFFFF',
            'gravity' => 'west',
            'x' => '25',
            'width' => '600',
            'crop' => 'fit',
            'background' => '#EBAA21'
        ]
    ]
]) ?>

 

I had thought of adding a second overlay with just the background color, but the text is dynamically generated so I'm not sure how I'd size that second overlay properly.

 

Thanks for any suggestions!

0

• 

  Ido

  February 25, 2018 13:50

  Hi

   

  I am not sure exactly what it is you are looking for, but you could try looking into the `alignmentvalue` of the text overlay to place it in a different place then the default left.

  another option would be to place a border for the text overlay.

  An example that uses both of these can be seen below:

  http://res.cloudinary.com/demo/image/upload/w_1200,ar_1.9047619048/l_text:arial_50_alignmentvalue_center:title,b_rgb:EBAA21,co_rgb:FFFFFF,g_west,x_-250,c_fit,w_600,h_100/bo_4px_solid_black,fl_layer_apply/sample

  was that what you were referring to?

  0

Post is closed for comments.