Search code examples
phphtmlposition

HTML is processed first in the footer

I've got a problem In my Footer, there is am Part Html the PHP and then HTML again. The Problem is that on the website the whole HTML is shown before the PHP. You can see it in the photo below.

Thanks, J.S.

<footer class="row align-items-center block bg-light border-t-o">
   <!-- Footer Titel -->
   <div class="col-lg text-left footer-content">
      <h1 class="sponsor">Sponsoren:</h1>
   </div>
   <!-- Sponsorenbilder -->
   <?php
      $random1 = rand(1,4);
      $random2 = rand(1,4);
      $random3 = rand(1,4);
      $random4 = rand(1,4);
      echo "
      <div class='col-md text-center footer-content' style='order: " . $random1 . ";'>
          <img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 1'></img>
      </div>
      <div class='col-md text-center footer-content' style='order: " . $random2 . ";'>
        <img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 2'></img>
      </div>
      <div class='col-md text-center footer-content' style='order: " . $random3 . ";'>
        <img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 3'></img>
      </div>
      <div class='col-md text-center footer-content' style='order: " . $random4 . ";'>
        <img class='img-fluid img-hover' src='images/footer/bsp.jpg' alt='Sponsor 4'></img>
      </div>
      ";
      ?>
   <!-- Impressum Button -->
   <div class="col-lg text-right footer-content">
      <h1 class="impressum impressum-style"><a class="impressum-style" href="impressum.html">Impressum</a></h1>
   </div>
</footer>

enter image description here

Solution

  • The problem, if I understand correctly, is not that the PHP is actually loading second, but rather that the actual block of code generated by the PHP is positioned differently to the flow of code.

    This is because columns that are given the order style are actually placed after columns that do not have the order style.

    To fix this, you can use more PHP to ensure that the 3rd block of code is given an order which is higher than all the others.

    <?php

  function getHighest($list_of_numbers){
    $highest = 0;

    foreach($list_of_numbers as $list_item){
      if ($list_item > $highest){
        $highest = $list_item;
      }
    }

    return $highest;
  }

  $highest = getHighest([$random1, $random2, $random3, $random4]) + 1;
  echo "<div class='col-lg text-right footer-content' style='order: ${highest}'>" 
  ?>