Conditionally Output Elements if Nth Position inside a Repeater (ACF)

le 26/10/2021
JAG

When using Oxygen’s repeater component with ACF repeater fields, sometimes we may not want to have every element appear in every row and may need them to be output conditionally depending on the row position.

There are a few reasons we may need to do this, some of these could be..
We have an alternating layout where certain elements are only displayed if the item is inside an odd or even row.We have a layout where we want to display more content only on the first row inside the repeater.We want to limit the number of rows that are shown (eg never show more than five items on this template)
In this members-only tutorial, we’ll look at how we can use Oxygen’s conditions feature inside of the repeater component to acheive this.

Using ACF’s get_row_index
ACF Pro has a function that allows us to get the row index, which is the current row inside of the repeater. For eg, to see the function at work, if we were to put a code block inside a repeater and then add the following PHP..

..we would then see a counter starting at 1 and going up by 1 for each new row in the repeater. It’s an easy way to determin which row we are in without having to use a counter and we can conditionally output elements based on this number.
Output only if nth row
Let’s say we’re using the repeater component on a page for a ACF repeater field for some videos. The video repeater field could have several sub fields such as video title, video src, video description and an image.
Although each video would have all sub fields populated, for use elsewhere on the site. It may be that here we only require the first two videos to be visible, the rest we may just want have a text link and to display an image or some other content instead.
To have the video component only output for the first two items in the repeater, we can add a condition based on the row index of each. The video component will only be output if the row index is less than or equal to 2.We already have the function we need from ACF ‘get_row_index’, so we can use the PHP Function Return Value option in the conditions modal using ‘get_row_index’ as the function name. In this case, we would need to set the condition to be true only if the get_row_index returns a value less than or equal to 2.

Now our video component will only appear on the first and second rows. Of course the value here that we have set at two can also be added via dynamic data, coming from another ACF field on the page. If we wanted we could also pass on this control to the client, allowing them to choose the number of videos to display in a particular repeater.
Every Nth Row
Another thing we may wish to do is show elements that are inside every nth row. This can be useful when having an alternating layout than only requires an element to display on every second row, say.
To do this, we can still use the same get_row_index function, but we will need to create custom condition to get what we need.
In a code snippet, we can add our custom condition using the conditions API..
if ( function_exists( 'oxygen_vsb_register_condition' ) ) {

oxygen_vsb_register_condition(
// Condition Name
'ACF repeater row (every nth)',

// Values: The array of pre-set values the user can choose from.
// Set the custom key's value to true to allow users to input custom values.
array(
'options' => array(),
'custom' => true
),

// Operators
array( '==', '!=' ),

// Callback Function: Name of function that will be used to handle the condition
'acf_repeater_nth',

// Condition Category
'ACF'
);

}

/**
* Callback function to handle the condition.
* @param mixed $value Input value - in this case, number to be divisible by.
* @param string $operator Comparison operator selected by the user.
*
* @return boolean true or false.
*/
function acf_repeater_nth( $value, $operator ) {

$row_index = get_row_index();
$value = intval($value);

return ('==' === $operator) ? ( $row_index % $value === 0 ) : ( $row_index % $value !== 0 );
}
Now if we wanted the element to display in just the even rows 2nd,4th,6th,8th, then we can use this new condition with ‘==’ as the operator with the value being 2.

For odd rows, replacing the operator with ‘!=’ with the same value of 2 would leave us with the element displaying on the 1st, 3rd, 5th, 7th.. etc rows.
For every 3rd row, 3rd,6th,9th.. we would have the operator as ‘==’ and the value instead set as 3.
All done.

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat