Display Multiple images in html table column

Question

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.

Use bootsrap grid system <div class="col-4"> If you want to make this with table answer commend but you can write less code with bootsrap — Abdullah
– Abdullah, Commented Jul 18, 2019 at 0:26
I am using the above code to display table in a pdf(tcpdf). Restricted html access in tcpdf. So can't use bootstrap for this — Zendie
– Zendie, Commented Jul 18, 2019 at 0:29

Abdullah · Accepted Answer · 2019-07-18 00:54:42Z

1

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>';

edited Jul 18, 2019 at 0:54

answered Jul 18, 2019 at 0:36

Abdullah

63710 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zendie Over a year ago

Thank you for the help, but the page shows errors if the columnNumber is not a division of 3. Error is Undefined index: rows

Collectives™ on Stack Overflow

Display Multiple images in html table column

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related