can anybody help me with integrating php with html?

Question

I'm having a bit of trouble integrating my php code into my HTML code! Can anybody help or point me in the right direction?

Here is my HTML code:

<!-- Slider -->
<div class="carousel-inner cont-slider">

<div class="item active">
  <img alt="" title="" src="http://placehold.it/600x400">
</div>
<div class="item">
  <img alt="" title="" src="http://placehold.it/600x400">
</div>
<div class="item">
  <img alt="" title="" src="http://placehold.it/600x400">
</div>
<div class="item">
  <img alt="" title="" src="http://placehold.it/600x400">
</div>
</div>

<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
  <img alt="" src="http://placehold.it/250x180">
</li>
<li class="" data-slide-to="1" data-target="#article-photo-carousel">
  <img alt="" src="http://placehold.it/250x180">
</li>
<li class="" data-slide-to="2" data-target="#article-photo-carousel">
  <img alt="" src="http://placehold.it/250x180">
</li>
<li class="" data-slide-to="3" data-target="#article-photo-carousel">
  <img alt="" src="http://placehold.it/250x180">
</li>
</ol>
</div>

My PHP code is

<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<div class="item"><img src="' . $image['image']['sizes']['large'] . '" /></div>';
}
}
?>

The above code is a slider with thumbnails that act as a navigation for the different slides.

I've tried the below:

<!--Slider-->
<div class="carousel-inner cont-slider">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<div class="item"><img src="' . $image['image']['sizes']['large'] . '" /></div>';
}
}
?>
</div> 

The above works fine however it doesn't add the active class

Then for the nav indicators I did the following

<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
<?php
 if ($images = get_field('images', $design_id)) {
 foreach ($images as $image) {
 echo '<img src="' . $image['image']['sizes']['large'] . '" />';
             }
             }
?>
</li>
<li class="" data-slide-to="1" data-target="#article-photo-carousel">
 <?php
 if ($images = get_field('images', $design_id)) {
       foreach ($images as $image) {
       echo '<img src="' . $image['image']['sizes']['large'] . '" />';
                                    }
                                }
                                ?>
</li>
<li class="" data-slide-to="2" data-target="#article-photo-carousel">
 <?php
                                if ($images = get_field('images', $design_id)) {
                                    foreach ($images as $image) {
                                        echo '<img src="' . $image['image']['sizes']['large'] . '" />';
                                    }
                                }
                                ?>
</li>
<li class="" data-slide-to="3" data-target="#article-photo-carousel">
  <?php
                                if ($images = get_field('images', $design_id)) {
                                    foreach ($images as $image) {
                                        echo '<img src="' . $image['image']['sizes']['large'] . '" />';
                                    }
                                }
                                ?>
</li>

The problem with the above is that data-slide-to="..." doesn't get add the.

if anyone could help, it would be greatly appreciated! Thanks

Answer 1

try something like:

+++ HTML MAIN FILE CONTENT +++

some html ...
{MYTAG:1}
some html ...
{MYTAG:2}
some html ...

+++ HTML OTHER FILE CONTENT +++

<!-- some comment -->
This is {MYTAG:2.1}

+++ PHP CODE +++

$HTML = file_get_contents($filename); // filename = location main file

$tpls['mytag:1'] = "this is tag 1";
$tpls['mytag:2'] = file_get_contents($another_htmlfile); // another_htmlfile = location html to put in mytag:1
$tpls['mytag:2.1'] = "tag 2";

foreach ($tpls as $tag => $value) {
    $HTML = str_replace("{".strtoupper($tag)."}",$value,$HTML);
}

echo $HTML;

+++ OUTPUTS +++

some html ...
This is tag 1
some html ...
This is tag 2
some html ...

It will make your life so much easier once you get the hang of it and seperates the HTML from the PHP making everything more readable.

Answer 2

You need to count the position in the loop so you can add the active class to the 1st elements. The same applies to the indicators. Also, you need to change the data-slide-to attributes to match the correct slide.

Lastly, using php templating syntax( if endif / foreach endforeach ) and echoing php rather than html is usually easier to read:

<!-- only show slider markup if we have images-->
<?php if ($images = get_field('images', $design_id)) :?>
    <!--Slider-->
    <div class="carousel-inner cont-slider">
    <?php

        $counter=0;
        foreach ($images as $image) :?>
            <div class="item<?php echo $counter==0?' active':'';?>"><img src="<?php echo $image['image']['sizes']['large'];?>" /></div>
            <?php
            $counter++;
        endforeach;
    ?>
    </div> 
    <ol class="carousel-indicators">

    <?php
         $counter = 0;
         foreach ($images as $image):?>
             <li<?php echo $counter==0?' class="active"':'';?> data-slide-to="<?php echo $counter;?>" data-target="#article-photo-carousel">
                 <img src="<?php echo $image['image']['sizes']['large'];?>" />
             </li>
             <?php 
             $counter++;
         endforeach;?>
    </ol>
<?php endif;?>