Putting alternative text after every third post - php

Question

I am currently working on a WordPress site for the first time and having some issues figuring out how to achieve what I am aiming for. I would like for it to display a banner advertisement after every third post then continue from where it left off in my existing post.
Because I probably worded this poorly I will display an example image below.
Here's the current loop file I am using within my index.php file.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title = htmlentities(get_the_title ());
$str = explode ("&#8211;", $title);
$artist = preg_replace('#\[[a-zA-Z].*\]#','',$str[0]);
$song = preg_replace('#\[[a-zA-Z].*\]#','',$str[1]);
?>
<div class="album-meta" style="border-bottom: 1px solid #eee;">
<div class="cover">
<img width="90px" height="90px" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>" alt="<?php the_title(); ?>">
</div>
<div class="metadata">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #757575"><p><i style="font-size: 13.7px;"><?php print $song; ?></i></p>
<p><strong style="font-size: 15px;"><?php print $artist; ?></strong></p>
</a>
<p>Download
</div>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Answer 1

You can do it like below:-
<?php $i = 0; // create a counter?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title = htmlentities(get_the_title ());
$str = explode ("&#8211;", $title);
$artist = preg_replace('#\[[a-zA-Z].*\]#','',$str[0]);
$song = preg_replace('#\[[a-zA-Z].*\]#','',$str[1]);
?>
<div class="album-meta" style="border-bottom: 1px solid #eee;">
<div class="cover">
<img width="90px" height="90px" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>" alt="<?php the_title(); ?>">
</div>
<div class="metadata">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #757575"><p><i style="font-size: 13.7px;"><?php print $song; ?></i></p>
<p><strong style="font-size: 15px;"><?php print $artist; ?></strong></p>
</a>
<p>Download
</div>
</div>
<?php if($i%3 ==0 && $i >0){ // check you reached to third div or not?>
<!-- write the html of advertisement div ------->
<?php $i++;} ?> <!-- increase counter -->
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Answer 2

Try this...
<?php
$counter = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$title = htmlentities(get_the_title ());
$str = explode ("&#8211;", $title);
$artist = preg_replace('#\[[a-zA-Z].*\]#','',$str[0]);
$song = preg_replace('#\[[a-zA-Z].*\]#','',$str[1]);
if($counter == 3){ ?>
********** Advertisement code write here ***********
<?php
}
?>
<div class="album-meta" style="border-bottom: 1px solid #eee;">
<div class="cover">
<img width="90px" height="90px" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>" alt="<?php the_title(); ?>">
</div>
<div class="metadata">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #757575"><p><i style="font-size: 13.7px;"><?php print $song; ?></i></p>
<p><strong style="font-size: 15px;"><?php print $artist; ?></strong></p>
</a>
<p>Download
</div>
</div>
<?php
$counter++;
endwhile; else : ?>