Device size support in Bootstrap Thumbnails and Grid column classes

I get these errors when viewing a view with thumbnail bootstrap settings set to default.

Notice: Undefined variable: columns in template_preprocess_views_bootstrap_thumbnail_plugin_style() (line 13 of /modules/contrib/views_bootstrap/templates/thumbnail/theme.inc).
Warning: Division by zero in _views_bootstrap_split_rows() (line 30 of /modules/contrib/views_bootstrap/views_bootstrap.module).
Warning: Division by zero in _views_bootstrap_split_rows() (line 31 of /modules/contrib/views_bootstrap/views_bootstrap.module).

This is the output:

<div class="views-bootstrap-thumbnail-plugin-style" id="views-bootstrap-thumbnail-1">
  
          <div class="row">
                  <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail">
           ........

I also get the same errors, any updates?

What about the grid format. The patch added columns per device for thumbnails but not for grid.

Excellent Work ! Thanks... work like a charm !

I updated the patch to do the same for the grid style plugin. I'll link from the other issue because the code in that issue is less performant/solid.

Superb cheers bud, will test asap

Patch does not apply cleanly

views-bootstrap-thumbnail-plugin-style.tpl:15

<div class="col col-lg-<?php print $column_type ?>">
to
<div class="<?php print $col_classes ?>">

thanks, thumbnail and carousel works well.

testing the rest

Spoke too soon.

sorry, media work well! not thumbnail

I get this error

Notice: Undefined variable: columns in template_preprocess_views_bootstrap_thumbnail_plugin_style() (line 13 of /sites/all/modules/contrib/views_bootstrap/templates/thumbnail/theme.inc).

Warning: Division by zero in _views_bootstrap_split_rows() (line 30 of /sites/all/modules/contrib/views_bootstrap/views_bootstrap.module).
Warning: Division by zero in _views_bootstrap_split_rows() (line 31 of /sites/all/modules/contrib/views_bootstrap/views_bootstrap.module).

extra small screen 1
small screen 2
meduim 3
large 4
desktop 6

no matter what settings i put in it only gives me 2 thumbnails on desktop large and medium and small. Extra small works and gives me 1

Grid does not work.

You only have an option to set the desktop size, no other screen sizes in between like thumbnail.

I tested all the other features this module offers and it is only thumbnail and grid that is not working, the rest works well so it could be close to put a stable bootstrap 3 out

thanks

I've tested the patch, and apart from it not applying cleanly to the templates (fixed by comparing patch.rej) grid seems to work for me so far :) Good work

I would really like to get this committed as I think it is a important bit of functionality and would like to see it be made "official".

Here's a re-roll of #8 against the latest 7.x-3.x.

Looks like we need more reviews of the patch before we can consider it ready.

#15 seems to work like a champ for me thank you so much for the patch. This functionality really adds a great deal to the module.

I can verify that this works.

This will break your existing tpl files (example: views-bootstrap-grid-plugin-style--myview-name.tpl.php).

#15 works great on the April 27 release.

Yes it works perfect. Thanks

#15 worked on the April 27 release as well. Thank you for the patch!

Does anyone who has reviewed #15 feel brave enough to change the issue status to RTBC?

Yes, I am brave.

Works like a charm and has moved it to production.
Have a look at my test site (this link will only live a few days)
It has a Carousel, Thumbnail, Grid, and Media views in it.
Only thing I have not tested is the export and import function of a bootastrap view.

It works for me, but I can't export/import the options.

How can I export this configuration to use with the features module ?

Thank you

@friera if you export the view in the normal features way, you should also be exporting the config.

Here is a new version that will export properly. The issue was that the options were not defined (with defaults) in the option_definition() function.

This seems to work except when resizing the browser window to the point that it changes the amount of results per row, things get a little jumbled up, for example one row would have 3 results on it (expected) then the next would have 1 result and so on...

Anyone know why this is happening?

Cheers

get the same result

try switching between horizontal and vertical alignment.

this does not fix, but is a bit better

This is how it works

it must be in dividable pairs, if that make sence

lets say large = 8

then medium must be = 4

and small = 2

OR

large = 6

medium = 3

small =1

If it is

Large = 6

medium = 4

small = 3

and small= 2

This will make the rows to display unevenly.

So this is not a bug I guess

Ah, thanks for that, will try asap

Does not work with large=4 medium=2 small=1 :S

Path 26 works great for me, including export of grid settings with features, thanks for your update Nicholas

Patch on commment #26 works for me too

As described by taote in comment https://www.drupal.org/node/2056963#comment-8355529, i think we need to use clearfix instead of row if we want the grid to work with whatever number of rows depending on the screen size.

There should be only one row containing all the items and the line break will depends on where we set the clearfix.

See http://getbootstrap.com/css/#grid-responsive-resets for an example.

Another more complex example for a 3 columns, then 2 columns, then 1 column, the result should be something like :

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">col-xs-12 col-sm-6 col-md-4</div>
  <div class="clearfix visible-xs-block"></div>   <!-- clear for xsmall screen only -->

  <div class="col-xs-12 col-sm-6 col-md-4">col-xs-12 col-sm-6 col-md-4</div>
  <div class="clearfix visible-xs-block visible-sm-block"></div>  <!-- clear for xsmall and small screen only -->

  <div class="col-xs-12 col-sm-6 col-md-4">col-xs-12 col-sm-6 col-md-4</div>
  <div class="clearfix"></div> <!-- clear for any screen size -->

    <div class="col-xs-12 col-sm-6 col-md-4">col-xs-12 col-sm-6 col-md-4</div>
  <div class="clearfix visible-xs-block"></div>   <!-- clear for xsmall screen only -->

  <div class="col-xs-12 col-sm-6 col-md-4">col-xs-12 col-sm-6 col-md-4</div>
  <div class="clearfix visible-xs-block visible-sm-block"></div>  <!-- clear for xsmall and small screen only -->

  <div class="col-xs-12 col-sm-6 col-md-4">col-xs-12 col-sm-6 col-md-4</div>
  <div class="clearfix"></div> <!-- clear for any screen size -->
</div>

there is re-roll for patch from #26 as it won't be applied because of the latest changes to repository.

probably there should be also some other changes for the template files according with the latest commits.
Si i think it "Needs work".

I would like to see @samuelsov solution Comment #35 in action. Would this be the best place to get it started?

I discovered an issue with the patches; they add a 'col' class alongside the col-xx-n classes which is not supported in Bootstrap 3. This col class caused problems in some themes that I maintain. Here is a reroll of #36 without the 'col' added.

Also removed the

fixing patch errors

This seems to work well for me. Thanks for working on it!

Now to figure out how to get the floats cleared correctly for different sizes...

So what is left on this issue to get this marked RTBC?

#20 does not appy for me. Adding a white space at the bottom works

#43 applied to dev, and looks work fine
but i see now more functionality as needed

I think this functionality is perfect. "Class prefix" is useless, because you can select only one screen size

This current patch is not the right direction.
It does not give you device size support for grid and thumbnail as stipulated in bootstrap. This patch does not implement clearfix.

Here is a working model. Just copy and replace to take it for a quick spin.

views-bootstrap-grid-plugin-style.tpl

<?php
/**
 * @file views-bootstrap-grid-plugin-style.tpl.php
 * Default simple view template to display Bootstrap Grids.
 *
 *
 * - $columns contains rows grouped by columns.
 * - $rows contains a nested array of rows. Each row contains an array of
 *   columns.
 * - $column_type contains a number (default Bootstrap grid system column type).
 * - $class_prefix defines the default prefix to use for column classes.
 *
 * @ingroup views_templates
 */
?>

<?php if (!empty($title)): ?>
  <h3><?php print $title ?></h3>
<?php endif ?>

<div id="views-bootstrap-grid-<?php print $id ?>" class="<?php print $classes ?>">
  <?php if ($options['alignment'] == 'horizontal'): ?>

    <?php foreach ($items as $row): ?>
      <div class="row">
<?php $colsmd=1; $colslg=1; $colssm=1; $colsxs=1; ?>
        <?php foreach ($row['content'] as $column): ?>
 <div class="col col-lg-<?php print $options['col_lg'] ?> col-md-<?php print $options['col_md'] ?> col-sm-<?php print $options['col_sm'] ?> col-xs-<?php print $options['col_xs'] ?>">
            <?php print $column['content'] ?>
          </div>
<?php  
              $colsrowlg = $colslg * $options['col_lg']; 
              if ($colsrowlg==12){
                  $colslg=1;?> 
			  	<div class="clearfix visible-lg"></div>
			  <?php
              }
              else
                  $colslg++; 
          ?>
         <?php  
              $colsrowmd = $colsmd * $options['col_md']; 
              if ($colsrowmd==12){
                  $colsmd=1;?> 
			  	<div class="clearfix visible-md"></div>
			  <?php
              }
              else
                  $colsmd++; 
          ?>
          <?php  
              $colsrowsm = $colssm * $options['col_sm']; 
              if ($colsrowsm==12){
                  $colssm=1;?> 
			  	<div class="clearfix visible-sm"></div>
			  <?php
              }
              else
                  $colssm++; 
          ?>
          <?php  
              $colsrowxs = $colsxs * $options['col_xs']; 
              if ($colsrowxs==12){
                  $colsxs=1;?> 
			  	<div class="clearfix visible-xs"></div>
			  <?php
              }
              else
                  $colsxs++; 
          ?>
        <?php endforeach ?>
      </div>
    <?php endforeach ?>

  <?php else: ?>

    <div class="row">
      <?php foreach ($items as $column): ?>
        <div class="col <?php print $class_prefix ?>-<?php print $column_type ?>">
          <?php foreach ($column['content'] as $row): ?>
            <?php print $row['content'] ?>
          <?php endforeach ?>
        </div>
      <?php endforeach ?>
    </div>

  <?php endif ?>
</div>

Please note the clearfix in the code above. Thanks to taote

You will need to copy and replace the next 2 files, to make it work.

/templates/grid/theme.ini

<?php

/**
 * Implementation of template preprocess for the view.
 */
function template_preprocess_views_bootstrap_grid_plugin_style(&$vars) {
  $view     = $vars['view'];
  $options  = $view->style_plugin->options;
  $horizontal = ($options['alignment'] === 'horizontal');

  $columns = $options['columns'];

  // Split items by rows and columns.
  $vars['items'] = _views_bootstrap_split_rows($vars, $columns, $horizontal);
  $vars['column_type'] = 12 / $columns;
  $vars['class_prefix'] = $options['class_prefix'] ?: 'col-sm';
}

and then

plugins/grid/views_bootstrap_grid_plugin_style.ini

<?php
/**
 * @file
 * Definition of views_bootstrap_plugin_style.
 */

/**
 * Class to define a style plugin handler.
 */
class ViewsBootstrapGridPluginStyle extends views_plugin_style {
  /**
   * Definition.
   */
  public function option_definition() {
    $options = parent::option_definition();
    $options['alignment'] = array('default' => 'horizontal');
    $options['columns'] = array('default' => 3);
    $options['col_lg'] = array('default' => 3);
    $options['col_md'] = array('default' => 4);
    $options['col_sm'] = array('default' => 6);
    $options['col_xs'] = array('default' => 12);
    $options['class_prefix'] = array('default' => 'col-sm');
    return $options;
  }

  /**
   * Form.
   */
  function options_form(&$form, &$form_state) {
    parent::options_form($form, $form_state);

    $form['alignment'] = array(
      '#type' => 'radios',
      '#title' => t('Alignment'),
      '#options' => array(
        'horizontal' => t('Horizontal'),
        'vertical' => t('Vertical'),
      ),
      '#description' => t('Horizontal alignment will place items starting in the upper left and moving right.
      Vertical alignment will place items starting in the upper left and moving down.'),
      '#default_value' => $this->options['alignment'],
    );

    $options = array(1, 2, 3, 4, 6, 12);

    $form['columns'] = array(
      '#type' => 'select',
      '#title' => t('Number of columns'),
      '#default_value' => $this->options['columns'],
      '#description' => t('Number of columns rendered per row.'),
      '#options' => array_combine($options, $options),
      '#required' => TRUE,
    );
    $form['col_lg'] = array(
      '#type' => 'select',
      '#title' => t('Large devices'),
      '#default_value' => $this->options['col_lg'],
      '#description' => t('col-lg-*'),
      '#options' => array_combine($options, $options),
      '#required' => TRUE,
    );
    $form['col_md'] = array(
      '#type' => 'select',
      '#title' => t('Medium devices'),
      '#default_value' => $this->options['col_md'],
      '#description' => t('col-md-*'),
      '#options' => array_combine($options, $options),
      '#required' => TRUE,
    );
    $form['col_sm'] = array(
      '#type' => 'select',
      '#title' => t('Small devices'),
      '#default_value' => $this->options['col_sm'],
      '#description' => t('col-sm-*'),
      '#options' => array_combine($options, $options),
      '#required' => TRUE,
    );
    $form['col_xs'] = array(
      '#type' => 'select',
      '#title' => t('Extra small devices'),
      '#default_value' => $this->options['col_xs'],
      '#description' => t('col-xs-*'),
      '#options' => array_combine($options, $options),
      '#required' => TRUE,
      '#default_value' => $this->options['columns'],
    );

    $form['class_prefix'] = array(
      '#type' => 'select',
      '#title' => t('Class prefix'),
      '#description' => t('Defines the default prefix to use for column classes.'),
      '#default_value' => $this->options['class_prefix'],
      '#required' => TRUE,
      '#options' => array(
        'col-xs' => t('Extra Small'),
        'col-sm' => t('Small'),
        'col-md' => t('Medium'),
        'col-lg' => t('Large'),
      ),
    );
  }
}

This above code is a bit messy but works.

Now to set your grid settings to something like this.

Number of columns 6
Large devices 4
Medium devices 6
Small devices 4
Extra small devices 12
Class prefix meduim

This will give you a 3 columns grid on large
and a 2 columns grid on meduim
and 1 columns grid on extra small

Going to try the patch from @vlooivlerke - Hoping to get a patch RTBC.

Havnt been able to try and create a patch yet ( been sick )
Will try to get to it this week.

#50 is working for me. Provides a much needed feature. Hope to see it committed soon.

Patch worked for me on a fresh copy of dev although I did have to go back and resave a couple of views. I say please lets get this committed.

Wow,

very nice feature, #50 works great for me on the current dev-version

Thanks!

I tried, but i found one bug on lg view mode. I've attached the explination

Settings for LG is 6 grid

Correct, I have the same issue with lg mode, I did not see it in the first place...
=> my grid is set to 3 columns in lg mode (so col-lg-4)

#56 Looks good! Thanks for quick reply.

Hi,

thanks for the quick fix!

My settings are as follows:
- Number of columns per views row: Single row (+clear columns per device size checked)
- Number of columns for extra small devices : 2
- Number of columns for small devices: 3
- Number of columns for medium devices: 3
- Number of columns for large devices: 3

Maybe interesting for others, you need to keep the setting "Number of columns per views row" to "Single row"
=> if I change this to some other setting, I get empty spots in my grid

Hello,

Can somebody please provide a patch that can be applied against the latest dev version?

Thank you

side-note: I used this module and issue as a reference in an article about paid modules in Drupal:
http://www.sooperthemes.com/drupal-blog/whats-your-opinion-premium-drupa...
.. because there is a paid module in codecanyon that has the functionality we want here nicely worked out: http://codecanyon.net/item/bootstrap-grid-drupal-7-views-grid/6732197 . Video demo: https://www.youtube.com/watch?v=jWfYKdCEpOc

@krystalcode

I just downloaded 7.x-3.1+24-dev and patch #56 can be applied only to plugins/grid/views_bootstrap_grid_plugin_style.inc
All files bellow can't be patched:

plugins/thumbnail/views_bootstrap_thumbnail_plugin_style.inc
templates/grid/theme.inc
templates/grid/views-bootstrap-grid-plugin-style.tpl.php
templates/thumbnail/theme.inc
templates/thumbnail/views-bootstrap-thumbnail-plugin-style.tpl.php
views_bootstrap.module

All I get from Netbeans is a window saying "The patch cannot be applied in the selected context"...

Thanks

@gge I also cleanly applied patch on #56 into 7.x-3.1+24-dev version of module (I use a terminal under mac os).

The patch seems to work fine so far.

Hi,

Using the terminal I was finally able to apply the patch. Don't know why I couldn't do it using Netbeans... Now I have to test it.

Thank you,

@krystalcode
I've realized, that the views export (and features export) doesn't place 'clear_columns' like this:

$handler->display->display_options['style_options']['clear_columns'] = '1';

But if i have changed the form element from checkbox to select, and set options: '#options' => array(0 => t('No'), 1 => t('Yes')), then it looks good

Has anybody this problem?

@bsztreha https://www.drupal.org/node/2203111#comment-8864903 has the answer. No default was set for clear_column. Changing to needs work so that gets fixed.

Looking at the patch it appears the defaults were specified? @nicholas.alipaz can you confirm this?

I've been able to apply the patch in 56 to the dev release. It works, but I'm seeing this error:

Notice: Undefined index: columns_horizontal in _views_bootstrap_preprocess_views_style_plugin_prepare_grid_horizontal() (line 125 of /var/www/public/sites/all/modules/views_bootstrap/views_bootstrap.module).

Is there an existing note about this I'm missing?

@bsztreha I can confirm this issue with features. The work around is to open the view and re-save the setting. I get the following errors if this workaround has not been performed.

Notice: Undefined index: alignment in _views_bootstrap_preproces_views_style_plugin_prepare_grid() (line 108 of views_bootstrap/views_bootstrap.module).
Notice: Undefined variable: clearfix in include() (line 35 of views_bootstrap/templates/grid/views-bootstrap-grid-plugin-style.tpl.php).
Warning: Invalid argument supplied for foreach() in include() (line 35 of views_bootstrap/templates/grid/views-bootstrap-grid-plugin-style.tpl.php).

I would really like to see this patch get officially applied I am getting tired of patching lol.

#56 has worked for me against the 7.x-3.x-dev released on 2015-Sep-30. It provides the possibilities to specify columns against 4 different device widths.

The patch in #56 works for me, and works exactly as expected. Please consider committing it to 7.x-3.x!

Thanks for the updated patch! Setting to Needs Review, so others can give it a test drive.

#74 works great!

#74 works great.

Thank you.

I just applied the patch in #74. It seemed to apply cleanly, but when I added it to my site... I got these errors:

Notice: Undefined index: columns in template_preprocess_views_bootstrap_grid_plugin_style() (line 11 of /home/historik/public_html/sites/all/modules/views_bootstrap/templates/grid/theme.inc).
Warning: Division by zero in _views_bootstrap_split_rows() (line 30 of /home/historik/public_html/sites/all/modules/views_bootstrap/views_bootstrap.module).
Warning: Division by zero in _views_bootstrap_split_rows() (line 31 of /home/historik/public_html/sites/all/modules/views_bootstrap/views_bootstrap.module).
Warning: Division by zero in template_preprocess_views_bootstrap_grid_plugin_style() (line 15 of /home/historik/public_html/sites/all/modules/views_bootstrap/templates/grid/theme.inc).
Notice: Undefined index: class_prefix in template_preprocess_views_bootstrap_grid_plugin_style() (line 16 of /home/historik/public_html/sites/all/modules/views_bootstrap/templates/grid/theme.inc).

Where did I go wrong?

Thanks!

@HallSL

From #74:

Problem reported on #69 and #70 happens when the patch is applied and there are existing views that use Grid or Thumbnail. Since the options have changed, there are warnings about options or variables not found. Re-saving the view fixes the problem.

@waverate

The errors in #69 and #70 don't seem to be the same errors, different undefined indices, different files and/or different lines. Also the earlier errors don't mention division by zero.

And I did see those comments and deleted the only view I had and recreated it... no joy. Any other ideas?

Thanks,
Hall

Yes, I am/was using the latest version of Views Bootstrap. Indeed, when in views, I saw the desired options to set the number of columns per view port size. Seemed good, but the errors persisted and wouldn't let the view save.

My bad. The view does save. The errors happen when I try to view the result.

Tested the lastest 7.x-3.x dev version and I don't understand the new configuration.

Before, we had the possibility to define the number of columns you want for all the 4 media queries.

Now you can just specify it for one

So how to do somethink like this :

- 4 columns on big screen
- 3 columns on medium screen
- 2 columns on small screen
- 1 column on extra small screen

Before it was possible and It seems it's not now :/ did I miss something ?

Hi krystalcode,

I have the same behavior described by Alexandre360 in #85 with latest 7.x-3.x dev version, not the one shown in your "snapshot12.png" above.

In short, the latest 7.x-3.x dev version allows to define the "Number of columns" and to choice only one "Class prefix" (xs, sm, md, lg).

I have tested patch #74 and seeing the new configuration values in views, however if I attempt to package the view in features and deploy the new feature, I must manually save the view for it to work properly. If you are packaging configuration and deploying it using features this becomes a big issue. I feel like this patch still needs work. Here are the errors when deploying new configuration settings without manually saving the view.

Notice: Undefined index: alignment in _views_bootstrap_preproces_views_style_plugin_prepare_grid() (line 108 of [path_to_module]->views_bootstrap.module).
Notice: Undefined variable: clearfix in include() (line 35 of [path_to_template]->views_bootstrap/templates/grid/views-bootstrap-grid-plugin-style.tpl.php).
Warning: Invalid argument supplied for foreach() in include() (line 35 of [path_to_template]->views_bootstrap/templates/grid/views-bootstrap-grid-plugin-style.tpl.php).

@logsd and @Alexandre360 , are you applying the patch to the dev version? You must apply the patch to the latest dev in order to see the changes.

What I'm noticing when features configuration for the view gets exported, there are 2 missing style_options:

• ['style_options']['alignment'] = 'horizontal';
• ['style_options']['clear_columns'] = 0;

I see the options being set in the database in the views_display table -> display options serialized array, however when features exports these options they are missing for the view. I'm not quite sure how ctools exports this configuration so any help would be appreciated.

After further testing, I see that if the configuration for alignment is set to 'vertical', the style_option is exported properly for both alignment and clear_columns.

Thanks.

Digging a little deeper I started looking into views export_options() code. I'm using views-7.x-3.11.
[path_to_views_module]/includes/base.inc on line 247

if ($value !== $default) {
  $output .= $indent . $prefix . "['" . implode("']['", $parents) . "'] = ";
  if (isset($definition['bool'])) {
    $output .= empty($storage[$option]) ? 'FALSE' : 'TRUE';
  }
  else {
    $output .= views_var_export($storage[$option], $indent);
  }
  $output .= ";\n";
}

The if ($value !== $default) is not allowing the values for alignment and clear_columns to be exported, oddly enough they get exported for the other values. I see that the other values are all integers, where these values are string and boolean respectively. I wonder if this is part of the issue.

It may be possibly to define an export value for strings and booleans that are in a default state, but we'll have to do some digging.

I'm wondering if this is related to the issue Allow Views export of all style settings (https://www.drupal.org/node/1513198) is having. It doesn't look like they have not solved the issue, but I wanted to document what they have tried.

Breakthrough on getting the features export to work. I was traveling down the wrong path and assuming the option_definition() was not properly defined for exporting the view. The issues lies within getting these style options in the template_preprocess functions. Instead of getting the options from $var['view']->style_options (which appears to be the options that get exported) we should be getting these options from the style plugin array like this $vars['view']->style_plugin->options.

I have attached a patch that has all the code from patch #74 thanks to @krystalcode and also have included the update to the preprocess functions in views_bootstrap.module.

#92 fixed the things I needed. No bugs as far as I can see.

Thanks @adam-delaney

#92 Works good!

Any chance for an official release with this bundled in anytime soon? :)

#92 is working great for me,
Any chance of this getting pulled into the latest 7.x-3.1 ?

Cheers !

I'm having trouble getting patch #92 applied successfully to my module.
Would anyone be able to share the files for their working version?

@Tyera, are you applying the patch against the latest dev?

Yes, I downloaded a fresh version of 7.x-3.x-dev.

The patch does work so there is something wrong with your process.

git clone --branch 7.x-3.x https://git.drupal.org/project/views_bootstrap.git
cd views_bootstrap
patch -p1 < views_bootstrap-breakpoint-control-2203111-92-7.x.patch

  patching file plugins/grid/views_bootstrap_grid_plugin_style.inc
  patching file plugins/thumbnail/views_bootstrap_thumbnail_plugin_style.inc
  patching file templates/grid/theme.inc
  patching file templates/grid/views-bootstrap-grid-plugin-style.tpl.php
  patching file templates/thumbnail/theme.inc
  patching file templates/thumbnail/views-bootstrap-thumbnail-plugin-style.tpl.php
  patching file views_bootstrap.module

So what are the odds of getting this issue in or at least looked at by the maintainer? Before leverage this patch want to make sure for the most part it is stable and it will likely be merged.

Thank you, yes, I understand that. It would still be really helpful to get a copy of a working version, and help me I am identify where my process is going wrong.

+1 on this.

7.x-3.x-dev currently allows you to set the 'default' breakpoint for the thumbnail view format. So it's a little better in dev, allowing you to change the breakpoint where it collapses from the column setting to full-width. I don't see this in 7.x-3.1. I hope we can get a release for this either way...

The patch in #92 does apply against dev, which is good and proper. :-)

+++ b/plugins/grid/views_bootstrap_grid_plugin_style.inc
@@ -32,33 +38,113 @@ class ViewsBootstrapGridPluginStyle extends views_plugin_style {
+      '#description' => t('When this option is selected, clearfix divs will be used to "clear" the columns as needed per device size (see related ') . '<a target="_blank" href="http://getbootstrap.com/css/#grid-example-mixed-complete">' . t('Bootstrap documentation') . '</a>. ' . t('This option applies only when "Single row" is selected for the "Number of columns per view row" option'),

Needs placeholders instead of concatenated strings. https://www.drupal.org/node/322774

Also, missing the closing paren from '(see related'.

hello thank you for your work. The patch works with grids.
With mignatures it does not work, I have a blank page.
Could you put an archive with files and patch applied?
thank you

Attahing patch based on latest feedback fixing the placeholders issue.

I'm so glad to discover this patch! It's just what this module needs to make the grid format truly flexible. Thanks to everyone who worked on it.

I tested the grid functionality and it seems to work as advertised. The clearfix support is perfect.

Is there no way to add a custom class per column? I can see that very helpful for styling, for example, to add vertical spacing between the columns as the grid breaks down per breakpoint.

Also, not a huge deal, but in the HTML there's a space before the column classes:

Here's a patch which does the following things:

• Fixes misspelling in the function name, _views_bootstrap_preproces_views_style_plugin_prepare_grid.
• Removes extra space in column classes variable.
• Adds a "column classes" option so we can add arbitrary CSS classes to all columns.

I have tried all the patches on this issue, none of them work form me. Latest dev and try to use Bootstrap Grid. The containers only get the following classes: col col-lg.
I spent lot of time trying to get this to work but nothing! Anybody?

@yalegria - have you re-saved your view after applying the patch ? As you will have to change the settings to get the different classes for each breakpoint.
I have tried the most recent patch and it has worked for me,

@aastrong - this is my procedure in applying the patch(es):

1. drush en views_download --select
2. Select [1] for the dev option
3. Select (y) to overwrite the current module
4. Download patch under modules/views_bootstrap
5. Apply patch: patch -p1 < patch-file
6. Clear cache
7. Resave my view.

No luck whatsoever.

@yalegria
Hey there, i just re-did the exact same procedure and it worked fine for me.

for #7 - can you click on settings, and tell me what you see ?
Do you see a number of different options instead of the options before the patch ?

Maybe try clicking settings, change the settings, than save.

Thanks and let me know.

@aastrong

Settings:

Grouping: none
Alignment: Horizontal
Number of columns per views row: Single Row
Clear columns per device size: checked
Number of columns for extra small devices: 1
Number of columns for small devices: 2
Number of columns for medium devices: 3
Number of columns for large devices: 4

I did try to change the settings, even to Bootstrap Thumbnails where YES it works, but when I use the Bootstrap Grid the classes are not introduced on the DOM. and yes I need to use Bootstrap Grid. Really dont know what is wrong with my setup. thanks for your help.

sounds like you either have a caching issue when looking at your page - or maybe you have the wrong view on your page
Anyways, hope you figure it out - the patch is certainly working if you are seeing the settings change.
Cheers.

Patch #107 works perfect, this is what I did, I zip downloaded 7.3 DEV version, unzip file, dowloaded #107 patch, place it in same dir of views-bootstrap module, open git bash in module dir, apply patch (git apply -v views_bootstrap-columns-per-device-2203111-107.patch), remove from server old module, upload new module (dev version with patch already applyied), clear caches, open your view, apply your custom settings (bootstrap-grid view), save changes, enjoy.

Patch in #107 worked perfectly on dev.

Patch #107 worked for me.

Installed DEV version, Applied patch. Looks good.

tried to patch #107 on the dev using Terminal but got this error:

can't find file to patch at input line 5
Perhaps you should have used the -p or --strip option?
The text leading up to this was:
--------------------------
|diff --git a/plugins/grid/views_bootstrap_grid_plugin_style.inc b/plugins/grid/views_bootstrap_grid_plugin_style.inc
|index 9460652..f71613c 100644
|--- a/plugins/grid/views_bootstrap_grid_plugin_style.inc
|+++ b/plugins/grid/views_bootstrap_grid_plugin_style.inc
--------------------------
File to patch:

UPDATE: used "patch -p1" and seems to have worked.

Patch #107 worked for me too! Please commit soon!

confirming that patch 2203111-07 applies cleanly to 7.x-3.x-dev (and works great):

karins-macbook-pro:views_bootstrap sysadmin$ cat 2203111-107.patch |patch -p1
patching file plugins/grid/views_bootstrap_grid_plugin_style.inc
patching file plugins/thumbnail/views_bootstrap_thumbnail_plugin_style.inc
patching file templates/grid/theme.inc
patching file templates/grid/views-bootstrap-grid-plugin-style.tpl.php
patching file templates/thumbnail/theme.inc
patching file templates/thumbnail/views-bootstrap-thumbnail-plugin-style.tpl.php
patching file views_bootstrap.module

drush cc all

edit view ->et voilà!

Having some issues with applying the patch, using latest module version. Bellow link is an image of the problem.

http://i.imgur.com/NX5BTBr.png

What am i doing wrong?

patch applied cleanly.

Patch in #107 works

thanks zdean
Had the same issue in Terminal when running the patch
This worked for the patch in 107:
patch -p1 < views_bootstrap-columns-per-device-2203111-107.patch

The enhanced functionality is really nice.

thanks zdean
Had the same issue in Terminal when running the patch
This worked for the patch in 107:
patch -p1 < views_bootstrap-columns-per-device-2203111-107.patch

updated credits before commiting

I have written an update hook that attempts to maintain backwards compatibility for grids before granular breakpoint control was committed. See: https://www.drupal.org/node/2807415#comment-11769694

Just updating for any newcomers, the patch is committed to the dev version and appears to be working great.

Thanks to everybody who worked this out, provides great flexibility.

See also previous comment (128) about an update hook for backwards compatibility if you already have views built on this format.