Complex text overlay guide
Today, the role of images on the internet is more important than ever - no matter if it is on a website, a social media platform or in a chat application, images are usually the first ones to catch your eyes. You do not necessarily need the help of a graphic designer and to learn Photoshop magic tricks in order to create every single one of your social posts. By using Shardimage, you can dynamically generate the needed numbers, text, and images (e.g. watermarks, etc.) for your base images. This way you can build simple, easy to use, quick social post generators.
Shardimage makes it easy to automatically put information on these images in different sizes, in a way that is aesthetically pleasing as well. Here is an example for that.
Start
With Shardimage text overlay function we can place multiple independent text layers on an image. Let’s recreate the map image above.
First of all we need an image for our text and upload it to the Shardimage system.
Used Shardimage features
For this task we will use:
Find coordinates
We need to decide where to put the data. GIMP is perfect for this task; it is free and open-source as well.
Of course these coordinates are just estimated, we can specify the points if they are not satisfying on the result image.
Code
For this example I will use the official Shardimage PHP SDK, for more details, please visit our SDK documentation here ».
I’ll put the changing data (state name, coordinates ect.) into an array and loop through it to place them on the image. To make the coordinate arrangement similar to GIMP’s, the gravity transformation will be set top left.
$publicId = 'us_jpg';
$states = [
[
'name' => 'AK',
'x' => 265,
'y' => 595,
'vote' => 3,
'color' => 'red',
],
[
'name' => 'WA',
'x' => 300,
'y' => 70,
'vote' => 12,
'color' => 'blue',
],
// ...
];
$transformation = new Transformation();
foreach ($states as $state) {
$text = (Text::create(sprintf("%s\n %s", $state['name'], $state['vote'])))->googleFonts('Montserrat')->weight(Text::WEIGHT_BOLD)->size(18);
$transformation->group()->gTopLeft()->y($state['y'])->x($state['x'])->color($state['color'])->textOverlay($text);
}
$url = $client->getUrlService()->create([
'publicId' => $publicId,
], [
'security' => 'basic',
'transformation' => $transformation,
]);
echo $url;
The result transformation for these two states would be: /g:tl_y:595_x:265_co:red_l:otext:gf:Montserrat,bold,s:18:AK%0A%20%203/g:tl_y:70_x:300_co:blue_l:otext:gf:Montserrat,bold,s:18:WA%0A%20%2012/. The code and image generation is that simple, from here, we only need to add the rest states to the $states array and let the code work! And because the Shardimage image serving works from the URL, the generator need to run only when the data changed, the copied URL can be used anytime.
Filling up the state array, the raw result would be like this:
https://img.shardimage.com/5ow354rT/s-b3:q8qfIAPOy-XHApfG8vPv9EEZO2Kryp8g75/g:tl_y:-150_x:400_l:otext:gf:Montserrat,b64,bold,s:50:VVMgZWxlY3Rpb25zIDIwMjA/g:tl_x:300_y:0_w:80_l:lo:us_flag/g:tl_x:885_y:0_w:80_l:lo:us_flag/g:tl_y:80_x:150_l:otext:gf:Montserrat,b64,bold,s:25:RGlzdHJpYnV0aW9uIG9mIHZvdGVzIGJldHdlZW4gdGhlIHR3byBjYW5kaWRhdGVzLCBicm9rZW4gZG93biBieSBzdGF0ZS4/g:tl_y:785_x:520_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:IEhJCiAgNA/g:tl_y:745_x:265_co:red_l:otext:b64,gf:Montserrat,bold,s:18:QUsKICAz/g:tl_y:220_x:300_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:V0EKICAxMg/g:tl_y:304_x:266_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:T1IKICA3/g:tl_y:480_x:246_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:Q0EKICA1NQ/g:tl_y:440_x:320_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:TlYKICA2/g:tl_y:264_x:480_co:red_l:otext:b64,gf:Montserrat,bold,s:18:TVQKICAz/g:tl_y:340_x:387_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IElECiAgNA/g:tl_y:370_x:510_co:red_l:otext:b64,gf:Montserrat,bold,s:18:V1kKICAz/g:tl_y:264_x:640_co:red_l:otext:b64,gf:Montserrat,bold,s:18:TkQKICAz/g:tl_y:340_x:645_co:red_l:otext:b64,gf:Montserrat,bold,s:18:U0QKICAz/g:tl_y:415_x:650_co:red_l:otext:b64,gf:Montserrat,bold,s:18:TkUKICA1/g:tl_y:400_x:780_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IElBCiAgNQ/g:tl_y:462_x:422_co:red_l:otext:b64,gf:Montserrat,bold,s:18:VVQKICA2/g:tl_y:475_x:535_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:Q08gCiAgOQ/g:tl_y:590_x:520_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:Tk0KICA1/g:tl_y:680_x:670_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IFRYCiAgMzg/g:tl_y:575_x:700_co:red_l:otext:b64,gf:Montserrat,bold,s:18:T0sKICA3/g:tl_y:495_x:680_co:red_l:otext:b64,gf:Montserrat,bold,s:18:S1MgCiAgNg/g:tl_y:495_x:800_co:red_l:otext:b64,gf:Montserrat,bold,s:18:TU8KICAxMA/g:tl_y:585_x:810_co:red_l:otext:b64,gf:Montserrat,bold,s:18:QVIKICA2/g:tl_y:675_x:813_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IExBCiAgOA/g:tl_y:630_x:880_co:red_l:otext:b64,gf:Montserrat,bold,s:18:TVMKICA2/g:tl_y:620_x:940_co:red_l:otext:b64,gf:Montserrat,bold,s:18:QUwKICA5/g:tl_y:540_x:940_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IFROCiAgMTE/g:tl_y:610_x:1010_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IEdBCiAgMTY/g:tl_y:570_x:1064_co:red_l:otext:b64,gf:Montserrat,bold,s:18:U0MKICA5/g:tl_y:515_x:1085_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IE5DCiAgMTU/g:tl_y:460_x:1085_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:IFZBCiAgMTM/g:tl_y:450_x:1040_co:red_l:otext:b64,gf:Montserrat,bold,s:18:V1YKICA1/g:tl_y:370_x:1075_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IFBBCiAgMjA/g:tl_y:415_x:985_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IE9ICiAgMTg/g:tl_y:435_x:925_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IElOCiAgMTE/g:tl_y:340_x:930_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IE1JCiAgMTY/g:tl_y:440_x:865_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:ICBJTAogIDIw/g:tl_y:330_x:835_co:red_l:otext:b64,gf:Montserrat,bold,s:18:IFdJCiAgMTA/g:tl_y:305_x:1110_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:IE5ZCiAgMjk/g:tl_y:710_x:1064_co:red_l:otext:b64,gf:Montserrat,bold,s:18:ICBGTAogIDI5/g:tl_y:587_x:402_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:QVoKICAxMQ/g:tl_y:295_x:745_co:blue_l:otext:b64,gf:Montserrat,bold,s:18:IE1OCiAgMTA/w:1000/g:tl_y:850_x:20_l:otext:gf:Montserrat,b64,s:18:U291cmNlOiBNSVQgRWxlY3Rpb24gTGFiIERhdGFzZXQuIDE0LjExLjIwMjAu/co:red_g:tl_y:850_x:820_l:otext:gf:Montserrat,b64,s:18:SW5zdGFudG5ld3Muc2l0ZQ/g:tl_y:730_x:320_bg:blue_wh:25_l:otext:%3A%20/g:tl_y:730_x:600_bg:red_wh:25_l:otext:%3A%20/g:tl_y:732_x:350_co:blue_l:otext:gf:Montserrat,b64,bold,s:18:RXJpYyBDbGFwdG9u/g:tl_y:732_x:630_co:red_l:otext:gf:Montserrat,b64,bold,s:18:RWRkaWUgVmFuIEhhbGVu/i/us_jpg
The final result
You can check the fresh, accurate data on the map, with the current date and the source credited properly. The image is ready to use on your website or you can spread it on your social media sites.
Your content, your brand
Use your own design elements when creating your pictures. Pay attention to which font you choose to use - you already have access to quite a few fonts on Shardimage and the range of options will keep expanding. (If you miss something very much, write to us and we’ll look it up.)
Colours are very important. Obviously, you will try to use eye-catching shades that are well visible, are creating enough contrast, and are suitable for your target audience. Try to match the colours to your own brand image, eg. you can use shades typical of your logo or website. You can also complete the images by adding the logo of your own page to them.
Disclaimer: The data shown in the image is not real, they are just random characters, to provide an example. By the way, Shardimage.com supports the idea that excellent guitarists should lead countries instead of politicians.