Unique layout for odd/even items in query builder

How To
1

Hi there, first post, thanks in advance for your help. Is there a way to conditionally show elements within a query builder block based on whether it’s an odd- or even-numbered iteration of the query? e.g., say I wanted to render a button on posts 2, 4, 6… – is this doable?

(I’m leaving aside that I could use custom CSS to make it doable visually, albeit with clutter in the DOM. Hoping there is a more optimal solution.)

Thanks again!

2

this would be done in a custom code block,

example code: 
<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 10,
);
$query = new WP_Query($args);
$i = 0;

if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
        $i++;
        ?>
        <div class="post">
            <h2><?php the_title(); ?></h2>
            <div><?php the_excerpt(); ?></div>

            <?php if ($i % 2 == 0): ?>
                <!-- Render your button on even-numbered posts -->
                <button class="even-post-btn">Even Post Button</button>
            <?php endif; ?>
        </div>
    <?php
    endwhile;
    wp_reset_postdata();
endif;
?>
3

we dont need custom codes anymore

learn the selector detector custom selection deeply :slight_smile:

now that we can select anything all the native css selectors are valid for any case dynamicly…

simple

image
image1688×856 66.7 KB

image

2 Likes
4

@sinanisler however advanced this is, you cannot remove the item from the dom completely using this technique.

your approach, like @sam_marvelsnap mentioned, will dirty the dom with clutter that is not needed.

i can see usecases on your approach on many projects of mine just not this one yet.

if we were able to manipulate “hide element from builder/front-end” with classes like this than that would be the optimal solution

1 Like
5

Yes it is. You can add a code block at the beginning of your card. Initialize a variable with zero acting as index and count it up on every iteration.

In the button condition check for
counter % 2 == 0

6

Thanks @Maexxx @Odinn_k @sinanisler!

I’ll mark Maexxx’s as the correct answer, as it is the closest to what I’m looking for, though there are good use cases for the other answers as well. And my ideal answer might be if Bricks had something built into the conditions field, where we didn’t have to add custom code blocks to the builder.

1 Like