How To Create Dynamic Banners PHPsteemCreated with Sketch.

in #programming7 years ago (edited)

Video Tutorial: How To Create A Dynamic Banner in PHP

There are a lot of ways to create an image. PHP comes with a built-in library of functions we can call to create an image in the browser. This tutorial shows you how to create a dynamic banner using the PHP GD library.

References & Tools:

https://www.gravatar.com/ – Set an image to your profile. We use the Gravatar email hash to generate a dynamic user image on our banner.
https://cointhru.com/steem/ – Steem Tools and bitcoin node. Hosts the dynamic banner created in this tutorial and a form to set dynamic parameters.
https://www.php.net/ – Has a list of all the PHP functions we used in the tutorial.
See below for Cheat Sheet from video.

Dynamic Banner Default

Dynamic Banner with Parameters (user/email)

Creating A Form

Instead of typing ?u=myusername&[email protected] in the URL, we can quickly create a form in HTML/PHP to pass those parameters and set to an image.

Cheat Sheet

PHP GD Image Functions We Will Be Using:

header('Content-type: image/png');
// Sets the browser output to display a png image

imagecreatetruecolor(x,y);
// Creates a base image to work with in size x (width) and y (height)

imagecreatefromstring( file_get_contents( $imagestring ) );
// This will create an image from a URL linked to another image.

imagecopy( $imagetocopy, $addnewstringimage, $placeat_x_onimage, $place_y_onimage, $orig_x, $orig_y, $width, $height);
// This allows us to add a new image as a layer on top of our starting image, with a basic crop option.

imagecreatefrompng( $image );
// We use this to create turn our imagecopy() function into an image format.

imagecopyresampled( $baseimage, $addedlayerimage, $placeat_x, $placeat_y, $orig_x, $orig_y, $new_w, $new_h, $orig_w, $orig_h );
// This function allows us to copy and resize the newly created image on our [background] image.

imagecolorallocate( $image, $red, $green, $blue );
// Creates a color to use for fonts or fills

imagecolorallocatealpha( $image, $red, $green, $blue, $alpha );
// Creates a color with transparency (0 = opaque; 255 = clear;)

imagefill( $image, $start_x, $start_y, $color );
// Fills in a background color for our image

imagettftext( $image, $font_size, $angle, $start_x, $start_y, $color, $font, $text );
// Creates, sizes and positions text with a TTF font on your image.
// *You want to specify the path to your font - You can download fonts for free and upload to a folder

imagepng( $image );
// Outputs your new image to the browser

imagedestroy( $image );
// Frees up your memory cache associated with the image

Let me know how you liked the video, what you would improve or what else you want to see in the comments below.
Thanks for watching! Subscribe/Follow for more tutorials.

Sort:  

I worked a lot on gd. This is worthwhile. Just saved the codes

Coin Marketplace

STEEM 0.18
TRX 0.15
JST 0.029
BTC 63837.42
ETH 2539.78
USDT 1.00
SBD 2.65