Create columns Front-End

• pepacobos

• November 17, 2016 at 4:51 am

Hello, I am using ACF Pro and repeater fields, I need to add classes so the information is shown as columns.

If I have 4 columns in a row I need the first one to have the class “first”, the fifth one again, the ninth one again (each first of a row) and so on…

Any idea how can I accomplish this?

I have the code to show the information and only need to know how can i add classes selectively to first item in a row.

Thanks!!

• James

• November 17, 2016 at 2:39 pm

Hi @pepacobos

I believe you are talking about the front end, right? Could you please share your code so I can create a modification from it?

If you use the basic loop, I think you can set the class to the first column like this:

// check if the repeater field has rows of data
if( have_rows('repeater_field_name') ):

 	// loop through the rows of data
    while ( have_rows('repeater_field_name') ) : the_row();

        // display a sub field value
        ?>
        <div class="first"><?php the_sub_field('sub_field_name_1'); ?></div>
        <div><?php the_sub_field('sub_field_name_2'); ?></div>
        <div><?php the_sub_field('sub_field_name_3'); ?></div>
        <div><?php the_sub_field('sub_field_name_4'); ?></div>
        <?php
    endwhile;

else :

    // no rows found

endif;

I hope this helps 🙂

• pepacobos

• November 17, 2016 at 10:25 pm

Thanks James! The thing is that it is a flexible content or repeater (both can do the work) and I don’t know how many elements will be there so I need to add a counter and some sort of “magic” so it knows when an element is the first one of each row.

Now I have:

if( have_rows('tribuna') ):

	while( have_rows('tribuna') ): the_row(); 
	

		// vars
		$image = get_sub_field('imagen');
		$content = get_sub_field('resumen');
		$link = get_sub_field('enlace');
		$title = get_sub_field('titulo');

		if( get_row_layout() == 'articulo_tribuna'):?>

				<div class="medio-tribuna one-fourth first">

				<?php if( $link ): ?>
					<a href="<?php echo $link; ?>">
				<?php endif; ?>
	
					<img src="<?php echo $image; ?>" />
	
				<?php if( $link ): ?>
					</a>
				<?php endif; ?>
				    <h2><?php echo $title; ?></h2>
				    <?php echo $content;?></div> 
		    
		    	<?php

	 endif;
		endwhile; 
		
		else: //no layouts found
		
		endif;	

It is working but every element is first element… I need class”first” to be added only to first of each row (of 4)

Does it make any sense?

• James

• November 18, 2016 at 3:40 pm

Hi @pepacobos

In this case, you should be able to do it like this:

if( have_rows('tribuna') ):

	while( have_rows('tribuna') ): the_row(); 
	
		// vars
		$image = get_sub_field('imagen');
		$content = get_sub_field('resumen');
		$link = get_sub_field('enlace');
		$title = get_sub_field('titulo');

		if( get_row_layout() == 'articulo_tribuna'):
        
            if(get_row_index() % 4 == 1){
                $first = ' first';
            }else{
                $first = '';
            }
            
        ?>

				<div class="medio-tribuna one-fourth<?php echo $first; ?>">

				<?php if( $link ): ?>
					<a href="<?php echo $link; ?>">
				<?php endif; ?>
	
					<img src="<?php echo $image; ?>" />
	
				<?php if( $link ): ?>
					</a>
				<?php endif; ?>
				    <h2><?php echo $title; ?></h2>
				    <?php echo $content;?></div> 
		    
		    	<?php

        endif;
        
    endwhile; 

    else: //no layouts found

endif;

You can also do the calculation manually like this:

if( have_rows('tribuna') ):

    $i = 1;

	while( have_rows('tribuna') ): the_row(); 
	
		// vars
		$image = get_sub_field('imagen');
		$content = get_sub_field('resumen');
		$link = get_sub_field('enlace');
		$title = get_sub_field('titulo');

		if( get_row_layout() == 'articulo_tribuna'):
        
            if($i % 4 == 1){
                $first = ' first';
            }else{
                $first = '';
            }
            $i++;
            
        ?>

I hope this helps 🙂

• pepacobos

• November 21, 2016 at 8:33 pm

Thanks!!!!!

That’s it. I have to learn a lot much more….

One more thing… Can I automatically cut the lenght of one of the subfields?, say I want the “resumen” subfield to be 250 characters long and then a “Read More” link that goes to the “enlace” subfield. Can I do that?

Thanks again James, today you are my hero!

• James

• November 22, 2016 at 11:11 am

Hi @pepacobos

You can use the wp_trim_words() to trim the words or trim() and substr() to trim the characters. Here’s how to do it:

$content = wp_trim_words( get_sub_field('resumen'), $num_words = 10, '<a href="'.get_permalink().'">...Read More</a>' );

And for the characters:

$content = trim(substr( get_sub_field('resumen'), 0, 50)).'<a href="'.get_permalink().'">...Read More</a>';

Hope this helps 🙂