1

I am trying add 2 bootstrap class col-md-8 after 1 loop and then 2 col-md-4 class in php while loop. This process should be same in full while loop. So the result will look like this :

enter image description here

My current code is bellow but it's not showing the result what I need, can't get an idea how the loop will like !

Full code : 

<div class="row text-center">
    <h2>What we offer</h2>
    <hr class="separator">
    <?php $get_menu_class=m ysqli_query($conn, "SELECT pcat_name, pcat_image FROM product_category ORDER BY pcat_id DESC"); $x=0; while($menu_class_result=m ysqli_fetch_array($get_menu_class) ) { $menu_class_name=h tmlspecialchars($menu_class_result[ 'pcat_name']); $menu_class_image=h tmlspecialchars($menu_class_result[ 'pcat_image']); if($x & 1) { $col='8' ; }else { $col='4' ; } ?>
    <div class="col-sm-<?php echo $col; ?>">
        <div class="we-offer">
            <a href="area">
                        <img src="<?php echo IMG_DIR."/menu_class/$menu_class_image"; ?>" alt="" class="img-responsive center-block">
                        <h3><?php echo ucfirst($menu_class_name); ?></h3>
                    </a>
        </div>
    </div>
    <?php $x++; } ?>

</div>

Latest code :

<div class="row text-center">
    <h2>What we offer</h2>
    <hr class="separator">
    <?php $get_menu_class=m ysqli_query($conn, "SELECT pcat_name, pcat_image FROM product_category ORDER BY pcat_id DESC"); $x=0; while($menu_class_result=m ysqli_fetch_array($get_menu_class) ) { $menu_class_name=h tmlspecialchars($menu_class_result[ 'pcat_name']); $menu_class_image=h tmlspecialchars($menu_class_result[ 'pcat_image']); $col=( (($x+1)/2)%2)? "8": "4"; ?>
    <div class="col-sm-<?php echo $col; ?>">
        <div class="we-offer">
            <a href="area">
                <img src="<?php echo IMG_DIR."/menu_class/$menu_class_image"; ?>" alt="" class="img-responsive center-block">
                <h3><?php echo ucfirst($menu_class_name); ?></h3>
            </a>
        </div>
    </div>
    <?php $x++; } ?>

</div>

Current Result :

[![enter image description here][2]][2]

Improve this question
10
  • What are you doing with the variable $col could you please add more code. Commented Apr 27, 2016 at 14:15
  • Yes I updated my question. Commented Apr 27, 2016 at 14:15
  • where is your second div? Commented Apr 27, 2016 at 14:17
  • 1
    Can you paste the full code? @shibbirahmed Commented Apr 27, 2016 at 14:17
  • 1
    Is your file really built this way? There is no php closing tag before the html.. Commented Apr 27, 2016 at 14:18

2 Answers 2

Reset to default
2

Try this logic please: $col = ((($i+1)/2)%2)?"8":"4";

https://3v4l.org/GHGVp

As you can see it outputs the desired results.

The col for loop 0 is col4
The col for loop 1 is col8
The col for loop 2 is col8
The col for loop 3 is col4
The col for loop 4 is col4
The col for loop 5 is col8
The col for loop 6 is col8
The col for loop 7 is col4
The col for loop 8 is col4
The col for loop 9 is col8
The col for loop 10 is col8
The col for loop 11 is col4
The col for loop 12 is col4
The col for loop 13 is col8
The col for loop 14 is col8
The col for loop 15 is col4
The col for loop 16 is col4
The col for loop 17 is col8
The col for loop 18 is col8
The col for loop 19 is col4

You just need to replace in your code the 

if($x & 1) {
    $col = '8';
}else {
    $col = '4';
}

with

$col = ((($x+1)/2)%2)?"8":"4";
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

No. It's first it's should show 4, 8, 8, 4, 4, 8, 8, 4, 4 and so one....In your example you are missing 4. It's should be twice :)
@shibbirahmed oh, didnt see that. give me a minute ill fix that
Check my updated question I paste my all code with your one.
Oh I think there is an issue in my code. But you are rock. it's showing correct Result :)
I again updated my latest result. Can you tell me why there is a gap in 1st and 4th image. I get this image by croping. All 4 images size is now : 750 X 240 pixel. Is that problem ?
|
0

I would just keep track of a displayed variable. If you define it as 1 first then you will only show the desired first column set the 1st time and then it will switch to the other.

You wouldn't need to keep track of $x then. I wouldn't call this a simple math problem and the other OK answer that is here doesn't fit your use case.

<div class="row text-center">
    <h2>What we offer</h2>
    <hr class="separator">

    <?php
        $get_menu_class = mysqli_query($conn, "SELECT pcat_name, pcat_image FROM product_category ORDER BY pcat_id DESC");
        $col = 4;
        $displayed = 1;

        while($menu_class_result = mysqli_fetch_array($get_menu_class) ) {
            $menu_class_name = htmlspecialchars($menu_class_result['pcat_name']);
            $menu_class_image = htmlspecialchars($menu_class_result['pcat_image']);
    ?>
            <div class="col-sm-<?php echo $col; ?>">
                <div class="we-offer">
                    <a href="area">
                        <img src="<?php echo IMG_DIR."/menu_class/$menu_class_image"; ?>" alt="" class="img-responsive center-block">
                        <h3><?php echo ucfirst($menu_class_name); ?></h3>
                    </a>
                </div>
            </div>
    <?php
            if($displayed){
                switch($col){
                    case 4:
                        $col = 8;
                        break;
                    case 8:
                        $col = 4;
                        break;
                    default:
                        $col = 4;
                }

                $displayed = 0;
            } else {
                $displayed = 1;
            }
        }
    ?>

</div>
Improve this answer

5 Comments

@shibbirahmed I forgot a stupid semicolon. if you copy and pasted that is the error.
It's not showing exactly what I want..No error message
@shibbirahmed fix the semicolon issue and double check it real fast for me.
I fixed that but no luck :(
@shibbirahmed my fix here is not the best, but I know for a fact this will work. As will Sharky solution which I think is way better than mine. I'm keeping my answer up for purpose of "another way" however the fact that both ours do not work means something else is wrong. If it is your CSS that is a different question. Please provide an update for what you are seeing after your current chosen solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.