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