Group of images in gird of the bootstrap getting out of the loop

Question

Group of images in gird of the bootstrap getting out of the loop

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a list of images where I'm using grid to organize them, getting the exact amount I need for lines. With this I looped to control the grids and I also have the loop of the images.

Question: What could you do to fix why grids and images are getting separated, as you can see in: view-source google chrome

If you'd like to see more about the grid, I picked up this post: Grid bootstrap getting misaligned on panel with results brought from the bank

And as you can see also in the image below, this error makes my images stay under one another.

php:

<divclass="container">   
    <div class="row">
      <?php 
      $i = 0;
      $row = 0; 
      while($i < $count) : 
        if($row == 6){ 
         echo '</div><div class="row"> ';
         $row = 0;
       } 
       ?>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
          <?php
          $nofoto = '../../images/nofoto.jpg';
          while($rowDadosFoto = $queryDadosFoto->fetch()) {
            $foto = $rowDadosFoto['FOTO'];
            if($foto >= 1){
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/".$rowDadosFoto['FOTO']."' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }else{
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='$nofoto' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }
          }
          ?>
        </ul>
        <?php
        $row++; 
        $i++;
      endwhile; 
      ?>
    </div>     
  </div>

view-source google chrome

<div class="container">   
    <div class="row">

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
          <li id='image_li_4444' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/4444.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_22233' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/nofoto.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_3333' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/3333.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_5555' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/5555.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_123456' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/123456.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_1111' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/1111.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_364526' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/364526.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_7777' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/7777.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li><li id='image_li_2222' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/2222.jpg' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>        </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
        </div><div class="row">        
       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
            </div>     
  </div>

php loop imagem grid bootstrap-3

asked by anonymous 22.11.2017 / 09:45

2 answers

Text box to determine amount of digit usage How do I force .htaccess to direct a subdomain into a folder?

score 1 · Answer 1

There is a missing div closing below </ul>

<div class="container">   
    <div class="row">
      <?php 
      $i = 0;
      $row = 0; 
      while($i < $count) : 
        if($row == 6){ 
         echo '</div><div class="row"> ';
         $row = 0;
       } 
       ?>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
          <?php
          $nofoto = '../../images/nofoto.jpg';
          while($rowDadosFoto = $queryDadosFoto->fetch()) {
            $foto = $rowDadosFoto['FOTO'];
            if($foto >= 1){
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='../../images/produtos/".$rowDadosFoto['FOTO']."' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }else{
              echo"<li id='image_li_".$rowDadosFoto['COD_PRODUTO']."' 
              class='ui-sortable-handle'>
              <a href='javascript:void(0);' style='float:none;' class='image_link'>
              <img src='$nofoto' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
              </a>
              </li>"; 
            }
          }
          ?>
        </ul>
        </div>
        <?php
        $row++; 
        $i++;
      endwhile; 
      ?>
    </div>     
  </div>

score 0 · Answer 2

You are doing all iteration inside a col-md-2, so the images are all in one column and there is a lot of column remaining as you see at the end:

<div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
        </div><div class="row">        
       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>

       <div class="col-md-2">
        <ul class="reorder_ul reorder-photos-list">
                  </ul>
            </div>

If it is an image per column, you do not need an ul. I did not understand how your design would look but I tried to do something similar.

<div class="container">   
    <div class="row">
        <?php while($rowDadosFoto = $queryDadosFoto->fetch()) : ?>
            <div class="col-md-2">
                <a href='javascript:void(0);' style='float:none;' class='image_link'>
                    <img src='../../images/<?= $rowDadosFoto['FOTO'] >= 1 ? 'produtos/'.$rowDadosFoto['FOTO'] : 'nofoto.jpg' ; ?>' class='img-responsive' style='vertical-align: middle;width:100px;height:100px;'>
                </a>
            </div>
        <?php endforeach; ?>

    </div>     
</div>