trying to put title below image in a row

[scmeeker]

I'm displaying a row of images but I can't seem to get the title to stay under the image. When I try to insert a <br> or <br />  the the $item_title, it changes the whole dynamics of the row, placing the $item_title next to the image rather than under it.

 

Here is the code:

 

$image_row .= "<tr height=\"200\"><td ><img src=\"image_files/{$item_photo}\" alt=\"{$item_name}\" /><br />{$item_title}    </td></tr> </table>";

[Psycho]

This is technically an HTML problem not a PHP problem. But, since you say you are displaying "a row of images" I assume that line above is within a loop. Well, you have TR tags and an ending TABLE tag. The TR and TABLE tags would need to be outside the loop.

[scmeeker]

I tried this but its still not working properly:

 

$image_row .= "<tr height=\"200\">";
$image_row .= "<td ><img src=\"image_files/{$item_photo}\" alt=\"{$item_name}\" /><br />
{$item_title}    </td>";
$image_row .= "</tr> </table>";

[hcdarkmage]

I think what mjdamoto was getting at was, "please show the whole loop so we can help you fix it." You are just throwing the same code at us. What you did didn't change anything because you just reworded the same code to act exactly the same as the first code you showed us.

[scmeeker]

Sorry, here is the code:

 

//validate item
$get_item_sql = mysql_query("SELECT s.item_id, s.artist, p.id, p.thumb, p.username, p.title, p.name FROM product AS p LEFT JOIN picks AS s on s.item_id = p.id WHERE s.date = CURDATE()")
or die(mysql_error());

if (mysql_num_rows($get_item_sql) < 1) {
   //invalid item
   $display_block .= "<p><em>Invalid item selection.</em></p>";
} else {
   //valid item, get info
while ($item_info = mysql_fetch_array($get_item_sql)) {
    $item_id = $item_info['item_id'];
$item_artist = $item_info['artist'];
$item_photo = $item_info['thumb'];
$item_username = $item_info['username'];
$item_title = $item_info['title'];
        $item_name = $item_info['name'];

$image_row .= "<tr height=\"200\">";
$image_row .= "<td ><img src=\"image_files/{$item_photo}\" alt=\"{$item_name}\" /><br />
{$item_title}    </td>";
$image_row .= "</tr> </table>";
   }
}

[hcdarkmage]

First off, I can see there is no starting <table> tag, just the ending tag. Scond you may want to try something like this:

while ($item_info = mysql_fetch_array($get_item_sql)) {
    $item_id = $item_info['item_id'];
    $item_artist = $item_info['artist'];
    $item_photo = $item_info['thumb'];
    $item_username = $item_info['username'];
    $item_title = $item_info['title'];
    $item_name = $item_info['name'];
    $image_row = "<tr height=\"200\"><td ><img src=\"image_files/{$item_photo}\" alt=\"{$item_name}\" /></td></tr>";
    $image_row .= "<tr><td align=\"center\">{$item_title}</td></tr>";
}

 

then use your </table> tag

[scmeeker]

It still doesn't work. And the reason I left the beginning of the table tag is so that the images would be shown in a row next to each other, rather than stacked.

 

The titles are still showing up next the image rather than below it. Any other suggestions?

 

Thanks.

[Psycho]

And the reason I left the beginning of the table tag is so that the images would be shown in a row next to each other, rather than stacked.

 

So, why would you include a "</table>" at the end of every image! That was the exact issue I mentioned in the first reply. You are also creating a ROW for every image which is screwing it up. This is an HTML issue that is caused by faulty logic in your PH code. If you were to view the source of the rendered HTML page the errors should be obvious.

 

You area slo grabbing way more fields than you are using and there is no need to create variables for each from the db results just to use it once.

 

Try this

//validate item
$query = "SELECT p.thumb, p.title, p.name
          FROM product AS p
          LEFT JOIN picks AS s on s.item_id = p.id
          WHERE s.date = CURDATE()";
$get_item_sql = mysql_query($query) or die(mysql_error());
    
if (mysql_num_rows($get_item_sql) < 1)
{
   //invalid item
   $display_block .= "<p><em>Invalid item selection.</em></p>";
}
else
{
    //Start the table and row
    $display_block  = "<table>\n";
    $display_block .= "<tr>\n";
    
    //valid item, get info
    while ($item = mysql_fetch_array($get_item_sql))
    {
        $item_id = $item_info['item_id'];
        $item_artist = $item_info['artist'];
            $item_photo = $item_info['thumb'];
        $item_username = $item_info['username'];
            $item_title = $item_info['title'];
            $item_name = $item_info['name'];
        $display_block .= "<td >";
        $display_block .= "<img src=\"image_files/{$item['thumb']}\" alt=\"{$item['name']}\" />";
        $display_block .= "<br />{$item['title']}    "
        $display_block .= "</td>\n";
    
    //Close the row and table
    $display_block .= "</tr>\n";
    $display_block .= "</table>";
   }
}

[scmeeker]

I tried inserting this code like you suggested but the images still stack, although the title is below it now.

[Psycho]

Doh! I made the same error as you. Move the two lines that close the row and table to after the while loop closing bracket.

 

As I alluded to before: Check your output! If you looked at the actual rendred HTML you would see somethign like this:

 

<table>
<tr>
<td><img src="somfiel.jpg"> Title</td>
</tr>
</table>

<td><img src="somfiel.jpg"> Title</td>
</tr>
</table>

<td><img src="somfiel.jpg"> Title</td>
</tr>
</table>

[scmeeker]

Thanks! It's working fine now but I was wondering if there was a way to limit the number shown per row? It doesn't want to stay within my css box.

[Psycho]

Define the maximum columns you want at the top

<?php
    
$max_columns = 5;
    
//validate item
$query = "SELECT p.thumb, p.title, p.name
          FROM product AS p
          LEFT JOIN picks AS s on s.item_id = p.id
          WHERE s.date = CURDATE()";
$get_item_sql = mysql_query($query) or die(mysql_error());
    
if (mysql_num_rows($get_item_sql) < 1)
{
   //invalid item
   $display_block .= "<p><em>Invalid item selection.</em></p>";
}
else
{
    //Start the table and row
    $display_block  = "<table>\n";
    
    //valid item, get info
    $item_count = 0;
    while ($item = mysql_fetch_array($get_item_sql))
    {
        //Create opening TR if needed
        if($item_count%$max_columns==0)
        {
            $display_block .= "<tr>\n";
        }

        $item_count++;
        $display_block .= "<td >";
        $display_block .= "<img src=\"image_files/{$item['thumb']}\" alt=\"{$item['name']}\" />";
        $display_block .= "<br />{$item['title']}    "
        $display_block .= "</td>\n";

        //Close TR if max reached
        if($item_count%$max_columns==0)
        {
            $display_block .= "</tr>\n";
        }
    }

    //Close TR if any are left
    if($item_count%$max_columns>0)
    {
        $display_block .= "</tr>\n";
    }
    
    //Close the row and table
    $display_block .= "</table>";
}
    
?>

[scmeeker]

Thank you SO much! It works great now and I've been struggling with it.

 

I REALLY appreciate your help.