How to properly display this php block

Question

I'm using data from MySQL database and display looks like this:

I want 3 articles in one line. The pictures below are made with HTML and CSS.

This is my code:

while($row=mysqli_fetch_array($result))
        {?>

            <div class="container">
                <div class="row padding">
                    <div class="col-md-4 col-xs-12">
                        <div class="card">
                            <img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
                                <div class="card-body">
                                    <h6 class="card-title">&laquo; <?php echo $row['naslov']; ?> &raquo;</h4>
                                </div>
                                <p class="ispod"><?php echo $row['datum'];?> </p>

                        </div>

                    </div>
                </div>  
            </div>      



       <?php }?>

Answer 1

This seems to be a nice point in your project to implement a template engine. There a couple out there. I really liked working with typo3 fluid, but back to your question... For your existing code, you can end your php code, use html and just echo the php variables you need.

<?php
// ... some php stuff
?>
<div class="container">
  /* some html stuff * /
  <img class="malaSlika" src="<?php echo UPLPATH . $row['slika']; ?>">
  /* some more html stuff */
  /* <?= is short for <?php echo
  <img class="malaSlika" src="<?= UPLPATH . $row['slika']; ?>">
</div>
<?php
// ... some more php stuff

As said, maybe a template engine would help this even further. Edit: To add div class="row" it could be something like this.

<?php ... ?>

<div class="container">

<?php
$i = 0;
while($row=mysqli_fetch_array($result)) :

if($i % 3 == 0) : ?>
                <div class="row padding">
<?php endif; ?>
                    <div class="col-md-4 col-xs-12">
                        <div class="card">
                            <img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
                                <div class="card-body">
                                    <h6 class="card-title">&laquo; <?php echo $row['naslov']; ?> &raquo;</h4>
                                </div>
                                <p class="ispod"><?php echo $row['datum'];?> </p>

                        </div>

                    </div>

<?php if($i % 3 == 0) : ?>
                </div>
<?php endif; ?>



<?php
$i++;
endwhile;
?>

</div>

It will always get ugly at some point I think. This is a quick solution. the modulo (%) devides by the number and returns the rest value. so $i modulo 3 return 0 at 0, 3, 6, 9, 12 etc. Meaning it will always add the "row padding" div.