Assign custom classes to the divs inside the loop

Question

I'm using this nice effect to replace a slider that was part of a custom theme I made. I need a way to implement a custom css class to each div that will be inside the wordpress loop, I want to use a custom post type I already have registered to put the images dynamically in the <img src=""> tags, in the old version of my code I was using alsto this plugin to add a secondary featured image for mobile only it use the get_posts() instead of the standard loop, see the link for more info. How I can achieve this?

This is the code I'm using without the loop for now:

<div class="jumbotron jumbotron-fluid bg-scroll">
  <div class="container-fluid">
    <div class="row">

      <div class="col-sm-12 col-md-12 col-lg-12 img-top"> <!-- custom class -->
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-12 img-text">
            <h1 class="">Hello</h1>
            <p class="lead">World.</p>
          </div>
        </div>
        <img class="img-fluid bg-img" src="image link here">
      </div>

      <div class="col-sm-12 col-md-12 col-lg-12 img-middle"> <!-- custom class -->
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-12 img-text">
            <h1 class="">Lorem ipsum</h1>
            <p class="lead">docet.</p>
          </div>
        </div>
        <img class="img-fluid bg-img" src="image link here...">
      </div>

    </div>
  </div>
</div>

As you can see to achieve the effect I need to assign to the bootstrap columns a different class in my case img-top and img-middle. Using the loop will make this not possible and I want to avoid that the images are hardcoded inside the php file.

Answer 1

Here's one example how you could write the loop for your jumbotron,

// add helper functions to functions.php
function my_posts_query() {
  $args = array(); // add parameters as needed post_type, posts_per_page, etc.
  return new WP_Query($args);
}

function my_single_post_image( int $post_id ) {
  $url = get_the_post_thumbnail_url( $post_id, 'large' ); // update as needed
  if ( $url ) {
    printf(
      '<img class="img-fluid bg-img" src="%s">',
      esc_url( $post_id );
    );
  }
}

function my_single_post( WP_Post $post, string $extra_class ) {
  ?>
  <div class="col-sm-12 col-md-12 col-lg-12 <?php echo esc_attr( $extra_class ); ?>">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12 img-text">
        <h1 class=""><?php echo esc_html( $post->post_title ); ?></h1>
        <p class="lead"><?php echo esc_html( $post->post_excerpt ); ?></p>
      </div>
    </div>
    <?php my_single_post_image( $post->ID ); ?>
  </div>
  <?php
}

function position_class_name( int $total, int $count ) {
  if ( 0 === $count ) {
    return 'img-top';
  } else if ( $total === $count ) {
    return 'img-bottom';
  } else { // add more logic, if needed
    return 'img-middle';
  }
}

// in template file
$query = my_posts_query();
if ( $query->posts ) {
  ?>
  <div class="jumbotron jumbotron-fluid bg-scroll">
    <div class="container-fluid">
      <div class="row">
        <?php
          foreach ( $query->posts as $i => $my_post ) {
            my_single_post( $my_post, position_class_name( $query->found_posts, $i ) );
          }
        ?>
      </div>
    </div>
  </div>
  <?php
}

Another thing you could also consider is that instead of using some specific css classes, you could use more generic approach with :nth-child(n) selector both in css and jQuery. E.g.

// styles.css
.jumbotron .row > div {
  // css
}
.jumbotron .row > div:first-child {
  // css
}
.jumbotron .row > div:last-child {
  // css
}
.jumbotron .row > div:nth-child(n) {
  // css
}

// scripts.js
var myElement = $( ".jumbotron .row > div:nth-child(1)" );