Separating last row from others

• MTN-Studio

• June 20, 2018 at 9:14 am

Hi guys, I’ve created a repeater field that calls a color picker for each row. My aim is to use this to populate a css field for a gradient.

The idea is for a bike shop where the colors will be used for a little visual element on each listing. Currently my code looks like the following:

<div class="colorbar" id="colorbar-<?php the_ID(); ?>"></div>
<style>
#colorbar-<?php the_ID(); ?>{ 
    <?php if( have_rows('bike_color') ): ?>
    <?php while ( have_rows('bike_color') ) : the_row(); ?>
        background-image: linear-gradient(to right, <?php the_sub_field('color'); ?> );
    <?php  endwhile; ?>
     <?php endif ?>
}
</style>

Because of how the sub_field for color is output with just a hexcode, the gradient fails because it requires a comma between each color.

I had an idea of doing something along the following:
All rows:
‘
$rows = get_field( ‘bike_color’);
$end_row = end( $rows ); // get the end row
$color_select = $end_row[‘color’]; // get the sub field value
$each_row = $color_select . ‘, ‘; //adding a comma after the sub field output
echo $each_row;
‘
Last row:
‘
$rows = get_field( ‘bike_color’);
$end_row = end( $rows ); // get the end row
$color_select = $end_row[‘color’]; // get the sub field value
$last_row = $color_select; // No comma added for last row.
echo $last_row;
‘

Basically I want to output all rows except for the last with a comma added and then output the last row without a comma because if it’s added to the last color selected, it fails in the css selector. I think it would work nicely for what I’m planning because if a single color was selected, it’d be the last row and so the comma would be removed.

I think I’m fairly close but any help would be greatly appreciated. 🙂

bike1.png.png

• John Huebner

• June 21, 2018 at 11:06 pm

This is where the php implode() function comes in handy. To be honest, I’m not exactly sure what your doing in your code, seems to be something missing that I need to put it all together. But here’s a short example:

if (have_rows('bike_color')) {
	$colors = array();
	while (have_rows('bike_color')) {
		the_row();
		$colors[] = get_sub_field('color');
	}
	echo implode(', ', $colors);
}

• MTN-Studio

• June 22, 2018 at 5:47 am

Beautiful, I knew it was something simple that I was missing. I took your example and tweaked it so that if the user only inputs a single color, it’ll fall back to background-color rather than background-image for the gradient. Thanks for your help! Much appreciated! 🙂

<?php 
if( have_rows('bike_listing-color') ) { //Bike color bar
$colors = array(); 
?>
<div class="colorbar" id="colorbar-<?php the_ID(); ?>"></div> 
<?php 
while (have_rows('bike_listing-color')) {
  the_row();
  $colors[] = get_sub_field('color');
  $count = count($colors);
} 
if ( $count > 1 ) { ?>
<style>
  #colorbar-<?php the_ID(); ?>{
    background-image: linear-gradient(to right, <?php echo implode(', ', $colors); ?>);
  }
</style>
<?php } else { ?>
<style>
  #colorbar-<?php the_ID(); ?>{
    background-color: <?php echo implode($colors); ?>;
  }
</style>
<?php } ?>
<?php } // End if have_rows ?> 

• scooterlord

• February 27, 2021 at 1:18 am

Thank you John, you have been an invaluable member of this forum!