Feeding PHP variables to a number of HTML elements

Question

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 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 -->

waterloomatt · Accepted Answer · 2019-03-22 15:53:54Z

There are a few ways you could handle this. One of the simpler ways would be to split it up into 2 loops - the first one handles the first 3 HTML structures and the 2nd loop handles the final 2 HTML structures.

> $post_object = get_field('top_centre_tile');
>     if( $post_object ): 
>         // override $post
>         $post = $post_object;

Why are you clobbering the $post_object? You can simply name the variable $post and then continue using it.

I omitted the HTML structure here for clarity.

<!-- Handles the first 3 common HTML structures. -->
<div class="row mb-3">
    <?php
    $posts = [
        'top_left_tile',
        'top_centre_tile',
        'top_right_tile'
    ];

    foreach ($posts as $title): ?>
        <div class="col-xs-12 col-sm-6 col-md-4 tile pr-0 mb-3">
            <?php
            $post = get_field($title);

            if ($post): ?>
                <!-- common HTML structure -->
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
</div>

<!-- Handles the final 2 common HTML structures. -->
<div class="row mb-3">
    <?php
    $posts = [
        'middle_left_tile',
        'middle_right_tile'
    ];

    foreach ($posts as $title): ?>
        <div class="col-xs-12 col-sm-6 col-md-6 mb-3">
            <?php
            $post = get_field($title);

            if ($post): ?>
                <!-- common HTML structure -->
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
</div>

Stack Exchange Network

Feeding PHP variables to a number of HTML elements

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Feeding PHP variables to a number of HTML elements

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions