php loop with complex html blocks

Question

I have set of html block that are moved using jquery i need to make the correct loop of $posts array inside that i spent days trying to make it correct but it's not working for me.

The expected output should be like this

Here is the my code

                    <?php if(!empty($posts)): ?>
                    <?php $count = 1; $countposts = count($posts); ?>

                    <?php for ($x = 0; $x <= $countposts; $x++): ?>
                        <?php if($x == 0): ?>
                            <div class="col-xs-12 col-sm-6 height-auto">
                        <?php else: ?>
                            <div class="col-sm-6 height-auto">
                        <?php endif; ?>

                            <?php foreach($posts as $post): ?>
                                <div class="col-sm-12 boxed no-padding-left">
                                    <div class="col-sm-3 no-padding-left artical-thumb">

                                    </div>
                                    <div class="col-sm-9 padding-bottom-10">
                                        <h4 class="text-right text-primary">post title</h4>
                                        <h6 class="text-right">author name</h6>
                                        <p class="text-right">
                                            description text
                                        </p>
                                        <a href="#">more</a>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endfor; ?>
                <?php $count++; endif; ?>

This is HTML output that i need

                    <div class="col-xs-12 col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>

                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>

                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 height-auto">
                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>

                    <div class="col-sm-12 boxed no-padding-left">
                        <div class="col-sm-3 no-padding-left artical-thumb">

                        </div>
                        <div class="col-sm-9 padding-bottom-10">
                            <h4 class="text-right text-primary">post title</h4>
                            <h6 class="text-right">author name</h6>
                            <p class="text-right">
                                description text
                            </p>
                            <a href="#">more</a>
                        </div>
                    </div>
                </div>

Notice here that the main blocks the first one looks like that

<div class="col-xs-12 col-sm-6 height-auto">

But the others are

<div class="col-sm-6 height-auto">

Also inside each main block there are only 2 posts

Can you post your code example, where is the php code you're talking about?? It would be good if you could describe your problem and your expected output a little bit more in detail.. — alphanyx
– alphanyx, Commented Sep 5, 2016 at 14:30
You are correct sorry i just added my php code and the output that i need is the html code sample that i already have on my question — Yasser Moussa
– Yasser Moussa, Commented Sep 5, 2016 at 14:46
This a page showing expected output shetewy.website/site/blog-section.html — Yasser Moussa
– Yasser Moussa, Commented Sep 5, 2016 at 18:10

Muhammad · Accepted Answer · 2016-09-06 07:44:06Z

You can simply achieve this by starting the loop inside this <div class="col-sm-6 height-auto"> (the one that acts as a slide) then close and open it with a check for each 2 posts, for example it should look like this:

            <div class="col-xs-12 col-sm-6 height-auto">
                <?php $counter = 0; foreach($posts as $post) : $counter++; ?>
                <div class="col-sm-12 boxed no-padding-left">
                    <div class="col-sm-3 no-padding-left artical-thumb"></div>
                    <div class="col-sm-9 padding-bottom-10">
                        <h4 class="text-right text-primary">post title</h4>
                        <h6 class="text-right">author name</h6>
                        <p class="text-right">
                            description text
                        </p>
                        <a href="#">more</a>
                    </div>
                </div>
                <?php if($counter == 2) : $counter = 0; ?>
                    </div><div class="col-sm-6 height-auto">
                <?php endif; ?>
                <?php endforeach; ?>
            </div>

Hope I helped.

MoeinPorkamel · Accepted Answer · 2016-09-05 14:34:48Z

This is exactly what you want, im using a counter to determine the first post and so on:

<?php
$Posts = [
    [
        'title'  => 'title',
        'author' => 'author',
        'desc'   => 'desc',
        'link'   => 'link',
    ],
    [
        'title'  => 'title',
        'author' => 'author',
        'desc'   => 'desc',
        'link'   => 'link',
    ],
];

$Count = 0;
?>

<?php foreach( $Posts as $Post ) { ?>
    <?php if ($Count == 0) {?>
        <div class="col-xs-12 col-sm-6 height-auto">
            <div class="col-sm-12 boxed no-padding-left">
                <div class="col-sm-3 no-padding-left artical-thumb">
                </div>
                <div class="col-sm-9 padding-bottom-10">
                    <h4 class="text-right text-primary">
                        post title
                    </h4>
                    <h6 class="text-right">
                        author name
                    </h6>
                    <p class="text-right">
                        description text
                    </p>
                    <a href="#">
                        more
                    </a>
                </div>
            </div>
            <div class="col-sm-12 boxed no-padding-left">
                <div class="col-sm-3 no-padding-left artical-thumb">
                </div>
                <div class="col-sm-9 padding-bottom-10">
                    <h4 class="text-right text-primary">
                        post title
                    </h4>
                    <h6 class="text-right">
                        author name
                    </h6>
                    <p class="text-right">
                        description text
                    </p>
                    <a href="#">
                        more
                    </a>
                </div>
            </div>
        </div>
    <?php } else { ?>
    <div class="col-sm-6 height-auto">
        <div class="col-sm-12 boxed no-padding-left">
            <div class="col-sm-3 no-padding-left artical-thumb">
            </div>
            <div class="col-sm-9 padding-bottom-10">
                <h4 class="text-right text-primary">
                    post title
                </h4>
                <h6 class="text-right">
                    author name
                </h6>
                <p class="text-right">
                    description text
                </p>
                <a href="#">
                    more
                </a>
            </div>
        </div>
        <div class="col-sm-12 boxed no-padding-left">
            <div class="col-sm-3 no-padding-left artical-thumb">
            </div>
            <div class="col-sm-9 padding-bottom-10">
                <h4 class="text-right text-primary">
                    post title
                </h4>
                <h6 class="text-right">
                    author name
                </h6>
                <p class="text-right">
                    description text
                </p>
                <a href="#">
                    more
                </a>
            </div>
        </div>
    </div>
    <?php } ?>
    <?php $Count++; ?>
<?php } ?>

But your loop is over the main html containers and each container got to have 2 posts inside as you see .. so this loop will generate containers according to the posts number with 2 static posts inside each container

Collectives™ on Stack Overflow

php loop with complex html blocks

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related