PHP loop + HTML issue

[paulo]

I'm developing a bootstrap theme for wordpress, I'm new to php and I've been using ACF. I need to display 5 images, 2 of them side by side occupying 6 columns, and the others below, occupying 4 columns each. The problem is that I'm not getting the loop right, causing the images to appear one below the other stacked. How should I do?

 

<div class="row m-0">
            <div class="col-12 p-0">
                <ul class="nav nav-tabs" role="tablist">
                    <?php $conta = 1;
                    $args = array(
                        'taxonomy'          => 'categoriaProduto',
                        'hide_empty'        => 0,
                        'parent'            => 0,
                        'order'             => 'DESC'
                    );
                    $my_categories = get_categories($args); ?>
                    <?php foreach ($my_categories as $category) : ?>
                        <li class="nav-item"><a class="nav-link <?php echo $conta == 1 ? 'active' : ''; ?>" href="#produto<?php echo $conta; ?>" role="tab" data-toggle="tab"><?php echo $category->name; ?></a></li>
                    <?php $conta++;
                    endforeach; ?>
                </ul>
                <div class="tab-content">
                    <?php $conta = 1;
                    $args = array(
                        'taxonomy'          => 'categoriaProduto',
                        'hide_empty'        => 0,
                        'parent'            => 0,
                        'order'             => 'DESC'
                    );
                    $my_categories = get_categories($args); ?>
                    <?php foreach ($my_categories as $category) : ?>
                        <div role="tabpanel" class="tab-pane fade <?php echo $conta == 1 ? 'active show' : ''; ?>" id="produto<?php echo $conta; ?>">
                            <div class="row">
                                <div class="col-12 m-0">
                                    <div class="slick-2 d-sm-flex flex-sm-wrap">
                                        <?php $args = array(
                                            'post_type'         => 'produto',
                                            'ordeby'            => 'date',
                                            'order'             => 'DESC',
                                            'posts_per_page'    => 5,
                                            'tax_query'         => array(array(
                                                'taxonomy'          => 'categoriaProduto',
                                                'field'             => 'term_id',
                                                'terms'             => $category->term_id
                                            ))
                                        );
                                        $wp_query = new WP_Query($args);
                                        $cont = 1;
                                        if (have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
                                                <div class="<?php echo $cont <= 2 ? 'col-6 pb-3' : 'col-4'; ?>">
                                                    <a href="<?php the_field('produto_url'); ?>">
                                                        <picture>
                                                            <?php if (have_rows('destaques')) : ?>
                                                                <?php while (have_rows('destaques')) : the_row(); ?>
                                                                    <?php $imagem = get_sub_field('imagem'); ?>
                                                                    <?php if ($imagem) : ?>
                                                                        <source media="(min-width:769px)" srcset="<?php echo esc_url($imagem['url']); ?>" alt="<?php echo esc_attr($imagem['alt']); ?>" />
                                                                    <?php endif; ?>
                                                                    <?php $imagem_mobile = get_sub_field('imagem_mobile'); ?>
                                                                    <?php if ($imagem_mobile) : ?>
                                                                        <source media="(max-width:768px)" srcset="<?php echo esc_url($imagem_mobile['url']); ?>" alt="<?php echo esc_attr($imagem_mobile['alt']); ?>" />
                                                                    <?php endif; ?>
                                                                    <img loading="lazy" class="img-fluid w-100 radius" src="" alt="">
                                                                <?php endwhile; ?>
                                                            <?php else : ?>
                                                                <?php ?>
                                                            <?php endif; ?>
                                                        </picture>
                                                        <img class="icon-plus" src="<?php bloginfo('template_directory'); ?>/assets/img/i-plus.svg">
                                                    </a>
                                                </div>
                                            <?php $cont++;
                                            endwhile;
                                        else : ?>
                                        <?php endif; ?>
                                        <?php wp_reset_query(); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php $conta++;
                    endforeach;
                    ?>
                </div>
            </div>
        </div>

 

[requinix]

<div class="<?php echo $cont <= 2 ? 'col-6 pb-3' : 'col-4'; ?>">

This looks correct: for $cont=1-2 you use "col-6 pb-3" while for $cont=3-5 you use "col-4".

Look at the HTML being outputted for this portion of the page. Does it look correct too? Do you need to add a couple <div class="row">?

[paulo]

Thanks for your time!

I removed the pair of rows, but i still have this stacking. I don't know what to do anymore.

[requinix]

12 minutes ago, paulo said:

I removed the pair of rows, but i still have this stacking. I don't know what to do anymore.

Removed? No, if anything you should be adding rows. Because Bootstrap's grid system relies on using that row > col structure.

But don't mind that for the moment. Start with looking at the HTML in your browser. Is it correct? If not, adjust it in the browser until it works correctly, then port the changes you made into the PHP code.

[paulo]

The HTML is correct, as per the attached photo. The problem with this code snippet is that there are several php loop insertion snippets. I'm sure I'm closing them in the wrong place, and I don't know how to get it right. This section should look like this: https://ibb.co/0jPYV6k

And unfortunately it looks like this: https://ibb.co/fFr7GSV
 

Edited May 14, 2022 by paulo
wrong link

[requinix]

50 minutes ago, paulo said:

The HTML is correct, as per the attached photo.

If the page does not look the way you want then it is not correct.

[paulo]

Yes. The problem is related to the php loop, so i came to ask for help on a php forum. Where there is only html it is displayed the way it should. Anyway, thank you for your time.

[requinix]

Sigh.

If I were in front of your computer, trying to solve your problem, do you know what I would do?

Exactly what I told you to do.

If you're willing to try that then I can help. If you aren't then that means you're shopping around for an answer you like, and that is not how good programming works.