Ttykuu

The following code works fine, however, I'm trying to simplify it. I wrote it but I'm a beginner PHP coder. I can see that most probably the use of a function or class would be better... or anything to make it more concise in terms of php.

This is a wordpress php code. I can't do it in a loop. You see how repetitive it is. the first three elements just have different variables to be fed via php. The last two have slightly different html markup.

<div class="row mb-3">
 <!-- beginning of TOP row -->

 <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
 <?php
 $post_object = get_field('top_left_tile');
 if( $post_object ): 
 // override $post
 $post = $post_object;
 setup_postdata( $post ); 
 $img = get_the_post_thumbnail_url($post_id, 'frontTile');
 ?>
 <a class="tile-text" href="<?php the_field('tile_url'); ?>">
 <div class="img-overlay h-100">
 <?php
 if ( $img ) ?>
 <img src="<?php echo $img; ?>" />
 <?php else ?>
 <img src="https://via.placeholder.com/500x500" />
 <?php ?>
 </div>
 <div class="d-flex align-items-start flex-column tile-overlay">
 <div class="mb-auto p-2">
 <h5><span class="tag pr-2 pl-2">
 <?php the_field('tile_category'); ?> </span></h5>
 </div>
 <div class="p-2 bg-secondary">
 <h3 class="p-2">
 <?php the_title(); ?>
 </h3>
 <p class="p-2">
 <?php echo $post->post_content; ?>
 </p>
 </div>
 </div>
 </a>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
 <?php endif; ?>
 </div> <!-- end of top left -->



 <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
 <!-- beginning of top centre -->
 <?php
 $post_object = get_field('top_centre_tile');
 if( $post_object ): 
 // override $post
 $post = $post_object;
 setup_postdata( $post ); 
 $img = get_the_post_thumbnail_url($post_id, 'frontTile');
 ?>
 <a class="tile-text" href="<?php the_field('tile_link'); ?>">
 <div class="img-overlay h-100">
 <?php
 if ( $img ) ?>
 <img src="<?php echo $img; ?>" />
 <?php else ?>
 <img src="https://via.placeholder.com/500x500" />
 <?php ?>
 </div>
 <div class="d-flex align-items-start flex-column tile-overlay">
 <div class="mb-auto p-2">
 <h5><span class="tag pr-2 pl-2">
 <?php the_field('tile_category'); ?> </span></h5>
 </div>
 <div class="p-2 bg-secondary">
 <h3 class="p-2">
 <?php the_title(); ?>
 </h3>
 <p class="p-2">
 <?php echo $post->post_content; ?>
 </p>
 </div>
 </div>
 </a>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
 <?php endif; ?>
 </div> <!-- end of top centre -->



 <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
 <!-- beginning of top right -->
 <?php
 $post_object = get_field('top_right_tile');
 if( $post_object ): 
 // override $post
 $post = $post_object;
 setup_postdata( $post ); 
 $img = get_the_post_thumbnail_url($post_id, 'frontTile');
 ?>
 <a class="tile-text" href="<?php the_field('tile_link'); ?>">
 <div class="img-overlay h-100">
 <?php
 if ( $img ) ?>
 <img src="<?php echo $img; ?>" />
 <?php else ?>
 <img src="https://via.placeholder.com/500x500" />
 <?php ?>
 </div>
 <div class="d-flex align-items-start flex-column tile-overlay">
 <div class="mb-auto p-2">
 <h5><span class="tag pr-2 pl-2">
 <?php the_field('tile_category'); ?> </span></h5>
 </div>
 <div class="p-2 bg-secondary">
 <h3 class="p-2">
 <?php the_title(); ?>
 </h3>
 <p class="p-2">
 <?php echo $post->post_content; ?>
 </p>
 </div>
 </div>
 </a>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
 <?php endif; ?>
 </div> <!-- end of top right -->

</div> <!-- end of TOP row -->


<div class="row mb-3">
 <!-- beginning of middle row -->

 <div class="col-xs-12 col-sm-6 col-md-6 mb-3">
 <!-- beginning of middle left -->
 <?php
 $post_object = get_field('middle_left_tile');
 if( $post_object ): 
 // override $post
 $post = $post_object;
 setup_postdata( $post ); 
 $img = get_the_post_thumbnail_url($post_id, 'frontTilePort');
 ?>

 <a class="tile-text" href="<?php the_field('tile_link'); ?>">
 <div class="row text-white">
 <div class="col-5 mr-0 pr-0 d-none d-md-block">
 <img class="" src="<?php echo $img; ?>" />
 </div>
 <div class="col ml-0 bg-secondary">
 <h5 class="py-2"><span class="tag px-2">
 <?php the_field('tile_category'); ?> </span></h5>
 <div class="p-1">
 <h5>
 <?php the_title(); ?>
 </h5>
 <p>
 <?php echo $post->post_content; ?>
 </p>
 </div>
 </div>
 </div>
 </a>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
 <?php endif; ?>
 </div> <!-- end of middle left -->




 <div class="col-xs-12 col-sm-6 col-md-6 mb-3">
 <!-- beginning of middle right -->
 <?php
 $post_object = get_field('middle_right_tile');
 if( $post_object ): 
 // override $post
 $post = $post_object;
 setup_postdata( $post ); 
 $img = get_the_post_thumbnail_url($post_id, 'frontTilePort');
 ?>

 <a class="tile-text" href="<?php the_field('tile_link'); ?>">
 <div class="row text-white">
 <div class="col-5 mr-0 pr-0 d-none d-md-block">
 <img class="" src="<?php echo $img; ?>" />
 </div>
 <div class="col ml-0 bg-secondary">
 <h5 class="py-2"><span class="tag px-2">
 <?php the_field('tile_category'); ?> </span></h5>
 <div class="p-1">
 <h5>
 <?php the_title(); ?>
 </h5>
 <p>
 <?php echo $post->post_content; ?>
 </p>
 </div>
 </div>
 </div>
 </a>
 <?php wp_reset_postdata(); // IMPORTANT - reset the $post™™£ object so the rest of the page works correctly ?>
 <?php endif; ?>
 </div> <!-- end of middle right -->

</div> <!-- end of middle row -->