[PHP] Creating an image

[Elliot]

In this tutorial I will be creating an image that displays the current song I'm listening to in iTunes. However, this can easily be adapted to whatever use you may need.


Requirements

• GD Library (Should come with most paid hosting)
• FTP Server
• iTunes/Winamp/Foobar/music player of choice plugin that will publish the name of the current playing track to an ftp server. I'm using Now Playing by Brandon Fuller.

Start off by creating a new PHP file. Name it whatever you wish.


Start the PHP file with the following tags

 <?PHP



?>  

These tags tell the server what language you will be coding in.


Now, we'll start off by declaring a few variables. We can use these to help clean up our code. We can reference to them at any point below where we declared our variable.


$song - the current track playing (I'll be grabbing this information from an XML file that is also on the server)
$wdth - will be the width of the image
$image - Will be used to display the image
$bg - Will choose the background color of the image
$fg - Will choose the foreground (in this case text) color of the image.


Here are the full variables we'll be declaring

 $song = "$title - $artist"; 
  

This will be what we're printing onto the image. I'm using the the following variables $title and $artist where $title and $artist will contain the data that I'm fetching from the xml file.

 $wdth = strlen($song)*9.3; 
  

This will allow the image's width to be dynamically adjusted to fit the text. Strlen will grab the number of characters from a phrase. In this case we're counting the number of characters in the variable "$song" and then multiplying it by 9.3. If this is not working play around with the number you're multiplying strlen by.

 $image = imagecreate($wdth,20); 
  

This will create an image that is the width of the text and 20px vertically.

 $bg = imagecolorallocate ($image, 250,250,250); 
  

This is using RGB color values. If needed you can easily convert a HEX color value to a RGB color value. This variable sets the background color of the image.

 $fg = imagecolorallocate ($image, 0,0,0); 
  

This is also using RGB color values. This will set the color of the foreground of the image. In this case it will choose the color of the text.

We are now done declaring our variables.

Now we're going to be printing the image using the following code.

 imagestring($image, 5,5,1,$song,$fg);

header ("content-type: image/jpeg");
imagejpeg($image); 
  

The imagestring command will apply more information for rendering the image. $image is selecting the image to apply the information to. "5,5,1" is choosing font size and placement on both the x and y axis (image, font size, x-axis, y-axis).

 header ("content-type: image/jpeg");
imagejpeg($image); 
  

This bit of code is telling the browser all the information it needs to correctly render out the image. There isn't really much you need to know here.


Now, this script is essentially finished. All you need to do is edit the $song variable to whatever you want to be printed on the image. I'm using the xml parser to grab variables from an xml file on my server. If you want a tutorial on how to use xml parser to grab data from an xml file post below and I'll post it.


This is what your finished code should look like.

 <?PHP

$song = "$title - $artist";

$wdth = strlen($song)*9.3;

$image = imagecreate($wdth,20);
$bg = imagecolorallocate ($image, 250,250,250);
$fg = imagecolorallocate ($image, 0,0,0);


    imagestring($image, 5,5,1,$song,$fg);

    header("content-type: image/jpeg");
    imagejpeg($image);



?>  

Here is the finished result. Just wrap the link to the php file in img tags.




This is the full code I'm using. The XML parsing is using code by Brandon Fuller that he has posted on his website (link below).

 <?php

$file = "itunes.txt";
$xml_parser = xml_parser_create();



if ( is_file( $file ) )
{
   $fp = fopen( $file, "r" );
   $data = fread( $fp, filesize( $file ) );
   fclose( $fp );
   xml_parse_into_struct( $xml_parser, $data, $vals, $index );
   xml_parser_free( $xml_parser );
   }

     if ( $vals[ $index["NOW_PLAYING"][0] ]["attributes"]["PLAYING"] == 1 )
   {
      foreach ( $index["TITLE"] as $i => $j )
      {
         $title = $vals[ $index["TITLE"][$i] ]["value"];

         if ( strlen( $title ) > 0 )
         {
            $artist = $vals[ $index["ARTIST"][$i] ]["value"];
            $album = $vals[ $index["ALBUM"][$i] ]["value"];
            $genre = $vals[ $index["GENRE"][$i] ]["value"];
            $kind = $vals[ $index["KIND"][$i] ]["value"];
            $track = $vals[ $index["TRACK"][$i] ]["value"];
            $numtracks = $vals[ $index["NUMTRACKS"][$i] ]["value"];
            $year = $vals[$index["YEAR"][$i] ]["value"];
            $comments = $vals[ $index["COMMENTS"][$i] ]["value"];
            $time = $vals[ $index["TIME"][$i] ]["value"];
            $bitrate = $vals[ $index["BITRATE"][$i] ]["value"];
            $urlamazon = $vals[ $index["URLAMAZON"][$i] ]["value"];
            $imagesmallurl = $vals[ $index["IMAGESMALL"][$i] ]["value"];
            $imageurl = $vals[ $index["IMAGE"][$i] ]["value"];
            $imagelargeurl = $vals[ $index["IMAGELARGE"][$i] ]["value"];
            $filename = $vals[ $index["FILE"][$i] ]["value"];
            $artworkID = $vals[ $index["ARTWORKID"][$i] ]["value"];

            
         }
      }
   }



$song = "$title - $artist";

$wdth = strlen($song)*9.3;

$image = imagecreate($wdth,20);
$bg = imagecolorallocate ($image, 250,250,250);
$fg = imagecolorallocate ($image, 0,0,0);


    imagestring($image, 5,5,1,$song,$fg);

    header("content-type: image/jpeg");
    imagejpeg($image);



?>  

This is what the xml file looks like. All this data is being added by an iTunes plugin via FTP.

<?xml version="1.0" encoding="ISO-8859-1"?>

<now_playing playing="1" timestamp="2011-03-28T09:37:30Z">
	<song>
		<title><![CDATA[Play the Night]]></title>
		<artist><![CDATA[Hadouken!]]></artist>
		<album><![CDATA[For The Masses]]></album>
		<genre><![CDATA[Rock]]></genre>
		<kind>MPEG audio file</kind>
		<track>9</track>
		<numTracks>13</numTracks>
		<year>2010</year>
		<comments><![CDATA[]]></comments>
		<time>253</time>
		<bitrate>192</bitrate>
		<disc>1</disc>
		<numDiscs>1</numDiscs>
		<compilation>No</compilation>
		<urlAmazon>http://www.amazon.com/Masses-Hadouken/dp/B0030IXWHC%3FSubscriptionId%3D03AKJ1J6S0FY8K0WRER2%26tag%3Dbrandonfuller-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB0030IXWHC</urlAmazon>
		<urlApple/>
		<imageSmall>http://ecx.images-amazon.com/images/I/616hcnvGEXL._SL75_.jpg</imageSmall>
		<image>http://ecx.images-amazon.com/images/I/616hcnvGEXL._SL160_.jpg</image>
		<imageLarge>http://ecx.images-amazon.com/images/I/616hcnvGEXL.jpg</imageLarge>
		<composer><![CDATA[]]></composer>
		<grouping><![CDATA[]]></grouping>
		<file><![CDATA[]]></file>
		<artworkID>24349305acc17925ef46bf8bf7420101</artworkID>
	</song>
</now_playing>

Brandon Fuller | Now Playing: An iTunes for Windows Plugin

[HTML]

GD Library has always been the sex.