Endless Paradigm

Full Version: PHP Tutorial: Images and Text
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I was bored and decided to play with some php and came up with this

What wee'll Need:
Make a Basic Image:
This is where you decide what size you want the final image to be. Wee'll be making use of php's imagecreate() function. Wee'll set the header to "content-type: image/png" so the browser properly displays the image. Wee'll make the png using imagepng(), then destroy it at the end using imagedestroy(). Wee'll also set a default bg color and the text color with imagecolorallocate(), the variables passed in are the image, then the r, g, b values.

PHP Code:
<?php
header('content-type: image/png');
//the 2 numbers passed in are the width and height
$image = imagecreate(400, 100);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>

Result:
[Image: step1.png]

Getting Text From RSS Feeds:
Wee'll use SimplePie to parse the rss feed and get the last feed from twitter. To get your twitter rss feed simply go to your twitter, right-click the rss icon, and get link location. Wee'll require simplepie, then assign the class to variable $feed.

PHP Code:
<?php
require ('./includes/simplepie.inc');
$feed = new SimplePie('http://twitter.com/statuses/user_timeline/38334089.rss');
?>

Wee'll disable cache so the image is up to date. Wee then initialize the feed. For a list of simplepie's api go here. Wee'll set the limit to 1 so wee only get the latest twitt.

PHP Code:
<?php
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
?>


The for loop is perfect for this situation so it's what I used.

PHP Code:
<?php
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed, replace with your own username
    $text = preg_replace('/mick3y93: /', '', $text);
}
?>

Wee add this code to the top of our script.

Spoiler for Our code so far:

PHP Code:
<?php
//require simplepie
require ('./includes/simplepie.inc');
//initiate simple pie
$feed = new Simplepie('http://twitter.com/statuses/user_timeline/38334089.rss');
//disable cache so its up to date
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description and set is as $text
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed
    $text = preg_replace('/mick3y93: /', '', $text);
}
header('content-type: image/png');
//the 2 numbers passed in are the width and height
$image = imagecreate(400, 100);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>

Adding The Text To The Image:
Place the font file in the same directory as the index.php, name it font.ttf. Wee will use imagettftext() which accept 4 parameters, resource $image, float $size, float $angle, int $x, int $y, int $color, string $fontfile, string $text

PHP Code:
//set where font is
$font = "./font.ttf";
//add text to image
imagettftext($image, 14, 0, 20, 70,$white, $font, $text);

This code goes in between the imagecolorallocate() and imagepng().

Spoiler for code so far:

PHP Code:
<?php
//require simplepie
require ('./includes/simplepie.inc');
//initiate simple pie
$feed = new Simplepie('http://twitter.com/statuses/user_timeline/38334089.rss');
//disable cache so its up to date
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description and set is as $text
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed
    $text = preg_replace('/mick3y93: /', '', $text);
}
header('content-type: image/png');
//the 2 numbers passed in are the width and height
$image = imagecreate(400, 100);
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//set where font is
$font = "./font.ttf";
//add text to image
imagettftext($image, 14, 0, 20, 70,$white, $font, $text);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>

Result:
I used a funky font
[Image: step2.png]
There you go, you added text parsed from an rss feed to a image you made. If you want to take it a little further you can do what I did and and a random background to the image.
I made 5 images, 400px by 100px, leaving a strip for the text, these are all png.
To randomize it i used php rand() function. I named the images bg0, bg1, bg2, etc. There are many ways to achieve this but i chose this way.

PHP Code:
<?php
$number = rand(0,4);
?>


To use an image as background wee'll remove imagecreate() and use imagecreatefrompng().

PHP Code:
$image = imagecreatefrompng("bg$number.png");


And wee're done! You now have a image with text from a rss feed with you custom random background.
Final Result:
[Image: index.php]

Spoiler for in case freehostia blows :/:
[Image: index.php]
The Final Script:
Spoiler for The Final Script:

PHP Code:
<?php
//require simplepie
require ('./includes/simplepie.inc');
//initiate simple pie
$feed = new Simplepie('http://twitter.com/statuses/user_timeline/38334089.rss');
//disable cache so its up to date
$feed->enable_cache(false);
$feed->handle_content_type();
//set limit to 1
$max = $feed->get_item_quantity(1);
//for loop to get the description
for ($i = 0; $i < $max; $i++) {
    //gets the item for i, which is only the first item
    $item = $feed->get_item($i);
    //gets the current item's description
    $text = $item->get_description();
    //remove annoying "username: " from twitter's feed
    $text = preg_replace('/mick3y93: /', '', $text);
}
//set header to png
header('content-type: image/png');
//randomize a number used to select the bg
$number = rand(0, 4);
//make png from the bg's'
$image = imagecreatefrompng("bg$number.png");
//set some colors
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
//set where font is
$font = "./font.ttf";
//add text to image
imagettftext($image, 14, 0, 20, 70,$white, $font, $text);
//make img png
imagepng($image);
//destroy image
imagedestroy($image);
?>


Notes:
This is by no meaning the best way to do this, it's just how I decided to do it. If you have any suggestions or if i messed up anywhere please tell me so I can improve the code. If you have any questions feel free to PM me, thank you for reading
awesome Mickey :)
Cool.  Might want to add, how to view the image (I assume this is for beginners?).
Otherwise, looks good! :P

Necro-Bot

[Image: Old-LastYearAirlines.jpg]
It's very interesting  :)
Reference URL's