How to add html in foreach loop?

Question

Basically what I need to do foreach three divs and show 5 services from the database.

I don't know how to do that. Can someone explain to me how? I try everything but just I have no idea how to do it. Second div should not be in row. Output be like on image link that I put below.

Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

    <div class="row">
        <div class="col-lg-12">
            <div class="row">

               <div class="col-lg-4">
                    <div class="row">
                        <div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
                            <figcaption>
                                <h3>Service Title Goes Here 1</h3>
                            </figcaption>
                            <a href="/detail.php"></a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
                            <figcaption>
                                <h3>Service Title Goes Here 2</h3>
                            </figcaption>
                            <a href="/detail.php"></a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 service-middle">
                    <div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
                        <figcaption>
                            <h3>Service Title Goes Here 3</h3>
                        </figcaption>
                        <a href="/detail.php"></a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="row">
                        <div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
                            <figcaption>
                                <h3>Service Title Goes Here 4</h3>
                            </figcaption>
                            <a href="/detail.php"></a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
                            <figcaption>
                                <h3>Service Title Goes Here 5</h3>
                            </figcaption>
                            <a href="/detail.php"></a>
                        </div>
                    </div>
                </div>

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

</div>

</body>
</html>

This should look like this

Hey @Andrew, I put the code and please tell me where and how I wrong. — Coffee, Sep 18 '18 at 12:11
if you want to solve this problem, remove everything except the needed loop and if else statement in an attempt to isolate the problem https://stackoverflow.com/help/mcve — Andrew, Sep 19 '18 at 12:56

score 0 · Answer 1 · answered Sep 17 '18 at 17:17

Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.

Do let me know if this worked and how it looked like on your screen. Thanks.

PS: dont run snippet, just use the css, bootstrap is not included.

.service-img.service {
  height: 50%;
}

.height100{
  height:100px;
}

.service-middle>.service-img.service{
  height:100% !important;
}

<div class="container">

  <div class="row">
    <div class="col-lg-12">
      <div class="row height100">


        <div class="col-lg-4">
          <div class="row">
            <div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
              <figcaption>
                <h3>Service Title Goes Here 1</h3>
              </figcaption>
              <a href="/detail.php"></a>
            </div>
          </div>
          <div class="row">
            <div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
              <figcaption>
                <h3>Service Title Goes Here 2</h3>
              </figcaption>
              <a href="/detail.php"></a>
            </div>
          </div>
        </div>

        <div class="col-lg-4 service-middle">
          <div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
            <figcaption>
              <h3>Service Title Goes Here 3</h3>
            </figcaption>
            <a href="/detail.php"></a>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="row">
            <div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
              <figcaption>
                <h3>Service Title Goes Here 4</h3>
              </figcaption>
              <a href="/detail.php"></a>
            </div>
          </div>
          <div class="row">
            <div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
              <figcaption>
                <h3>Service Title Goes Here 5</h3>
              </figcaption>
              <a href="/detail.php"></a>
            </div>
          </div>
        </div>


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


</div>

score 0 · Answer 2 · answered Sep 17 '18 at 19:03

Not really sure if the div.row should go in 2nd row, but I hope you get the idea. I'm just using a ternary operator to add the service-middle class: <?php echo $num == 2? 'sevice-middle' : '' ?>

<?php if ($num == 1): ?>
    <div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>

<?php foreach ($services as $service): $num++; ?> 

<div class="row">
    <div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
        <figcaption>
            <h3><?php echo $service['title']; ?></h3>
        </figcaption>
        <a href="/detail.php"></a>
    </div>
</div>

<?php endforeach ?>

<?php if ($num > 0): ?>
   </div>
<?php endif ?>

what exactly ? I mean you should substitute this part with the foreach in your code — Charlie, Sep 17 '18 at 19:19

score 0 · Answer 3 · answered Sep 18 '18 at 13:09

0

The primary bug you are facing is this:

<?php if ($num == 1): ?>

should be

<?php if ($num === 1): ?>

For more info:

How does true/false work in PHP?

answered Sep 18 '18 at 13:09

Andrew

18,680
13
103
118

Sorry @Andrew, but with your suggestion also not working. – Coffee Sep 18 '18 at 14:02
@Coffee Hello, "not working" isn't very informative, people usually can't help you based on that. Better to be say what is happening, and what you expect to happen. This is a bug in your code, maybe there are more. – Andrew Sep 18 '18 at 14:07
My code show five divs in a row, not three as is should be like on the image I post. – Coffee Sep 18 '18 at 16:35

How to add html in foreach loop?

3 Answers3