first i'm sorry title can't think other way how explain case. if want can edit it. here case have , can't figured out how made it. html part have 2 different div's , 3 columns of images. problem on column 1 , 3 there large images. html this:
<div class="row"> <!-- start row --> <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- first column --> <div class="small-box"> // image 800x533 </div> <div class="large-box"> // image 860x1068 </div> </div> <!-- end first column --> <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- second column --> <div class="small-box"> // image 800x533 </div> <div class="small-box"> // image 800x533 </div> <div class="small-box"> // image 800x533 </div> </div> <!-- end second column --> <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- third column --> <div class="large-box"> // image 860x1068 </div> <div class="small-box"> // image 800x533 </div> </div> this php part planning use. it's simple load images database.
$pdo = database::connect(); foreach($pdo->query("select * images order image_id limit 7") $row) { // load images images } database::disconnect(); how load them in 3 columns? there have , idea ho can done this? al images in 1 table.
here jsfiddle i've made how it's gallery. 2 images panda large-box.. others small-box. jsfiddle
assuming simple database table images[id|path|caption]. then, retrieving images like:
$images = []; $pdo = database::connect(); foreach($pdo->query("select * images order image_id limit 7") $row) { // load images images $images[] = [ 'path' => $row['path'], 'caption' => $row['caption'] ]; } database::disconnect(); next, can use html , use simple function output image. first, php function create image:
function image_html($image, $size = 'small') { return '<img src="' . $image['path'] . '" title="' . $image['caption'] . '" class="' . $size . '"/>'; } then html:
<div class="row"> <!-- start row --> <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- first column --> <div class="small-box"> // image 800x533 <?php echo image_html($images[0]); ?> </div> <div class="large-box"> // image 860x1068 <?php echo image_html($images[1], 'large'); ?> </div> </div> <!-- end first column --> <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- second column --> <div class="small-box"> // image 800x533 <?php echo image_html($images[2]); ?> </div> <div class="small-box"> // image 800x533 <?php echo image_html($images[3]); ?> </div> <div class="small-box"> // image 800x533 <?php echo image_html($images[4]); ?> </div> </div> <!-- end second column --> <div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- third column --> <div class="large-box"> // image 860x1068 <?php echo image_html($images[5], 'large'); ?> </div> <div class="small-box"> // image 800x533 <?php echo image_html($images[6]); ?> </div> </div> 