A repeater in random order including select fields

• morgyface

• September 19, 2013 at 11:04 pm

Now before you get cross and want to murder me to death I realise there are many posts out there which deal with random ordered repeaters. I’ve tried many things including a more traditional PHP approach, but all to no avail due to the complexity of the repeater, in that one of the fields asks “what colour logo do you want”.

Here is the code (simplified) I have at the moment which dishes out the repeaters perfectly in order, what I now want is for them to appear in a random order.

<?php if(get_field('slider_image')): ?>
  <?php while(has_sub_field('slider_image')): ?>
    <?php the_sub_field('the_caption'); ?>
    <img src="<?php bloginfo('template_directory'); ?>/logo_<?php if(get_sub_field('logo_colour') == "White") { echo 'white'; } else { echo 'grey'; }?>.png" />
  <?php endwhile; ?>
<?php endif; ?>

Please can any of you wise people help me?

• Nuro

• September 20, 2013 at 12:43 am

Do you want the “else” color to be random?

• morgyface

• September 20, 2013 at 12:46 am

Hi Nuro, thanks for taking a look.

In answer to:

Do you want the “else” color to be random?

No I only want the order of the rows to be random.

• Nuro

• September 20, 2013 at 12:55 am

Sorry, missed the caption field. So if I understand correctly you want the order of the img and the caption to be random?

• morgyface

• September 20, 2013 at 1:05 am

Sorry Nuro, this is probably me being awful at explaining things.

Say at the moment the code is pumping out:

• Caption One <grey logo>
• Caption Two <white logo>
• Caption Three <grey logo>

Three separate entries. Logo colour defined and fixed to the caption.

I want it to pump out something like:

• Caption Two <white logo>
• Caption Three <grey logo>
• Caption One <grey logo>

OR

• Caption Three <grey logo>
• Caption One <grey logo>
• Caption Two <white logo>

OR any random order really. Notice the caption and the logo colour remain the same so it’s just jumbling up the order of the entries not the contents within each entry.

So in essence something like:

<?php if(get_field('slider_image')): ?>
  <RANDOM ORDER>
  <?php while(has_sub_field('slider_image')): ?>
    <?php the_sub_field('the_caption'); ?>
    <img src="<?php bloginfo('template_directory'); ?>/logo_<?php if(get_sub_field('logo_colour') == "White") { echo 'white'; } else { echo 'grey'; }?>.png" />
  <?php endwhile; ?>
<?php endif; ?>

Flippin’ eck I’m terrible at this stuff.

• Nuro

• September 20, 2013 at 1:42 am

This should work. Put it in a list for now, will have to change that.

<?php
 
$rows = get_field('slider_image' );
$sub_field = has_sub_field('slider_image');
$rand_row = $rows[ array_rand( $rows ) ];
$logo_colour = get_sub_field('logo_colour');
$caption = get_sub_field('the_caption');
$template_directory = bloginfo('template_directory');

if($rows) // if slider_image exits
	{
      echo '<h3>Header</h3>';
      echo '<ul>';

		while($sub_field) // enables us to use get_sub_field
		    {
		    	
		    	$rows = $rand_row; // random order of rows

				foreach ($rows as $row) {

					echo '<li>' . $caption . '</li>'; // displays caption

					if(($logo_colour) == "white")) { // displays white logo if selected, else grey

						echo '<li><img src="'. $template_directory . '/logo_white.png" /></li>';

					} else {
						
						echo '<li><img src="'. $template_directory . '/logo_grey.png" /></li>';

					}

				} 
	      	        
	   echo '</ul>';
	}
             
?>

• morgyface

• September 20, 2013 at 1:58 am

That is brilliant, however it’s not working, my code editors flagging up syntax issues, any ideas? Thanks for all your help it’s much appreciated.

• Nuro

• September 20, 2013 at 2:03 am

Did you try uploading it? What error message does it display?

• morgyface

• September 20, 2013 at 2:13 am

I think I’ve sorted it… there was one too many ) and we were one } short.

<?php
 
$rows = get_field('slider_image' );
$sub_field = has_sub_field('slider_image');
$rand_row = $rows[ array_rand( $rows ) ];
$logo_colour = get_sub_field('logo_colour');
$caption = get_sub_field('the_caption');
$template_directory = bloginfo('template_directory');

if($rows) // if slider_image exits
	{
      echo '<ul class="invisible">';

		while($sub_field) // enables us to use get_sub_field
		    {
		    	
		    	$rows = $rand_row; // random order of rows

				foreach ($rows as $row) {

					echo '<li>' . $caption . '</li>'; // displays caption

					if (($logo_colour) == "White") { // displays white logo if selected, else grey

					echo '<li><img src="' . $template_directory . '/logo_white.png" /></li>';

					} else {
						
					echo '<li><img src="' . $template_directory . '/logo_grey.png" /></li>';
                    }

				    }

				} 
	      	        
	   echo '</ul>';
	}
             
?>

It’s difficult to test as the site is live but I’m going to have a go now!

Thanks again!

• morgyface

• September 20, 2013 at 2:51 am

Okay we’re getting closer… I think the problem seems to be it’s not stopping the output… it’s pumping out an infinite number of entries. If there’s only three entries I only want three entries, I just want those three entries in random order.

It’s close… any other ideas?

I’m thinking

endwhile

• Nuro

• September 20, 2013 at 3:19 am

Hi, forgot to set a limit to the array… for my use I was using a for loop.

Change:

$rand_row = $rows[ array_rand( $rows ) ];

to:

$row_count = count($rows);
$rand_row = $rows[ array_rand( $rows, $row_count ) ];

• morgyface

• September 20, 2013 at 3:40 am

Still no joy unfortunately… it’s just not loading when in place.

• Nuro

• September 20, 2013 at 3:43 am

Is it still not stopping loading or now not loading? If it’s not stopping loading, does it at least load it correctly (meaning in random order).

• morgyface

• September 20, 2013 at 3:46 am

Well I’m assuming it’s not loading at all, when it was trying to deliver an infinite output of rows I was able to stop the loading and view source to see what it had done. Now the source is empty.

It’s a tough one! Thanks for your patience and commitment!

• Nuro

• September 20, 2013 at 4:05 am

Ah k, well hopefully this works 🙂

Change:

$rows = $rand_row;

To:

$rows = $rand_row($rows);

If that doesn’t work, I can get it to work a different way.

• Nuro

• September 20, 2013 at 4:07 am

Sorry I meant:

$rows = $rand_row['slider_image'];

• Nuro

• September 20, 2013 at 4:09 am

And get rid of:

$row_count = count($rows);

So change:

$row_count = count($rows);
$rand_row = $rows[ array_rand( $rows, $row_count ) ];

Back to:

$rand_row = $rows[ array_rand( $rows ) ];

• Nuro

• September 20, 2013 at 4:13 am

This is the updated code:

<?php
 
$rows = get_field('slider_image' );
$sub_field = has_sub_field('slider_image');
$rand_row = $rows[ array_rand( $rows ) ];
$logo_colour = get_sub_field('logo_colour');
$caption = get_sub_field('the_caption');
$template_directory = bloginfo('template_directory');

if($rows) // if slider_image exits
	{
      echo '<h3>Header</h3>';
      echo '<ul>';

		while($sub_field) // enables us to use get_sub_field
		    {
		    	
		    	$rows = $rand_row['slider_image']; // random order of rows

				foreach ($rows as $row) {

					echo '<li>' . $caption . '</li>'; // displays caption

					if(($logo_colour) == "white") { // displays white logo if selected, else grey

						echo '<li><img src="'. $template_directory . '/logo_white.png" /></li>';

					} else {
						
						echo '<li><img src="'. $template_directory . '/logo_grey.png" /></li>';

					}

				} 
	      	        
	   echo '</ul>';
	}

}
             
?>

• Nuro

• September 20, 2013 at 4:26 am

Should have probably asked this before, but is:

the_caption – > text box?

colour_type -> Select with choices gray or white?

• morgyface

• September 20, 2013 at 4:35 am

Hi Nuro,

The code didn’t work unfortunately, but I think you’ve already started thinking of alternatives…

Yes the caption is just a text field. The entry is usually a single word.

Colour type is indeed a select drop-down containing two entries at the moment… grey or white.

I was just thinking myself if we could eliminate the “if” statement, by just using the field…

I’ve just changed the original code to:

<img src="<?php bloginfo('template_directory'); ?>/logo_<?php the_sub_field('logo_colour'); ?>.png">

And all seems to work.

I hope this makes it easier.

• Nuro

• September 20, 2013 at 4:39 am

Ah think it makes sense now… forgive my previous mistakes, was confused about your objective 😛

So I think I get it know:

You enter each caption and then choose a color corresponding to that caption right? So you enter caption 1 and choose the image for that caption to be grey.

In that case, this is what you want to do:

<?php
		
		$template_directory = bloginfo('template_directory');

        $rows = get_field('slider_image');

        if($rows) {

            echo '<ul>';

            $i = 0;

            while(has_sub_field('slider_image')) {

                  $field = get_sub_field_object('logo_colour');
                  $value = get_sub_field('logo_colour');
                  $label = $field['choices'][ $value ];

                  echo '<li>' . $rows[$i]['the_caption'] . '</li>';
                  echo '<li><img src="'. $template_directory . '/logo_'. $label . '.png" /></li>';
                  
                  $i++;

            }

              echo '</ul>'; 
       }
           
?>

• morgyface

• September 20, 2013 at 4:57 am

Okay so this almost worked… it outputted the following

http://domain.com/template-directory
<ul>
<li>Caption 1</li>
<li>[img src="logo_Grey.png" ]</li>
<li>Caption 2</li>
<li>[img src="logo_Grey.png" ]</li>
<li>Caption 3</li>
<li>[img src="logo_White.png" ]</li>
</ul>

No random order unfortunately, no real progression from my original (revised) code.

<?php if(get_field('slider_image')): ?>
  <?php while(has_sub_field('slider_image')): ?>
    <?php the_sub_field('the_caption'); ?>
    <img src="<?php bloginfo('template_directory'); ?>/logo_<?php the_sub_field('logo_colour'); ?>.png" />
  <?php endwhile; ?>
<?php endif; ?>

Once again thank you for persevering!

• Nuro

• September 20, 2013 at 5:17 am

Give me one sec, goning to test something on my site.

• morgyface

• September 20, 2013 at 6:18 am

Okay, so I’ve sussed it, it took a while. The two main problems I encountered were:

1. the if/else statement for the logo, I got round it by using the input of the selection not the choice.
2. I was using bloginfo as opposed to get_bloginfo which returns a variable.

Here’s the final code which works a treat.

<?php 
$template_directory = get_bloginfo('template_directory');
$rows = get_field('slider_image');
shuffle ($rows);
if($rows)
{

	foreach($rows as $row)
	{
		echo $row['the_caption'] . '<img src="' . $template_directory . '/logo_' . $row['logo_colour'] . '.png" />'. PHP_EOL;
	}
 
}
?>

Thank you so much Nuro for all your help, I wouldn’t of got there without your assistance.

I’m off to the pub now!

• Nuro

• September 20, 2013 at 7:34 am

Nice job! I ended up getting it to work, but using the shuffle function is so much easier lol. Think I was trying to shuffle the caption and color each at the same time, while you are just shuffling the row number with the row content.

Glad you got it to work! 🙂

Will refer back to this, need to do something similar with my project.