GetDotted Domains

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

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

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

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 = "[B]freeola-random-images[/B]/";

… 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 [B]freeola-random-images[/B] 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("[B]file name[/B]","[B]alt text[/B]","[B]web address[/B]","[B]title text[/B]");


The information per entry needed will be:

1. The [B]file name[/B] given to the image, that will appear within the src attribute of the <img> element. This is required for this feature to work.

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

3. The [B]web address[/B] that the image will link to, that will appear within the href attribute of the <a> element. This is required for this feature to work.

4. The [B]title text[/B] 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 <a> 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: <!-- 4 values expected, but [I]x amount[/I] found. -->, where [I]x amount[/I] 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("[B]file name[/B]","[B]alt text[/B]","[B]web address[/B]","[B]title text[/B]");
$images[] = array("[B]file name[/B]","[B]alt text[/B]","[B]web address[/B]","[B]title text[/B]");
$images[] = array("[B]file name[/B]","[B]web address[/B]","[B]title text[/B]");
$images[] = array("[B]file name[/B]","[B]web address[/B]");


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 [B]alt text[/B], not a [B]web address[/B]. If you do not wish to set any [B]title text[/B], simply write in an empty value, for example:


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


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:


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

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

[S]// Entry 3.[/S]
$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 <img> element also includes id="[B]randomimage[/B]", 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 = "[I]left[/I]" or $align = "[I]middle[/I]", 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 <map name="myimagemap"> 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 <img> 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.


<?php
if (!@include "[B]random.php[/B]")
echo "<!-- Could not include referenced file. -->\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 [B]random.php[/B] 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
Regular
"It goes so quickly"
Posts: 4,083
[B][U]PHP Script: Random Image Generator + Links[/U][/B]

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 = "[B]freeola-random-images[/B]/";

… 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 [B]freeola-random-images[/B] 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("[B]file name[/B]","[B]alt text[/B]","[B]web address[/B]","[B]title text[/B]");


The information per entry needed will be:

1. The [B]file name[/B] given to the image, that will appear within the src attribute of the <img> element. This is required for this feature to work.

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

3. The [B]web address[/B] that the image will link to, that will appear within the href attribute of the <a> element. This is required for this feature to work.

4. The [B]title text[/B] 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 <a> 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: <!-- 4 values expected, but [I]x amount[/I] found. -->, where [I]x amount[/I] 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("[B]file name[/B]","[B]alt text[/B]","[B]web address[/B]","[B]title text[/B]");
$images[] = array("[B]file name[/B]","[B]alt text[/B]","[B]web address[/B]","[B]title text[/B]");
$images[] = array("[B]file name[/B]","[B]web address[/B]","[B]title text[/B]");
$images[] = array("[B]file name[/B]","[B]web address[/B]");


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 [B]alt text[/B], not a [B]web address[/B]. If you do not wish to set any [B]title text[/B], simply write in an empty value, for example:


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


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:


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

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

[S]// Entry 3.[/S]
$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 <img> element also includes id="[B]randomimage[/B]", 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 = "[I]left[/I]" or $align = "[I]middle[/I]", 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 <map name="myimagemap"> 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 <img> 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.


<?php
if (!@include "[B]random.php[/B]")
echo "<!-- Could not include referenced file. -->\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 [B]random.php[/B] 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 & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

First Class!
I feel that your service on this occasion was absolutely first class - a model of excellence. After this, I hope to stay with Freeola for a long time!
Excellent support service!
I have always found the support staff to provide an excellent service on every occasion I've called.
Ben

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.