How to position the images in this php code?

Question

I have this code which I am using to display random images. But the images show up at the top left corner of the site. I want to be able to position the image as I wish. What are the changes I have to do in the code order to the above mentioned. Here's the code--

/* 
 * Name your images 1.jpg, 2.jpg etc. 
 * 
 * Add this line to your page where you want the images to   * appear: <?php include"randomimage.php"; ?> 
 */  

// Change this to the total number of images in the folder 
$total = "2"; 

// Change to the type of files to use eg. .jpg or .gif 
$file_type = ".jpg"; 

// Change to the location of the folder containing the images 
$image_folder = "sample.url.com"; 

// You do not need to edit below this line 

$start = "1"; 

$random = mt_rand($start, $total); 

$image_name = $random . $file_type; 

echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\ />"; 

?>

Thanks in advance

Answer 1

This would be a CSS solution, PHP can't position images. With CSS you can position things in many different ways:

1. Using margins (eg, margin: top right bottom left ;)
2. Using paddings (eg, padding: top right bottom left; )
3. Using floats (eg, float: right or left; )
4. Using positions (eg, position: absolute or relative; and then using top/left and bottom/right to position).

For example, you can center your image to the middle of the page using margins. Add this to the top of your page:

<style type="text/css"> /*Initializing CSS code*/
img { margin: 0 auto; }
</style>

Or you can float the image to the far right of your page using a float, assuming the parent object has a width of 100%:

<style type="text/css"> /*Initializing CSS code*/
img { float: right; }
</style>

Or using an absolute position to position it at the bottom right:

<style type="text/css"> /*Initializing CSS code*/
img {
    position: absolute;
    right: 0px;
    bottom: 0px;
}
</style>

You may want to read a CSS tutorial to learn the differences between all the positioning techniques and when to use them and where + little hacks, annoyances and incidents that come when you use each of them.

http://www.google.com/search?q=css+tutorial

Answer 2

You need to modify your html code.

In your case you need to change value of this string:

echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\ />"; 

Like this:

echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\ style=\"Your css style goes here\"/>";

Please learn some of the basics before asking on Stack Overflow.

http://www.w3.org/Style/CSS/learning.en.html css guides.

Answer 3

While the CSS answers are good, not every project will need or want CSS. This alternative solution, given your code, works just fine within the PHP tags:

(I had to put a space after the first < or it wouldn't display properly on this page. Just remove that space from each line to make it work)

Align Right:

< right>  

< img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";

< /right>

Align Center:

< center>  

< img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";

< /center>

Align Left:

< left>  

< img src=\"$image_folder/$image_name\" alt=\"$image_name\ />";

< /left>

This is technically an HTML solution, but since it works within PHP tags you can use this to effectively position anything you like.