How to combine these images as one?

[TeddyKiller]

I have an image script (see below) they all become square, and 1 size.

This will come up as a row of 24 images, although I'm wanting 3 rows of 8 images. It displays as 3 rows at the moment bcause its a div and all the images are seperate.

 

Though when they are combined as one image.. it'll be 1 long row.

 

So what I want, is all these images combined as 1 image in 3 rows.

 

<?php
$num_printed = 0;
$sql = mysql_query("SELECT Avatar FROM users WHERE Activated = '1' ORDER BY RAND() LIMIT 24");
if (mysql_num_rows($sql) > 0) {
  while ($item = mysql_fetch_array($sql)) {
      echo '<a href="#"><img src="../resize_image.php?file='.$item['Avatar'].'&size=75" title="" border="0" /></a>';
      $num_printed += 1;
  }
}
while( $num_printed < 24 ) {
    echo '<img src="resize_image.php?file=profile/photos/default/default.jpg&size=75" title="" border="0" />';
    $num_printed += 1;
}
?>

 

How can it be done? Thanks.

[DavidAM]

To get the row to break at 8, use the following right after incrementing num_printed:

$num_printed += 1;
if ( ($num_printed %  == 0) echo '<BR />';

 

You are probably going to have to use a little CSS to style the A, IMG and BR, to remove any spacing between the images (margin, padding, border) so they will line up

[Psycho]

<?php
$max_cols = 8;
$max_rows = 3;
$total_images = $max_cols * $max_rows;

$query = "SELECT Avatar
          FROM users
          WHERE Activated = '1'
          ORDER BY RAND()
          LIMIT {$total_images}";
$result = mysql_query($query);

if(!$result)
{
    echo "Error retrieving the images.";
}
else
{
    echo "<table>\n";
    for($img_count=0; $img_count<$total_images; $img_count++)
    {
        if(($img_count%$max_cols)==0)
        {
            echo "  <tr>\n";
        }
        if($img = mysql_fetch_array($result))
        {
            echo "    <td><a href=\"#\"><img src=\"../resize_image.php?file={$img['Avatar']}&size=75\" title=\"\" border=\"0\" /></a></td>\n";
        }
        else
        {
            echo "    <td><img src=\"resize_image.php?file=profile/photos/default/default.jpg&size=75\" title=\"\" border=\"0\" /></td>\n";
        }
        if(($img_count%$max_cols)==($max_cols-1))
        {
            echo "  </tr>\n";
        }

    }
    echo "<table>\n";
}
?>

[TeddyKiller]

Same issue remains, how can I echo it all as 1 image?

Does that code work that if there isn't 24 images to display, to display the remaining empty spaces with the default image?

[TeddyKiller]

To get the row to break at 8, use the following right after incrementing num_printed:

$num_printed += 1;
if ( ($num_printed %  == 0) echo '<BR />';

 

You are probably going to have to use a little CSS to style the A, IMG and BR, to remove any spacing between the images (margin, padding, border) so they will line up

That works fine.. but how about putting it all to one image still =/

[DavidAM]

What exactly do you mean by "putting it all into one image"?

 

Are you wanting to create a single image so you can output a single IMG tag to show all 24 images?  You will have to look into the image processing functions (http://us.php.net/manual/en/refs.utilspec.image.php). I have no experience with them so I can't help further.

 

Since you have an anchor around the ones that came from the database, I assumed you wanted it to APPEAR to be one image but actually be 24 different images allowing selection.  To make them APPEAR to be a single image, you will have to remove all spacing between them.  Spacing between elements comes from the MARGIN and/or PADDING and/or BORDER.  So that will take some CSS or in-line STYLE commands.

 

 

[Psycho]

Same issue remains, how can I echo it all as 1 image?

Does that code work that if there isn't 24 images to display, to display the remaining empty spaces with the default image?

 

Did you TRY that code??? If you want it to be literally 1 image then you will need to use image manipulation code to create a physical 1 image. That code will create a grid with all the images in a 3 x 8 table and, yes, it will correctly use the default image when there are less than 24. Just set the table properties so there is no cellpadding or cellspacing and all the images will be "smashed" together to appear as a single image.

[TeddyKiller]

Yes mjdamato I did try it. I just deactivated some people temporarily, and it does pull the default image.

Although.. the reason why I want it as one image, is because when the page loads.. it loads 1 at a time quickly, and slower for slow computers. So I want it put as 1 image...

I dont understand how I'd do it... can you help me?

[TeddyKiller]

any ideas?

thanks

[DavidAM]

OK, it helps when you explain the problem and what you want to happen.

 

The images display one at a time because the browser has to retrieve them from the server one at a time.  There are two ways I can think of to accomplish what you want.  (There may be others, but this is what I know)

 

1) Use image processing commands to create a single image.  This will take the server a while, so the page will appear to load slowly on slow computers, but it will be a single image.  Of course, then you have to deal with these image files cluttering up your disk space on the server.

 

2) Hide the DIV or TD or whatever holds these images.  Then use javascript to unhide the DIV in the BODY's onLoad event.  This will cause the images to all show at once, I think.

 

A third approach with a little different imapact would be to set all 24 images to the default, these will load quickly because the browser can retrieve a single image to show in all 24 places.  Then use Javascript to replace the ones you want replaced.  This will have the affect of showing the images one at a time, but they will be positioned properly as they load replacing the default image.  This may be rather complicated.

 

If you are concerned about the page re-arranging itself each time an image comes in, set the WIDTH and HEIGHT attributes of the IMG tag, so the browser will allocate the space before requesting the images.  This is the easiest solution (IMHO) and will probably provide the best look.

[TeddyKiller]

Actually.. come to think about it.. the images I have, are links to their profile.. (well.. will be) So having them as one image.. wouldn't allow a href's on all images am I right?

 

So.. for your 2nd option, I'll set display:none at the top of the page in style tags, then.. what would the body onload be?

<body onload="<style>#divid { display:block; }</style>">

??

 

but yeah. I'd like all images to display at the same time.

[DavidAM]

I'm not as fluent in JavaScript, but I think it would be something like:

document.getElementById("DIVid").style.display = "";

 

at least that's what I had to use in an app I'm working on now.  When I tried display="block" it did not work. So I'm guessing that because it is currently set to "none" clearing it causes the default action which is to show the DIV. 

 

DIVid is the ID you assign to the DIV in HTML

<DIV id="DIVid">...

[TeddyKiller]

Woudln't that display straight away? I thought of this..

if I set the style to none, and then after the loops, in another div.. or something.. put in the style to display it as block. If block dont work.. I could call a javascript function via what you mentioned above.

[TeddyKiller]

It does work.. but not as good as what I'm asking for. I never tried the javascript, I'm not sure how it'd actually work as it'd be an onload of the page.. rather than waiting for the content of the div to load, before displaying?