Freeola Internet Get Dotted Domains Blog Guides Forums
Menu

Viewing Thread:
'PHP Script: Random Image Generator + Links'

Sun 18/03/07 at 23:34:
cjh
Regular
"It goes so quickly"
Posts: 4,083
PHP Script: Random Image Generator + Links

If you head over to Freeolaís PHP Scripting support pages, you will see that they offer you a "Random Image Generator" script, free of charge.

While this is a handy little script, it doesnít allow for making the images in to hyperlinks, which you may wish to do.

This guide will take you through the process of adapting a pre-written script (linked to below) to add a random image generator, with links, to your web site, which is suitable for a basic ad-rotation feature on your web site (among others).

This guide assumes an understanding of HTML, and a little understanding of PHP. You may want to have a look over the "A quick introduction to PHP, a server-side scripting language"* article within this forum if youíre unfamiliar with the scripting language, as this script involves you adding your own variable and array data.

*Freeola character limit prevented the direct linking to this article.

Download the script!

This is a pre-written PHP script, and only requires you to add your preferred settings, as described in this guide. Once youíve added your settings to the file, within the first section of the script, all you have to do is upload it to your Freeola web space.

You can download the script as a zip file right away, open it up in Notepad (or the Mac or Linux equivalent), and create the required settings, as detailed below.

You may get a dialog box that tells you Windows doesnít understand the PHP file type (which is .php). If this happens, set it so PHP files are opened up in Notepad, and ensure you tick the "Always use this program to open this type of file" option, so you donít have to see this dialog box every time you try to edit a PHP file.

Adding your own settings!

The script is split in to two sections. Section 1 is where youíll need to add your image and web address information for each random image you wish to show. Section 2 is the pre-written script, and should not be altered.

The example in this guide will build random images and links for various Freeola web pages, which is online for you to see, and includes the PHP source code highlighted below it.

With that, lets get in to it.

Setting the folder name that contains all the images!

The first thing youíll need to do is create a variable that contains the name of the web folder that your images are stored in, followed by a forward slash (/). For example:

$image_folder = "freeola-random-images/";

Ö which means our example folder is called freeola-random-images.

Copy and paste the above example in to your version of the downloaded PHP file, within Section 1, substituting freeola-random-images for whatever name you have given to your image folder.

Creating the image and link details!

You can add any number of image and link combinations to this script, via an array named $images, which will store an entry for each random image you wish to show.

Each array entry will in itself contain an array, which is often referred to as a multidimensional array. Each entry should contain 4 values, and be set out in the following manor:


$images[] = array("file name","alt text","web address","title text");


The information per entry needed will be:

1. The file name given to the image, that will appear within the src attribute of the element. This is required for this feature to work.

2. The alt text that refers to the image, that will appear within the alt attribute of the element. This is required for this feature to work, as it will appear in place of any missing image.

3. The web address that the image will link to, that will appear within the href attribute of the element. This is required for this feature to work.

4. The title text that the web browser will display as a tool-tip when the user hovers over the image, and will appear within the title attribute of the
element. This is optional, and must be left blank (and not removed) if no text is required.

If the randomly selected entry does not have four values, it will not work, and instead output an HTML comment: , where x amount will be the number found. This will only occur if you do not include four values within your array, for example, the first two below contain the correct amount, whereas the two after do not:


$images[] = array("file name","alt text","web address","title text");
$images[] = array("file name","alt text","web address","title text");
$images[] = array("file name","web address","title text");
$images[] = array("file name","web address");


The last two examples are missing one and two values respectively, and will cause a strange result as the script expects the second value to be the alt text, not a web address. If you do not wish to set any title text, simply write in an empty value, for example:


$images[] = array("file name","alt text","web address","");


A full example for our Freeola version may look like this:


$images[] = array("cheap-domain-names.gif",
"GetDotted",
"http://getdotted.com",
"GetDotted domain names");


The code above is split to multiple lines in this guide, but can appear as a single line within your script. If we were to want three entries, the code may look like this:


// Entry 1.
$images[] = array("cheap-domain-names.gif",
"GetDotted",
"http://getdotted.com",
"GetDotted domain names");

// Entry 2.
$images[] = array("freeola-bingo-logo.gif",
"Freeola Bingo",
"http://freeola.com/bingo/",
"Freeola Bingo, play today");

// Entry 3.
$images[] = array("freeola-main.gif",
"Freeola",
"http://freeola.com",
"Freeola home page");


Remember, each entry must start with $images[].

Formatting the image!

This script outputs the random image pretty much as-is, without any presentation added to it by default, but does include the option to add some formatting to your random image if youíd prefer.

Some of these settings are considered "depreciated", and replaced with CSS. That doesnít mean that web browsers suddenly stop supporting these settings, however, so if youíre unfamiliar with CSS, this script still makes use of them.

If youíd prefer to use CSS to add your own styles, the element also includes id="randomimage", which will allow you to reference it directly within any style sheet.

Note, that some of the variables use quotation marks, while others do not. If youíre using text as a value, such as $align = "left" or $align = "middle", quotation marks are required, whereas if youíre using numbers, then quotes are not required.

All of these settings are optional. If you donít want to use them, donít add anything else to your script.

Image width and height!

If you intend on using images that are all the same size, you can set this out-right by setting the $width and $height variables respectively. The values should match the width and height in pixels, and not contain the quotation marks, for example:


$width = 468;
$height = 60;


If youíre using a variety of image sizes, setting the $width and $height values to "auto" (including the quotes) will cause the script to find the image sizes for you:


$width = "auto";
$height = "auto";


If you set only one of the values to "auto", this will cause both to be automatically looked for, so the code below would not work as you may expect:


$width = "auto";
$height = 60;


Our Freeola example uses the auto setting.

Image border!

When an image is turned in to a link, by default it will contain a blue border, highlighting the fact that it is a link to the user. If you donít want this to be the case, you can create the $border variable, and set it to 0 (zero, without quotes):


$border = 0;


Ö which will remove it completely. To make it bigger, you can set this to a higher value, such as 7:


$border = 7;


Our Freeola example uses this value, though in the real world, youíd unlikely want to do the same.

Image alignment!

You can align an image based on itís surrounding text, by creating the $align variable. This variable requires quotes, and can contain the values "bottom", "middle", "top", "left" or "right", for example:


$align = "left";


Any other value set for this variable, besides the five mentioned, will be ignored. The Freeola example does not make use of this variable.

Image spacing!

You can set additional spacing around the image by creating either the
$hspace (horizontal spacing, left and right) or $vspace (vertical spacing, top and bottom) variables. Each one should be a number, and without quotation marks, for example:


$hspace = 170;
$vspace = 70;


Our Freeola example contains a horizontal spacing of 170, and a vertical spacing of 70, though again, in the real world, you would probably use a much lower value for each.

Image as a map!

If youíre creating an image map out of your random images, you will need to set the $usemap variable, with quotes, and use the value that appears within your HTML code, for example:


$usemap = "myimagemap";


Our current Freeola example isnít an image map, so we wonít be including this variable.

Image code for an XHTML page!

If you donít know what XHTML is, chances are you wonít need this setting, and can skip past it. For those that do, setting this value to "yes" will add the required forward slash (/) to the end of the element. Any other value will be ignored.

$xhtml = "yes";

Again, our Freeola example doesnít create this variable.

Including the random image within your web page!

To include a random image and link in your web pages, copy and paste the code below in to the appropriate place within each web page file.


if ([email protected] "random.php")
echo "\n";
?>


Remember that each web page will need to be a PHP file (ending in .php) for the code to work. If you place it within an HTML web page (.htm or .html), a random image will not appear.

If youíve decided to rename the PHP script provided, you will need to alter the above to reflect this, changing random.php to reference the new file name given.

The code above contains a little error handling, and will not produce the standard PHP error message is the file cannot be referenced to, for whatever reason. In place, a standard HTML comment will be included in the source code (that will not appear on screen), which you can view if you use your web browsers "View Source" feature.

Ö and youíre done!

Should you have any problems when trying to make use of the script provided, feel free to post a question in this thread, and I (and Iím sure others) will try my best to assist. If Iíve made an error in the PHP script provided, I will get this corrected as soon as I can, and offer my apologies in advance.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
There have been no replies to this thread yet.
Sun 18/03/07 at 23:34:
cjh
Regular
"It goes so quickly"
Posts: 4,083
PHP Script: Random Image Generator + Links

If you head over to Freeolaís PHP Scripting support pages, you will see that they offer you a "Random Image Generator" script, free of charge.

While this is a handy little script, it doesnít allow for making the images in to hyperlinks, which you may wish to do.

This guide will take you through the process of adapting a pre-written script (linked to below) to add a random image generator, with links, to your web site, which is suitable for a basic ad-rotation feature on your web site (among others).

This guide assumes an understanding of HTML, and a little understanding of PHP. You may want to have a look over the "A quick introduction to PHP, a server-side scripting language"* article within this forum if youíre unfamiliar with the scripting language, as this script involves you adding your own variable and array data.

*Freeola character limit prevented the direct linking to this article.

Download the script!

This is a pre-written PHP script, and only requires you to add your preferred settings, as described in this guide. Once youíve added your settings to the file, within the first section of the script, all you have to do is upload it to your Freeola web space.

You can download the script as a zip file right away, open it up in Notepad (or the Mac or Linux equivalent), and create the required settings, as detailed below.

You may get a dialog box that tells you Windows doesnít understand the PHP file type (which is .php). If this happens, set it so PHP files are opened up in Notepad, and ensure you tick the "Always use this program to open this type of file" option, so you donít have to see this dialog box every time you try to edit a PHP file.

Adding your own settings!

The script is split in to two sections. Section 1 is where youíll need to add your image and web address information for each random image you wish to show. Section 2 is the pre-written script, and should not be altered.

The example in this guide will build random images and links for various Freeola web pages, which is online for you to see, and includes the PHP source code highlighted below it.

With that, lets get in to it.

Setting the folder name that contains all the images!

The first thing youíll need to do is create a variable that contains the name of the web folder that your images are stored in, followed by a forward slash (/). For example:

$image_folder = "freeola-random-images/";

Ö which means our example folder is called freeola-random-images.

Copy and paste the above example in to your version of the downloaded PHP file, within Section 1, substituting freeola-random-images for whatever name you have given to your image folder.

Creating the image and link details!

You can add any number of image and link combinations to this script, via an array named $images, which will store an entry for each random image you wish to show.

Each array entry will in itself contain an array, which is often referred to as a multidimensional array. Each entry should contain 4 values, and be set out in the following manor:


$images[] = array("file name","alt text","web address","title text");


The information per entry needed will be:

1. The file name given to the image, that will appear within the src attribute of the element. This is required for this feature to work.

2. The alt text that refers to the image, that will appear within the alt attribute of the element. This is required for this feature to work, as it will appear in place of any missing image.

3. The web address that the image will link to, that will appear within the href attribute of the element. This is required for this feature to work.

4. The title text that the web browser will display as a tool-tip when the user hovers over the image, and will appear within the title attribute of the
element. This is optional, and must be left blank (and not removed) if no text is required.

If the randomly selected entry does not have four values, it will not work, and instead output an HTML comment: , where x amount will be the number found. This will only occur if you do not include four values within your array, for example, the first two below contain the correct amount, whereas the two after do not:


$images[] = array("file name","alt text","web address","title text");
$images[] = array("file name","alt text","web address","title text");
$images[] = array("file name","web address","title text");
$images[] = array("file name","web address");


The last two examples are missing one and two values respectively, and will cause a strange result as the script expects the second value to be the alt text, not a web address. If you do not wish to set any title text, simply write in an empty value, for example:


$images[] = array("file name","alt text","web address","");


A full example for our Freeola version may look like this:


$images[] = array("cheap-domain-names.gif",
"GetDotted",
"http://getdotted.com",
"GetDotted domain names");


The code above is split to multiple lines in this guide, but can appear as a single line within your script. If we were to want three entries, the code may look like this:


// Entry 1.
$images[] = array("cheap-domain-names.gif",
"GetDotted",
"http://getdotted.com",
"GetDotted domain names");

// Entry 2.
$images[] = array("freeola-bingo-logo.gif",
"Freeola Bingo",
"http://freeola.com/bingo/",
"Freeola Bingo, play today");

// Entry 3.
$images[] = array("freeola-main.gif",
"Freeola",
"http://freeola.com",
"Freeola home page");


Remember, each entry must start with $images[].

Formatting the image!

This script outputs the random image pretty much as-is, without any presentation added to it by default, but does include the option to add some formatting to your random image if youíd prefer.

Some of these settings are considered "depreciated", and replaced with CSS. That doesnít mean that web browsers suddenly stop supporting these settings, however, so if youíre unfamiliar with CSS, this script still makes use of them.

If youíd prefer to use CSS to add your own styles, the element also includes id="randomimage", which will allow you to reference it directly within any style sheet.

Note, that some of the variables use quotation marks, while others do not. If youíre using text as a value, such as $align = "left" or $align = "middle", quotation marks are required, whereas if youíre using numbers, then quotes are not required.

All of these settings are optional. If you donít want to use them, donít add anything else to your script.

Image width and height!

If you intend on using images that are all the same size, you can set this out-right by setting the $width and $height variables respectively. The values should match the width and height in pixels, and not contain the quotation marks, for example:


$width = 468;
$height = 60;


If youíre using a variety of image sizes, setting the $width and $height values to "auto" (including the quotes) will cause the script to find the image sizes for you:


$width = "auto";
$height = "auto";


If you set only one of the values to "auto", this will cause both to be automatically looked for, so the code below would not work as you may expect:


$width = "auto";
$height = 60;


Our Freeola example uses the auto setting.

Image border!

When an image is turned in to a link, by default it will contain a blue border, highlighting the fact that it is a link to the user. If you donít want this to be the case, you can create the $border variable, and set it to 0 (zero, without quotes):


$border = 0;


Ö which will remove it completely. To make it bigger, you can set this to a higher value, such as 7:


$border = 7;


Our Freeola example uses this value, though in the real world, youíd unlikely want to do the same.

Image alignment!

You can align an image based on itís surrounding text, by creating the $align variable. This variable requires quotes, and can contain the values "bottom", "middle", "top", "left" or "right", for example:


$align = "left";


Any other value set for this variable, besides the five mentioned, will be ignored. The Freeola example does not make use of this variable.

Image spacing!

You can set additional spacing around the image by creating either the
$hspace (horizontal spacing, left and right) or $vspace (vertical spacing, top and bottom) variables. Each one should be a number, and without quotation marks, for example:


$hspace = 170;
$vspace = 70;


Our Freeola example contains a horizontal spacing of 170, and a vertical spacing of 70, though again, in the real world, you would probably use a much lower value for each.

Image as a map!

If youíre creating an image map out of your random images, you will need to set the $usemap variable, with quotes, and use the value that appears within your HTML code, for example:


$usemap = "myimagemap";


Our current Freeola example isnít an image map, so we wonít be including this variable.

Image code for an XHTML page!

If you donít know what XHTML is, chances are you wonít need this setting, and can skip past it. For those that do, setting this value to "yes" will add the required forward slash (/) to the end of the element. Any other value will be ignored.

$xhtml = "yes";

Again, our Freeola example doesnít create this variable.

Including the random image within your web page!

To include a random image and link in your web pages, copy and paste the code below in to the appropriate place within each web page file.


if ([email protected] "random.php")
echo "\n";
?>


Remember that each web page will need to be a PHP file (ending in .php) for the code to work. If you place it within an HTML web page (.htm or .html), a random image will not appear.

If youíve decided to rename the PHP script provided, you will need to alter the above to reflect this, changing random.php to reference the new file name given.

The code above contains a little error handling, and will not produce the standard PHP error message is the file cannot be referenced to, for whatever reason. In place, a standard HTML comment will be included in the source code (that will not appear on screen), which you can view if you use your web browsers "View Source" feature.

Ö and youíre done!

Should you have any problems when trying to make use of the script provided, feel free to post a question in this thread, and I (and Iím sure others) will try my best to assist. If Iíve made an error in the PHP script provided, I will get this corrected as soon as I can, and offer my apologies in advance.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment

Tell us what you think!

Live Chat is offline

Live Chat is available:
9am to 6:30pm Monday to Friday (excluding bank holidays).

01376 55 60 60

Send us a ticket.