Repeater in Two Columns (again)

• EB

• October 26, 2017 at 2:10 am

This is a bit redundant to previous posts, my apologies up front.

I have been able to get this to work thanks to the forum post Splitting Repeater Fields.

But I am not quite there with a couple of issues beyond my experience.

1) Like the example in the post referenced above, I too am getting the last item of my first column, repeated in the second column. I cannot see the fix. That is, two menu items repeat. Example here: Menu.

2) Per the example above, I will have multiple sections with varying #s of rows, dependent on the menu section. Can I get this to automatically calculate rows to create the column split, OR will I have to customize and repeat this snippet for each section based on a fixed number of items?

3) I am using this in an Archive loop. Is it possible to dynamically render the Repeater Field Name (ex. appetizers) from another value using “the_title” or “URL last segment” OR can I only use the repeater field name, thus having to generate this code segment for each section in my template? My efforts to render anything other than the specific repeater field name have failed to return the repeater field.

<div class="section">	
	<div class="secthead"><?php the_title( '<h2>', '</h2>' ); ?>
	</div>
	<div class="items">

		<?php $count = 0; while (have_rows('appetizers')) {the_row();if ($count > 0 && ($count % 5 == 0)) {?>
          <ul><li>
            <h4><?php the_sub_field('item'); ?></h4>
            <p><?php the_sub_field('desc'); ?>
			$<?php the_sub_field('price'); ?></p>  
			  </li></ul>
        </div>
        <div class="items">
          <?php } ?>
            <ul><li>
            <h4><?php the_sub_field('item'); ?></h4>
            <p><?php the_sub_field('desc'); ?>
			$<?php the_sub_field('price'); ?></p>  
			  </li></ul> 
          <?php $count++; } ?>
        </div>            
    </div>

• gummi

• October 28, 2017 at 6:00 pm

For 1) and 2)
Are you restricted on old browser supports? cause i’d 100% suggest you just use the css columns to do that layout. it’s supported on all browser last 2 latest version now.
http://caniuse.com/#search=column

Example:

<ul class="items">
    <?php while (have_rows('appetizers')): the_row(); ?>
        <li>
            <h4><?php the_sub_field('item'); ?></h4>
            <p><?php the_sub_field('desc'); ?>$<?php the_sub_field('price'); ?></p>  
        </li>
    <?php endwhile; ?>
</ul>
<style>
.items {
    column-count: 2;
    column-gap: 20px;
}
</style>

If you can’t or don’t wanna use the css way, this is a cleaner way to split them:

<?php
    // get repeater values as array
    $appetizers = get_field('appetizers');

    // calculate how many items first
    $items_count = count($appetizers);

    // calculate how much half is, round up
    $items_half = ceil($items_count / 2);

    // split the repeater 
    $appetizers_chunks = array_chunk($appetizers, $items_half);
?>

<div class="section">   
    <div class="secthead"><?php the_title( '<h2>', '</h2>' ); ?></div>

    <?php foreach ($appetizers_chunks as $chunk): ?>
        <div class="items">
            <ul>
                <?php foreach ($chunk as $value): ?>
                    <li>
                        <h4><?php echo $value['item']; ?></h4>
                        <p><?php echo $value['desc']; ?> $<?php echo $value['price']; ?></p>  
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endforeach; ?>
</div>

3) i’m not sure if i understand the question. Is your repeater field not already set on the category edit? where’s the repeater field at?

Cheers

• EB

• October 31, 2017 at 11:33 pm

gummi,
Thanks! I’ll check out your solutions for 1 & 2 today.

# 3 Clarification
I am not sure I understand your question either! Let me give more detail. 😉

To keep this simple for the client to edit, the Menu sections are individual posts:
Custom Post Type = Lunch > Posts: Appetizers, Salads, Platters, etc. This seemed the most basic editing structure for the client.

The idea being through displaying a simple archive page, Menus are built by listing the articles and their respective content.

The posts(menu sections) are composed only of the WordPress Title and a Repeater Field.

The respective repeater field in each article is named the same as the article title:

• Appetizer (title) > appetizer (repeater_field_name)
  Salads (title) > salads (repeater_field_name)
  Platters (title) > platter (repeater_field_name)

So essentially I am trying to save some code using one section block in the archive template thus insuring the menus are built dynamically, requiring no code editing in the template, by the client if they add or delete sections.

If there is not a way to custom render the Repeater Field Name in this section block of code, of course I will have to build multiple loops calling individual articles in a page template type structure.

Does that help?

Thanks again for your input!

• gummi

• November 2, 2017 at 3:21 pm

Whoa! somehow your reply managed to break the css of this page. nice, i approved 😉

anyway, to answer the 3) question. Yeah, if you wanna make it dynamic based on the post’s title, you can use the php’s strtolower function on the post_title.

For example:

<?php
    // field name
    $field_name = strtolower(get_the_title());    

    // get repeater values as array
    $appetizers = get_field($field_name);

    // calculate how many items first
    $items_count = count($appetizers);
...
...
?>

Cheers

• John Huebner

• November 2, 2017 at 11:08 pm

I fixed the problem. This happens when you insert <li> tags into a post without wrapping them in a <ul> tag. I actually see this a lot here. You can’t just click the li button in the editor without first clicking ul or ol

• EB

• November 2, 2017 at 11:32 pm

Thanks John, my bad. I knew I had tagged something poorly. Moving too fast when I responded. Thanks again.

It’s been sometime since I had to consider that in a visual text editor.

• EB

• November 8, 2017 at 1:22 am

Thank you Gummi! This worked well for my application! John, sorry about breaking the page!

Resolved.