Jump to content

repeater - max number of flexboxes


wishbone
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

$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++;
	}
} ?>
  • Like 1
Link to comment
Share on other sites

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>" 
}
  • Like 1
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By joeck
      Hi,
      I'm facing the issue where i have a repeater field with a multi language textarea (german & english, german beeing default). In german more blocks should be displayed as in english.
      The textarea field is configured as inherit default language if blank (I don't want to change this since it is the wanted behaviour for all other pages...).
      Now I want to access the unformatted value of the textarea field in the repeater and only show it if it is not empty. Something like this:
      $body = ""; $page->of(false); foreach($page->blocks as $block){ //blocks is repeater field, each block has title and textarea if ($block->textarea->getLanguageValue($user->language)){ $body .= <<<EOD <div> <div class='uk-card uk-card-default uk-card-body'> <h3 class='uk-card-title'>$block->title</h3> $block->textarea </div> </div> EOD; } } $page->of(true); print $body; However this doesn't work: Call to a member function getLanguageValue() on string.
      I also tried the other syntax for getLanguageValue:
      $page->getLanguageValue($language, $field) But I didn't manage to get a unique name of the textarea field in the repeater.
      I looked into the API of FieltypeRepeater but couldn't find anyhting that fixed my issue.
      Any ideas?
    • By opalepatrick
      I see old posts saying that repeaters are not the way to go in Custom Process Modules. If that is the case, when using forms (as I am trying to do) how would one tackle things like repeat contact fields where there can be multiple requirements for contact details with different parameters? (Like point of contact, director, etc) or even telephone numbers that have different uses?
      Just for background I am creating a process module that allows me to create types of financial applications in the admin area (no need to publish any of this, pure admin) that require a lot of personal or company information.
      Maybe I am thinking about this incorrectly?
    • By spercy16
      I was previously using individual fields to capture and output multiple cards onto my web page but after recently learning about repeaters would prefer to use this field type, as it will be a lot more user friendly for end users to create new cards. I tried to modify my code to grab the fields from the new Repeater field(s) but am getting this error message on the page:
      Here is the code I'm currently trying to use for the cards:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items foreach($page->tall_card as $card) { $count = 0; $count++; $options = array( 'quality' => 70 ); $image = $card->image; $img = $card->image->size(550, 400, $options); $cardHeading = $card->title; $cardBody = $card->plain_paragraph; $raised = $card->raised_amount; $goal = $card->goal_amount; $link = $card->link; if ($raised == 0 ) : $percent = 0; else: $percent = $raised_amount / $goal_amount * 100; endif; if ($percent <= 5) : $percent = 0; endif; ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $cardHeading; ?></h2> <?php echo $cardBody; ?> </div> <div class="progressBarSection"> <progress class="progressBar" id="progressbar<?php echo $count; ?>" value="<?php echo $percent; ?>" max="100"></progress> <span class="raisedAmount"> $<?php echo $raised; ?> usd </span> <span class="goalAmount"> $<?php echo $goal; ?> usd </span> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $link; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php } ?> Thanks in advance for any help!
    • By spercy16
      Coming from Perch (CMS) to Processwire, the one major downside I've found is that every place I want to insert content into my pages requires a single field (be that an image, integer, string, etc.). This can be a real pain to setup and manage if you have a lot of pages, many of them with dozens of unique fields. For example, on the Projects page of a site I'm working on right now I have to have fields for donate_amount (1-15, meaning fifteen unique fields that I have to duplicate manually), goal_amount(1-15), card_body(1-15), etc. After using Perch for a while, the way their system works is simply easier. You instead create your fields in a single PHP template (for every unique section, like a card) and their CMS imports those fields into the CMS when you choose to use that card, then you just fill in the values. You can also choose to reuse that card multiple times and each one you add gives you the several fields you need to fill in. So you can easily add your 15 cards, each with a picture, title, paragraph, and link, etc. and each one is basically given a unique ID that you can reference in your CSS files. If there's any way to make fields and templates work more like that, it would be a truly outstanding and efficient CMS. The great advantage of the way Perch is setup is that I can make a card with 10 fields, if need be, and easily duplicate that card out 40 times if I need 40 cards on the page and wouldn't need 10 fields for 40 cards (meaning in PW I would need 400 fields). If there's an easier way to do this in PW I would love to know, but as of right now, from what little I do know about the CMS 400 fields would be the only way to set that up, and that would be much more time consuming than if I could create one card (in PHP) with 10 fields that automatically added a number to the end of each field for each card (if that makes sense).
×
×
  • Create New...