Code to detect a populated repeater and then output repeated items

[alan]

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 March 19, 2012 by alan

[diogo]

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

[alan]

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>
 <div class='half'>
  Echo Segment_#2 >- Segment
 </div>
^
|
[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]
|
v
if($completed == $number_of_segments)
 end
else
 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 March 19, 2012 by alan

[ryan]

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

block-magazine

block-basic (again)

block-property-photo

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

<div class'block block-basic'>
<h3><?=$page->title?></h3>
<?=$page->body?>
</div>

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.

[alan]

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 March 19, 2012 by alan

[ryan]

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>";
}

[alan]

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

[diogo]

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:

home

-rows

--row1

--row2

--row3

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

[alan]

THANKS diogo, that looks great also Thread bookmarked

[alan]

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.