Jump to content

PHP loop + HTML issue


paulo
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Posted (edited)

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 by paulo
wrong link
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.