Support

Account

Home Forums ACF PRO Create columns Front-End

Solved

Create columns Front-End

  • 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!!

  • 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 πŸ™‚

  • 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?

  • 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 πŸ™‚

  • 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!

  • 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 πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.