Jump to content
wishbone

repeater - max number of flexboxes

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!

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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...

Share this post


Link to post
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.

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By David Karich
      ProcessWire InputfieldRepeaterMatrixDuplicate
      Thanks to the great ProModule "RepeaterMatrix" I have the possibility to create complex repeater items. With it I have created a quite powerful page builder. Many different content modules, with many more possible design options. The RepeaterMatrix module supports the cloning of items, but only within the same page. Now I often have the case that very design-intensive pages and items are created. If you want to use a content module on a different page (e.g. in the same design), you have to rebuild each item manually every time.
      This module extends the commercial ProModule "RepeaterMatrix" by the function to duplicate repeater items from one page to another page. The condition is that the target field is the same matrix field from which the item is duplicated. This module is currently understood as proof of concept. There are a few limitations that need to be considered. The intention of the module is that this functionality is integrated into the core of RepeaterMatrix and does not require an extra module.
      Check out the screencast
      What the module can do
      Duplicate a repeater item from one page to another No matter how complex the item is Full support for file and image fields Multilingual support Support of Min and Max settings Live synchronization of clipboard between multiple browser tabs. Copy an item and simply switch the browser tab to the target page and you will immediately see the past button Support of multiple RepeaterMatrix fields on one page Configurable which roles and fields are excluded Duplicated items are automatically pasted to the end of the target field and set to hidden status so that changes are not directly published Automatic clipboard update when other items are picked Automatically removes old clipboard data if it is not pasted within 6 hours Delete clipboard itself by clicking the selected item again Benefit: unbelievably fast workflow and content replication What the module can't do
      Before an item can be duplicated in its current version, the source page must be saved. This means that if you make changes to an item and copy this, the old saved state will be duplicated Dynamic loading is currently not possible. Means no AJAX. When pasting, the target page is saved completely No support for nested repeater items. Currently only first level items can be duplicated. Means a repeater field in a repeater field cannot be duplicated. Workaround: simply duplicate the parent item Dynamic reloading and adding of repeater items cannot be registered. Several interfaces and events from the core are missing. The initialization occurs only once after the page load event Changelog
      1.0.4
      Bug fix: Various bug fixes and improvements in live synchronization Bug fix: Items are no longer inserted when the normal save button is clicked. Only when the past button is explicitly clicked Feature: Support of multiple repeater fields in one page Feature: Support of repeater Min/Max settings Feature: Configurable roles and fields Enhancement: Improved clipboard management Enhancement: Documentation improvement Enhancement: Corrected few typos #1 1.0.3
      Feature: Live synchronization Enhancement: Load the module only in the backend Enhancement: Documentation improvement 1.0.2
      Bug fix: Various bug fixes and improvements in JS functions Enhancement: Documentation improvement Enhancement: Corrected few typos 1.0.1
      Bug fix: Various bug fixes and improvements in the duplication process 1.0.0
      Initial release Support this module
      If this module is useful for you, I am very thankful for your small donation: Donate 5,- Euro (via PayPal – or an amount of your choice. Thank you!)
      Download this module
      > Github: https://github.com/FlipZoomMedia/InputfieldRepeaterMatrixDuplicate
      > PW module directory: https://modules.processwire.com/modules/inputfield-repeater-matrix-duplicate/
    • By gerritvanaaken
      Wouldn’t it be cool to have whole repeater items (or even repeater matrix items) language-specific. Some of my clients do have pages that are 90% identical in German and English, but there are some sections that should not appear in one or another language. I attached a concept screenshot.
      Would something like this be possible with some simple backend hooks and "hidden checkbox fields"? Or is it way more complicated?
       

    • By brdje
      Greetings,
       
      I've ran into an issue with adding a repeater field to a template.
      The page editor in the backend shows the fields and the data attached to the fields, including the repeater.
       
       
      However, when viewing the template in the front-end, there is no sign of a repeater field in the data set.
      ["data"]=> array(3) { ["name1189"]=> string(11) "partenaires" ["status1189"]=> string(1) "1" ["title"]=> string(8) "Partners" } } Do u have any idea what could be causing this issue?
      I've tried recreating the field and there is no caching active, but still can't get the repeater in the data set.
    • By Robin S
      Repeater Images
      Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc.
      When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing.
      Screencast

      Installation
      Install the Repeater Images module.
      Setup
      Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration
      Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module.
      Image uploads feature
      There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field.
      To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position.
      It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field.
      New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved.
      Tips
      The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height})  
      https://github.com/Toutouwai/RepeaterImages
      https://modules.processwire.com/modules/repeater-images/
    • By Orkun
      Hi Guys
      I have a problem with a repeater field. Some weeks ago I had exported a repeater field from a dev installation and then imported it to a live installation. All just had worked fine as I remember (the field was created etc...). But today I got an email from the developer of our customer that he has a problem with two repeater fields. When he had changed the fields of another repeater it has also changed it in the other repeater field (which I had imported some weeks ago). I investigated this further and found out that exporting/importing of repeater fields doesn't work for my version of processwire (we are using 2.7.3) (see https://github.com/processwire/processwire-issues/issues/416). 
      So I decided to remove the repeater field and create it again manually on the live enviroment. I could remove the repeater field from the template but I can't delete the repeater field because it is referring to a false repeater template. How can I fix this issue so that I can delete the repeater field?
       
      The "event_dates" repeater field is referring to the "repeater_speciality_adresses" template which is wrong.

      When I try to delete the field I get this error:

       
      Do I need to manually remove the field from the db? What do I exactly need to do?
      Kind Regards
      Orkun
×
×
  • Create New...