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 🙂
The topic ‘Create columns Front-End’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.