Zendie
Zendie

Reputation: 1174

Display Multiple images in html table column

I have an html row which display multiple images. Sometimes, number of images exceeds the screen width. So I want to display the images in the next row if the $columnNumber is a division of 3 ($columnNumber%3==0).

I have the following code to display images:

 $AllCommentImages = explode(",", $jsonArray[$jsonIndex]['Comment_Image']);
 $html.='<tr><td><b>Photos:</b></td></tr>';
 $columnNumber=0;
 $html.='<tr>';
 foreach($AllCommentImages  as $cimg) 
 {
    $commentmysock = getimagesize($cimg);
    $html.='<td><img style="border:15px solid white;border-radius:15px;" src="'.$cimg.'"'.$this->imageResize($commentmysock[0],$commentmysock[1], 200).'/></td>';
    $columnNumber++;                   
 }   
 $html.= '</tr>';

getimagesize is used to reduce the size of the images, the images all are in thumbnail size. I have used this code for pdf generation. I am not sure where to use $columnNumber%3==0 to get 3 images in a row.

Upvotes: 0

Views: 959

Answers (1)

Abdullah
Abdullah

Reputation: 637

should work like this

$AllCommentImages = explode(",", $jsonArray[$jsonIndex]['Comment_Image']);
$html.='<tr><td><b>Photos:</b></td></tr>';
$columnNumber=0;

foreach($AllCommentImages  as $cimg) 
{
    if($columnNumber%3==0) $html.='<tr>';
    $commentmysock = getimagesize($cimg);
    $html.='<td><img style="border:15px solid white;border-radius:15px;" src="'.$cimg.'"'.$this->imageResize($commentmysock[0],$commentmysock[1], 200).'/></td>';
    $columnNumber++;
    if($columnNumber%3==0) $html.='</tr>';
}   

while($columnNumber%3!=0){
    $html.='<td></td>';
    $columnNumber++;
}

$html.= '</tr>';

Upvotes: 1

Related Questions