Unlike most people's Instagram, our Instagram is almost 100% automatic. For example, we use code to generate our images.

Why Automatic Images

On our website, we interview people who do great in fitness. Most of the interviews have great, motivating quotes that people in fitness love, so, inspired by Foundr's Instagram, it was kind of obvious that our Instagram images should also be quotes.

All our interviews have a personalized avatar attached to them, so we decided to also add the avatar and the name of the person behind the quote to each image.

Getting the Quotes

In our interviews, the quotes are shown using a Wordpress shortcode (since our site runs on WP). Like this: 

[quote]I once did 5,500 burpees in 24 hours.[/quote]

The shortcode above leads to this being generated on the page (live here):

When the shortcode is run, the quote is saved to a custom table in the database (wp_[prefix]_quotes). Once a week, an editor take a look at any new quotes and mark the ones that might do well on Instagram.

Putting the Images Together

First, we create a base image, which is just a white image with the right dimensions. In our case, that's 600 x 600 since that resolution is good enough for Instagram and square-like Instagram likes.

$quote_image = imagecreatetruecolor( 600, 600 );

imagefill($quote_image, 0, 0, imagecolorallocate($quote_image, 255, 255, 255));

We then set up the colors for the texts:

xxxxxxxxxx

$text_color_black = imagecolorallocate($quote_image, 0, 0, 0);

$text_color_orange = imagecolorallocate($quote_image, 255, 127, 39);

Adding the text to the images is done using imagettftext(). That function takes a lot of parameters and it's no secret that we tried many different positions and font sizes before the text ended up looking perfect on the images (especially because the names and quotes all have different lengths). 

We add one line at a time to the image using imagettftext(). Like this:

xxxxxxxxxx

for($i = 0; $i < sizeof($quote_lines); $i++) { 

    $text_line_y = ...; // increment the y so the lines appear below each other. 

    imagettftext($quote_image, $text_size, 0, $text_line_x, $text_line_y, $text_color_black, $font_path, $quote_lines[$i]); 

}

The avatar image we add using  imagecopyresampled(). Like this: 

xxxxxxxxxx

imagecopyresampled($quote_image, $avatar_image_portrait, $avatar_x, $avatar_y, 0, 0, $avatar_size, $avatar_size, 600, 600);

The parameters  $avatar_size is the size of the avatar image — and since our avatar images are square, we can use the same parameter twice.

Finally, we add our logo. Smart readers might have spotted the two orange "//" in our logo could be text — and yes, that's what it is. 2 x 3 "/" characters placed very close to each other with  imagettftext():

xxxxxxxxxx

imagettftext($quote_image, $logo_text_size, 0, $logo_x, $logo_y, $text_color_orange, $font_path, "/");

imagettftext($quote_image, $logo_text_size, 0, $logo_x + 3, $logo_y, $text_color_orange, $font_path, "/");

imagettftext($quote_image, $logo_text_size, 0, $logo_x + 6, $logo_y, $text_color_orange, $font_path, "/");

imagettftext($quote_image, $logo_text_size, 0, $logo_x + 14, $logo_y, $text_color_orange, $font_path, "/");

imagettftext($quote_image, $logo_text_size, 0, $logo_x + 17, $logo_y, $text_color_orange, $font_path, "/");

imagettftext($quote_image, $logo_text_size, 0, $logo_x + 20, $logo_y, $text_color_orange, $font_path, "/");

After the logo has been added, we just need to save the image and drop the temporary image we have been working on:

xxxxxxxxxx

imagepng($quote_image, $filename);

imagedestroy($quote_image);

Other temporary images must also be destroyed, like  imagedestroy($avatar_image_portrait);.