Need a way to dynamically determine the number of rows and columns for the main Monitors page. As the number of monitors and each monitors width is not static, we can't hard code these values anywhere - they have to be determined at display-time.

MonitorsController.php

<?php
  $monitors[0] = array(
    'id' => 1,
    'name' => 'front',
    'width' => 640
  );
  $monitors[1] = array(
    'id' => 2,
    'name' => 'back',
    'width' => 1280
  );
  $monitors[2] = array(
    'id' => 3,
    'name' => 'shed',
    'width' => 720
  );
  
  $this->set('monitors', $monitors);

  $screenWidth = 1400;
  $totalWidth = 0;
  $row = 1;

  foreach ($monitors as $key => $value)
  {
    $totalWidth .= $value['width']
    
    if ($totalWidth >= $screenWidth)
    {
      # We need another row because our width is too large for the user's screen
      $row++;
      # Reset total width for the next row
      $totalWidth = 0;
    }
    
    # Assign the monitor to a row
    $monitors[$key]['row'] = $row;
  }
  
  $this->set('rows', $row);
?>

MonitorsView.php

<?php  
  # For each row
  while ($r = 1; $r <= $rows; $r++)
  {
    # Output the enclosing div
    echo '<div class="row">';
    
    # For each monitor
    foreach ($monitors as $key => $value)
    {
        # If that monitor belongs in this row
        if ($value['row'] == $row)
        {
          # echo it out
          echo '<div class="thumbnail">';
          echo '<img src="$src" alt="$alt" />';
          echo '</div>';
        }
    }
    
    echo '</div>';
  }
?>