Jump to content

Code to detect a populated repeater and then output repeated items


Recommended Posts

Sorry to ask a lame question but after trying I've failed to work out the code I need to do something that I am sure must be easy to do with PW but my newb status and PHP/jQ weakness have foiled me :/

I'm using pages to make a 'select' as described here.

I'm using a repeater to add two fields to the editor, one a select and the other a textarea.

For my template, in my awful pseudo code I want to do this:

if segment_width is set {

if segment_width = half then output "grid_6" (to fill in a CSS class)

if segment_width = third then output grid_4 - - - " - - -

if segment_width = quarter then output grid_3 - - - " - - -

output the segment field that follows on from the segment_width/is within the same repeater as the segment_width


I assume I will want a foreach or other loop as these repeater panels will be added in pairs or threes or fours and there may be more than one set, e.g.:

segment_width (half)

segment_width (half)

segment_width (third)

segment_width (third)

segment_width (third)

THANK YOU if you're able to point me in the right direction. Cheers, -Alan

EDIT: My other post explains what I am trying to do a bit better

Edited by alan
Link to comment
Share on other sites

I assume I will want a foreach or other loop as these repeater panels will be added in pairs or threes or fours and there may be more than one set, e.g.:

How are you going to group these? I mean, will you group them explicitly (like one group on each entry), or automatically (based on the widths)?

I'm not sure if I understand what you want to achieve with this, but maybe this thread could help: http://processwire.com/talk/topic/968-select-custom-css-for-page/page__hl__columns__fromsearch__1

Link to comment
Share on other sites

diogo thanks for the link.

I should have noted that the person adding content will have had instructions to add "Segment width: half" items in pairs and "Segment width: third" items in threes, etc.

How are you going to group these? I mean, will you group them explicitly (like one group on each entry), or automatically (based on the widths)?

Automatically, assuming I understand this correctly.

The PW code I am trying to work out would, in my awful pseudo code, do this:

if(Segments) {
set var $number_of_segments // set var to the total number of Segments the editor added
if(Segment_#1 = Half)
 set var $completed = 2
 <div class='half'>
  Echo Segment_#1 >- Segment
 <div class='half'>
  Echo Segment_#2 >- Segment
[else_if here to see if Segment_#1 = Third rather than Half, if Third then as above
but different class and iterate three times; if a Quater then different class and iterate four times]
if($completed == $number_of_segments)
 Repeat until all segments have been echoed in their respective sized divs

THANKS for the interest and I hope I've explained that well enough so I make sense :/

Edited by alan
Link to comment
Share on other sites

Alan, Diogo may understand better but I'm still confused myself. I think my confusion just stems from that I don't really know what the output is ultimately supposed to do or look like. But I think I have enough context to sort of understand the direction you are going. Assuming, I understand roughly what you are trying to do, my thought is that Repeaters might not be the right way to go here. Repeaters are for repeating an item of the same type. But I get the impression that the items you are talking about vary in some fashion. If the only way in which they need to vary is by user-defined width, then I'm sure it would be fine to give them an integer or selection box to choose a width. But if they need to vary any more than that, whether in input or output, I think you are better off creating a template for each 'type', creating pages for them, and then let them be selected (as Page references).

Here's an example I was helping someone with recently. they have this site with really long pages and really long sidebars with various different types of 'blocks'. Some of the blocks are informational, some highlight a magazine article, some highlight a property, and there are a few other types too. Here's a reduced size screenshot that shows four of them (though they are actually used in much larger quantity):


While they build a sidebar on a page, each 'block' there is technically a page on it's own as children of /tools/blocks/. There are several different block templates. The ones you see in the screenshot are:



block-basic (again)


Each block knows how to render itself. So the template file for block-basic looks like this:

<div class'block block-basic'>

The page reference field is called 'blocks' and it's attached to any pages that need to have various selectable blocks of different types. They are selected like this:


And they are output like this:

foreach($page->blocks as $block) {
echo $block->render();

Looking at your original post, I am thinking of each of these blocks as being something like each of the "segments" in your description. But let me know if I'm anywhere close, or totally off from helping to answer the question. :)

Link to comment
Share on other sites

Thanks Ryan, that looks very helpful for other work I am going to be doing but it it doesn't, I think, give me what Repeaters seem to be excellently suited to giving, on-the-fly user layout choices (what I am trying to do) and that is where I've been weak on this thread — failing to explain what I am trying to do ;) So I'll explain it from the outside.

I plan on the person editing copy being able to enter content into a Body field, here the short block titled Basic site profile and when they do the template will echo that output in a div with a class set to full width (actually I am using a fluid grid and the class will be grid_12).

If that's all the editor wants then we're done and the footer is all that will remain.

But on some pages the editor may wish to add more content presented like Aside minor one and Two (and three) as seen here.

The ability for the editor to ignore this and simply not add a Repeater is dead-simple of course, and if the editor does choose to have for example three columns of content as per the linked demo, they simply add three Repeater sections, each set to 'Third' and type in their content.

The PW code will mark these up in divs with class grid_4, so they create a full layout 'row'.

This can of course be extended as I could use names 1ColumnsWidth, 2ColumnsWidth, etc rather than Half, Third, Quater and the same code would beautifully easily allow editors to create any combination of rows made up of any combination of column width-chunks per row.

The lack of a need for different or many templates, indeed the ability to do this all within the same template, due to the presence of the brilliant Repeater panel feels superb, flexible, simple, unless I am missing something.

Does that explain much better what I was trying to do and does it now seem to you also that the Repeater looks a great way to solve this?

Edit: PS this shows a more sophisticated layout example.

Edited by alan
Link to comment
Share on other sites

It sounds like it really is only the column width that varies, and not the actual data. As a result, I think you can accomplish this just by adding an integer field to your repeater and asking the user to enter a number between 1 and 12, indicating the number of grid columns they want the item to fill. It sounds like you are using an HTML/CSS framework that uses "grid_[n]" classes to carry the width, so I would just map that directly to a field. Once you've got it working, you might prefer to map it to a select with predefined values like 1/4th (3), 1/2th (6) and full (12). It'll be easier for the non-developer to understand that 1/4th means "quarter width" as opposed to "3 columns of 12". But I'd get it working the simplest possible way first (integer field), and then optimize it with pre-defined selections once you know it all works. I'm guessing those columns naturally wrap on their own when at the end of a row, so you dont' really have to worry about clearing floats.

foreach($page->segments as $segment) {
   $width = (int) $segment->segment_width; 
   if($width < 3 || $width > 12) $width = 12;  
   echo "<div class='grid_$width'>";
   // output your content
   echo "</div>";

  • Like 1
Link to comment
Share on other sites

Fantastic! Yes you are exactly correct Ryan and thank you for again showing how beautifully simple PHP + API (plus cool Repeater fn) makes such a task in PW.

And sage advice also re getting it working then adding the select afterwards.

And yes, no float clearing is required with the grid.

Thank you very much indeed for this help, code squirrel-ed away in snippet store so I learn from it ;)

Cheers! -Alan

Link to comment
Share on other sites

You have the same screenshot on both situations, but I think I get what you want to do. If it's what I think, maybe you can do it even without telling the editor to set the width. I would do it like this:

on the PW tree:






each page "row" will have repeatable fields for segments (put only the tinyMCE text here, not the width field)

Now, the editor can create a new row by adding a new page and populating it with as many segments as he wants.

On your template for "rows" you can count how many segments were added, and give classes to them accordingly. So, assuming that this repeatable field is called "segments":

foreach($page->children as $row){
  $n = $row->segments->count();
  echo "<li class="row">;
  foreach($row->segments as $segment){
  if($n == 1) echo "<div class='grid_4'>{$segment->body}</div>";
  if($n == 2) echo "<div class='grid_3'>{$segment->body}</div>";
  if($n == 3) echo "<div class='grid_2'>{$segment->body}</div>";
  if($n == 4) echo "<div class='grid_1'>{$segment->body}</div>";
  echo "</li>";

I didn't test the code, and I'm skipping all checkings if the fields exist and what to do if editors add more fields.

And I've seen that there are already two more answers while I was writing, but I will post this anyway and read them after :)

EDIT: nice answer Ryan!

EDIT2: My code can be smaller and more automatic of course, but I will keep it like this to be more understandable

Link to comment
Share on other sites

I have the approach I was trying for (using a Repeater) working beautifully simply courtesy Ryan's code plus an adjustment for using the select, thanks again everyone for all comments!

foreach($page->segments as $segment) {
$width = $segment->segment_width->segment_data;
echo "<div class='grid_$width'>";
 echo $segment->segment;
echo "</div>";

I'm going to write up how I did this (the select with the etc), as much for me as an aide memoir as anything, and when I have I'll link it here in case it helps anyone else.

  • Like 1
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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Robin S
      Repeater Easy Sort
      Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items.
      The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield.
      A Repeater field

      A Repeater Matrix field with custom header colours

      Easy-sort mode
      Each Repeater/Matrix item gets an double-arrow icon in the item header. Click this icon to enter easy-sort mode.
      While in easy-sort mode:
      The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings. Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened. You can drag an item left/right/up/down to sort it within the items. The item that you clicked the icon for is shown with a black background. This makes it easier to find the item you want to move in easy-sort mode. You can click an item header to open the item. An "Exit easy-sort mode" button appears at the bottom of the inputfield. Configuration
      In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here.
      In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header.
      The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option.
    • 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
      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!
  • Create New...