[Resolved] Correcting bootstrap loop

[Author]

Posts

[Wim]

I am trying to create a grid in the bootstrap 3 framework, but I need it to adapt the number of columns depending on the screensize: col-xs-12 col-sm-6 col-md-4 col-lg-3 (1, 2, 3 or 4 columns)
If I create the standard loop using four columns, the grid breaks when changing to three because the row only holds four and so the first line has three and the second line only shows one.
So finally I chose twelve, as it can be divided by 4, 3 and 2 :

<div class="container-fluid">
<wpv-loop wrap="12" pad="true">
	[wpv-item index=1]
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
			[wpv-post-body view_template="Isotope in div"]
		</div>
		[wpv-item index=other]
		<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
			[wpv-post-body view_template="Isotope in div"]
      	</div>
		[wpv-item index=12]
		<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
			[wpv-post-body view_template="Isotope in div"]
      </div>
	</div>
	[wpv-item index=pad]
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
	[wpv-item index=pad-last]
	</div>
</wpv-loop>
</div>

But this only works if the pictures are exactly the same height.
Is there another way to get the loop done in order to get this correct, even with a deviation on the height of a picture?
Thanks.
Wim

[Wim]

I guess I found a bootstrap solution by adding a clearfix:
<div class="clearfix visible-sm-block"></div> after every two thumbnail columns
<div class="clearfix visible-md-block"></div> after every three thumbnail columns
<div class="clearfix visible-lg-block"></div> after every four thumbnail columns

Working example on hidden link

This should be the new loop, but I don't have a clue how to implement this in views:

<div class="row">
  @for(var i = 0; i < Model.Tour.Nodes.Length; i++) {
    var Node = Model.Tour.Nodes[0];
    if(i % 2 == 0) {
      <div class="clearfix visible-sm-block"></div>
    }
    if(i % 3 == 0) {
      <div class="clearfix visible-md-block"></div>
    }
    if(i % 4 == 0) {
      <div class="clearfix visible-lg-block"></div>
    }
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
        @Node.SomeData
      </div>
    </div>
  }
</div>

Any ideas? Thank you.
Wim

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

When one of the dimensions is used for a picture (width or height), the other is proportionally works (adopted). One solution is to use fixed height/width (either px or %). You can also use max-width/height but only in case, if you are sure that your image's width/height is always bigger than the applied max-width/height. Because max-width/height will not force the image to stretch upto the fixed dimensions, but will limit if it exceeds (keeping both proportional).

However, a clearfix should do the trick also. The code you provided in your later message, is handling the every column. This is just like [wpv-item index=n] where you can specify the output for a particular column in a loop.

I hope this explains. However, if you can provide a URL to live example, that will be helpful, thanks.

[Wim]

Hello Waqas,
Thanks for the reply - I know a fixed height will solve it, but I'd like to avoid this as some pictures get more caption than others.
I've been trying to get my last loop in views, but I don't succeed in doing this.
Could you give me a hint how to put

 if(i % 2 == 0) {
      <div class="clearfix visible-sm-block"></div>
    }

in the [wpv-item index= ] ?
Or any other solution? Custom loops of this caliber are nowhere to be found in the forums or the views documentation.
Thanks a lot.
Gr
Wim

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Actually Views offers to handle particular records in the loop accordingly.

I will suggest to take a look at https://toolset.com/documentation/views-shortcodes/#wpv-item which describes how you can target the particular records for required output.

[Wim]

Hi Waqas,
I had already been there, but it seems silly to hardcode indexnumbers if you don't know how big the loop will be. It could be ten, but also a hundred or more.
I don't want to specify all indexes one by one, but I'd like to program it using some math. Is this possible?
Thanks
Wim

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Unfortunately that's not possible within the scope of the short codes and solutions provided by the Views. However, you can write custom code (custom short codes) in your functions.php, to achieve such solutions.

You can also contact our Custom Coding Service (hidden link) to build such solutions for you.

[Wim]

Okay, thanks.