repeater - max number of flexboxes

[wishbone]

Hallo,

for a number of floating flexboxes I want to limit the number of them in each row.

This is what I tried :

<?php foreach($page->projectBox as $box) {
				if (count($box)<3 | count($box)>3) {
					echo "<div class='projektbox'>";
					echo "<h2>{$box->boxTitle}</h2>";
					echo "{$box->boxText}";
					echo"</div>";
					}
				if (count($box)=3) {
					echo "<br>";
					}
				}
			?>

Which throws a 500 error... any help, pls?

Thank youuu!

[LostKobrakai]

$box is not countable, it's just a page/repeater object. Also why don't you just use css for that job? flex-wrap and flex-basis should be enough for the job and you don't need any <br>'s.

[wishbone]

Thank you for your answer, but css doesn't limit the number of boxes in a row. 

Sry for bothering you with non-programmers' questions - what syntax do I need? 

if (count($page->$box)<3 | count($page->$box)>3) {

is also not working

[rick]

Hi wishbone,

Yes, you are correct that css doesn't limit the number of items per row, but it will allow you to display however many items that will fit on each row depending upon the width of the display, if that is your intent.

As far as the programming is concerned, php uses either the keyword OR or the characters || (two pipe characters) to designate this type of comparison. I personally prefer the keyword simply because it is easier for me to read, and becomes more readily apparent when there is a misspelling.

And here is what your conditional statement says:

If the number of boxes is less than 3 OR the number of boxes is greater than 3 then ... render the box content.

... else if the number of boxes does equal 3 then ... start an new line.

Three issues with this structure:

• Going back to css, the DIV elements you use as a container are by default block-level elements, which means each DIV will be rendered on a new line, unless you change that behavior through css. If you want to bypass css, then I would recommend you render your content within a table.
• The count function returns the total number of items -- it will not change within your for-each loop. You will need to set a counter and increment that counter at each iteration in order to obtain the desired value.
• Since you are only concerned about the count equal to 3, you could rewrite your conditional statement like so:

$box_count = 0;
for each $boxes as $box {
  if ( $box_count == 3 ) { 
    // start a new line
    $box_count = 0;
  } else {
    //render box content
    $box_count = $box_count + 1;
  }
}

Regarding the actual ProcessWire method of obtaining those boxes, I will leave to the more knowledgeable members.

[wishbone]

oh how great, thank you for the excessive lesson!

But still doesn't work.

This is what I have:

<?php foreach($page->projectBox as $box) {
				$box_count = 0;
				if ( $box_count == 3 ) { 
					// start a new line
					echo "<br>";
					$box_count = 0;
				  } else {
				echo "<div class='projektbox'>";
				...
				echo"</div>";
    			$box_count = $box_count + 1;
				}
			}
				?>

what is this underscore in $box_count?

The divs are flexboxes which are "floating" by definition.

[rick]

Hi wishbone,

First, you have the variable $box_count being set to zero within the loop, so it will always be reset -- it never reaches a value of 3. You should move it before the loop begins, like my original code example.

The underscore is simply a means to separate the words of the variable name, since spaces are not allowed. It is only a convention that I use. You can use whatever naming convention you are comfortable with.

Hope this helps.

[wishbone]

but where is the variable $box_count defined? I can't set it to 0 before having $box defined.

Obviously, I don't know how to define $box_count or the number of $box.

Your original code example doesn't match my structure. I tried to adapt it to my varables. 

Is it foreach or for each?

[Mike Rockett]

$box_count is a new variable - you need to be initialising it to 0 outside the loop. The variable is simply a means for you to see where you are in the loop, and has no direct association with $box itself. (I have used the camelCase naming format for the counter, in my example.)

<?php $boxCount = 0; ?>
<?php foreach ($page->projectBox as $box) {
	if ($boxCount == 3) { 
		// start a new line
		echo "<br>";
		$boxCount = 0;
	} else {
		echo "<div class='projektbox'>";
		// box stuff
		echo "</div>";
		$boxCount++;
	}
} ?>

[wishbone]

thx! sry doesn't work. I can't see where the number of $box is counted...

[LostKobrakai]

I'm not sure why you guys think that limiting flex-items to a fixed number per row is not possible via css: http://jsfiddle.net/yq5fopxh/

If you really want to use php, then use this:

foreach($page->projectBox->getValues() as $num => $box) {
    // 0 1 2
    // 3 4 5
    // 6 7 8
    // echo <br> before any number which is dividable by three without rest
    // and only if number is not 0
    if($num && $num % 3 == 0) echo "<br>";

    echo "<div class='projektbox'>";
    // box stuff
    echo "</div>" 
}

[wishbone]

thx a lot looks great - unfortunately, I don't have access to files at the moment, so feed back will take some time... (btw would be helpful if PW had a possibility to access files and edit them via browser as well)

as for the flexboxes - what makes them so appealing is the ability to align the boxes independent of their width and distance. Percents do not equal apply if you have margins and paddings in pixels...

[Mike Rockett]

thx! sry doesn't work. I can't see where the number of $box is counted...

The counter ($boxCount) is first set to 0. Then, the loop starts. As the counter is at 0 (not == 3), it will output the box, and increase the counter by 1 ($boxCount++). When the third box is done, and $boxCount == 3, then a line break is inserted, and $boxCount is reset to 0. If you have 7 boxes, then the output will be:

<div class='projektbox'>
	...
</div>
<div class='projektbox'>
	...
</div>
<div class='projektbox'>
	...
</div>
<br>
<div class='projektbox'>
	...
</div>
<div class='projektbox'>
	...
</div>
<div class='projektbox'>
	...
</div>
<br>
<div class='projektbox'>
	...
</div>

It's really that simple.

@LostKobrakai's reference to doing this without PHP is the correct way to do it, though.