[Solved] Codeigniter / Bootstrap Question

On my controller I count how many files are in my folder

PHP Code:

$data['files_total'] = count($files); 


But on my view for every 3 files I would like to be able to add new bootstrap class="row". But do not know best solution.

Currently I have the bootstrap class="row" out side of my foreach loop on view.

Question: What would be the best solution any examples?

PHP Code:

<div class="modal-dialog modal-lg" role="document">
        
    <div class="modal-content">
          
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>

          <div class="modal-body">

        <div class="row">

        <?php foreach ($images as $image) {?>

        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">

            <?php if ($image['type'] == 'directory') {?>

                <a href="<?php echo $image['href'];?>"><?php echo $image['name'];?></a>

            <?php }?>

            <?php if ($image['type'] == 'image') {?>

                <div class="img-thumbnail"><img src="<?php echo $image['thumb'];?>" class="img-responsive"></div>
                <p><?php echo $image['name'];?></p>

            <?php }?>

        </div>    

        <?php }?>

        </div>

        </div>

    </div>

</div> 


Controller

PHP Code:

<?php

class Filemanager extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('upload');
    }

    public function index($results = NULL) {
        $data['title'] = 'File Manager';

        $this_input_get_directory = $this->input->get('directory');

        if (isset($this_input_get_directory)) {
            $directory = scandir(FCPATH . 'images/catalog/' . $this_input_get_directory . '/', 1);
        } else {
            $directory = scandir(FCPATH . 'images/catalog/', 1);
        }

        $data['images'] = array();

        $files = array_diff($directory, array('.', '..'));

        $data['files_total'] = count($files);

        foreach ($files as $file => $value) {

            $url = '';

            if (isset($this_input_get_directory)) {
                $url .= $this_input_get_directory . '/';
            } else {
                $url .= '';
            }  

            if (is_dir(FCPATH . 'images/catalog/' . $url . $value)) {

                $data['images'][] = array(
                    'thumb' => '',
                    'type' => 'directory',
                    'href' => site_url('filemanager') . '?directory='. $url . $value,
                    'name' => $value
                );    

            } elseif (is_file(FCPATH . 'images/catalog/' . $url . $value)) {

                $data['images'][] = array(
                    'thumb' => $this->resize($value, 100, 100),
                    'type' => 'image',
                    'name' => $value
                );    
            }
        }

        $url = '';

        if (isset($this_input_get_directory)) {
            $url .= $this_input_get_directory . '/';
        } else {
            $url .= '';
        }  

        $data['upload'] = site_url('filemanager/upload') . '?' . $url;

        return $this->load->view('template/common/filemanager_view', $data);
    }
} 


Attached Files

  Filemanager.php (Size: 3.43 KB / Downloads: 123)
  filemanager_view.php (Size: 954 bytes / Downloads: 117)

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

I have solved it now.

For Javascript Code I use

PHP Code:

<script type="text/javascript">
$.fn.chunk = function(size) {
  var arr = [];
  for (var i = 0; i < this.length; i += size) {
    arr.push(this.slice(i, i + size));
  }
  return this.pushStack(arr, "chunk", size);
}
$(".modal-body > div").chunk(3).wrap('<div class="row"></div>');
 $(".data-image").addClass("col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center");
</script> 


And then on the view also I have removed the old row class and then also removed bootstrap columns i foreach loop and now add them by the javascript code above.

PHP Code:

<div class="modal-dialog modal-lg" role="document">
        
    <div class="modal-content">
          
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>

          <div class="modal-body">

        <?php foreach ($images as $image) {?>

            <?php if ($image['type'] == 'image') {?>

                <div class="data-image">
                <span class="img-thumbnail"><img src="<?php echo $image['thumb'];?>" class="img-responsive"></span>
                <p><?php echo $image['name'];?></p>
                </div>
                

            <?php }?>

        <?php }?>

        </div>

    </div>

</div>    

<script type="text/javascript">
$.fn.chunk = function(size) {
  var arr = [];
  for (var i = 0; i < this.length; i += size) {
    arr.push(this.slice(i, i + size));
  }
  return this.pushStack(arr, "chunk", size);
}
$(".modal-body > div").chunk(3).wrap('<div class="row"></div>');
 $(".data-image").addClass("col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center");
</script> 


There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!